PolicyGenius - Style Guide

Banner Layout

Pellentesque habitant morbi tristique

Nam metus massa, tempor vel tortor et

Vel tortor

Turpis quis mauris maximus

.mod-hero.with-headshot.layout-banner
  header
    h1 Pellentesque habitant morbi tristique
    h2 Nam metus massa, tempor vel tortor et
    .layout-form-inputs
      .field
        label Mauris
        .selectbox
          select
            option 100,000
      .field
        label Orci
        .selectbox
          select
            option Dignissim

    a.action.button Vel tortor
    p
      a Turpis quis mauris maximus
  aside
    h4 Suspendisse et nisi turpis
    blockquote Maecenas rhoncus pulvinar dolor, sit amet commodo risus hendrerit quis. Suspendisse vel massa iaculis, porta massa in, pellentesque purus.
    img.headshot src='holder.js/360x336?auto=yes'

Banner hero with logo

Maecenas ullamcorper turpis

Tristique

100,000

Sapien

Tempus

Vivamus faucibus

efficitur

Ut dapibus tellus finibus quis

.mod-hero.layout-banner
  header
    h2.text-center Maecenas ullamcorper turpis
    .mod-estimate-panel
      .header
        .statistic
          h4 Tristique
          .value 100,000
        .statistic
          h4 Sapien
          .value Tempus
      .content
        .statistic
          h4 Vivamus faucibus
          .value efficitur
    button.button.action type='submit' Nulla facilisi
    p
      small Ut dapibus tellus finibus quis
  aside
    img.logo src='holder.js/200x100?auto=yes'
    h4 Convallis condimentum neque viverra sit amet
    blockquote Etiam ut ullamcorper diam. Pellentesque ornare malesuada blandit. Cras egestas neque non massa porta, molestie ornare ipsum luctus.

Banner hero with feature image

Curabitur ex nibh, pharetra eget aliquam congue

Dictum et consectetur ornare.

.mod-hero.layout-banner
  header
    h1 Curabitur ex nibh, pharetra eget aliquam congue
    form
      .textfield
        .field
          label for='pet_criteria_name'
            | Ut pulvinar leo non
            abbr title='required' *
          input placeholder='aliquam tortor et aliquam dignissim' type='text'
      input.button.action type='submit' value='Aenean in lacus lacinia'
      p
        small Dictum et consectetur ornare.
  aside
    img.feature-image src='holder.js/500x250?auto=yes'
    h3.text-center In rhoncus orci et ex fermentum, ut euismod

Suspendisse molestie vel sapien

Phasellus viverra mollis massa Aenean sit

or libero vitae augue 1-000-000-0000

Nulla maximus congue dolor sed vestibulum. Nunc mattis molestie libero, sed vulputate ipsum aliquet vitae. Proin pharetra felis et odio porttitor, et egestas tortor laoreet.

Consequat augue Donec dui est
Aliquet at enim ac egestas
Aliquam
.mod-hero.light.with-cover.layout-banner
  header
    h1 Suspendisse molestie vel sapien
    h3
      | Phasellus viverra mollis massa
      a< href='#' Aenean sit
    form
      .layout-form-inputs
        .selectfield
          .field
            label for='select1' Nulla maximus
            .selectbox
              select id='select1'
                option 10,000
                option 10,000
                option 10,000
                option 10,000
        .selectfield
          .field
            label for='select2' Proin
            .selectbox
              select id='select2'
                option bibendum
                option tincidunt
                option habitasse
                option consectetur
      .layout-form-inputs
        div
          button.button.action In rhoncus
          p
            | or libero vitae augue
            a< href='#' 1-000-000-0000
        div
    .layout-transparent
      .mod-trustpilot.horizontal
        aside
          .powered-by
            .trustpilot-logo
          .stars.mini.excellent
            .star.filled
            .star.filled
            .star.filled
            .star.filled
            .star.filled
          .rating
            span Mlestie vel sapien
            strong< Vivamus
        .review
          p Nulla maximus congue dolor sed vestibulum. Nunc mattis molestie libero, sed vulputate ipsum aliquet vitae. Proin pharetra felis et odio porttitor, et egestas tortor laoreet.
          .meta
            span Consequat augue
            em< Donec dui est
  aside
    img src='holder.js/500x540?auto=yes'
.mod-brands
  h5 Aliquet at enim ac egestas
  .content
    img src='holder.js/120x50?auto=yes'
    img src='holder.js/140x40?auto=yes'
    img src='holder.js/120x50?auto=yes'
    img src='holder.js/140x40?auto=yes'
    img src='holder.js/120x50?auto=yes'
    span Aliquam

Morbi quis dui consequat, consectetur massa nec

Nam accumsan quam eu blandit rhoncus

Nam accumsan quam eu blandit rhoncus

sed sem sagittis 1-000-000-0000

Proin et ultrices neque. Morbi sit amet dapibus dui. Fusce id egestas metus, consectetur sagittis lacus. Phasellus luctus elementum iaculis. Nunc mattis iaculis enim.

Proin at nunc at nisi Lobortis bibendum at

Sollicitudin

  • malesuada quis - Sed non tortor id neque posuere luctus ac vel sapien
  • porttitor - Nullam metus velit, efficitur commodo elementum vitae
  • Eget neque - Maecenas ullamcorper turpis quis elit volutpat
.mod-hero.light.layout-banner
  header
    h1 Morbi quis dui consequat, consectetur massa nec
    .typography-5 Nam accumsan quam eu blandit rhoncus
    form
      .layout-form-inputs
        .selectfield
          .field
            label for='select1' Suspendisse
            .selectbox
              select id='select1'
                option 10,000
                option 10,000
                option 10,000
                option 10,000
        .selectfield
          .field
            label for='select2' Orci
            .selectbox
              select id='select2'
                option Sodales
                option Cursus
                option Risus
                option Blandit
      button.button.action Morbi quis dui
      p: a href='#' Nam accumsan quam eu blandit rhoncus
      p
        | sed sem sagittis
        a< href='#' 1-000-000-0000
  aside.we-work
    h3
      | Aenean gravida velit suscipit
      br
      | Maecenas efficitur accumsan
    img src='holder.js/500x250?auto=yes'
.layout-trustpilot.shift
  .mod-trustpilot.horizontal
    aside
      .rating
        span Phasellus tellus augue
        strong< Maximus
        span< at
      .powered-by
        .trustpilot-logo
      a.button.mini.info href='#' Vivamus dictum justo
    .review
      p Proin et ultrices neque. Morbi sit amet dapibus dui. Fusce id egestas metus, consectetur sagittis lacus. Phasellus luctus elementum iaculis. Nunc mattis iaculis enim.
      .meta
        span Proin at nunc at nisi
        em< Lobortis bibendum at
    img src='holder.js/240x280?auto=yes'
.layout-coverage-ticker
  h4 Sollicitudin
  ul
    li
      em> malesuada quis -
      | Sed non tortor id neque posuere luctus ac vel sapien
    li
      em> porttitor -
      | Nullam metus velit, efficitur commodo elementum vitae
    li
      em> Eget neque -
      | Maecenas ullamcorper turpis quis elit volutpat

Phasellus tellus augue, maximus a viverra tincidunt

Phasellus luctus elementum Aenean sit

maximus a viverra 0-000-000-0000

In rhoncus orci et ex fermentum, ut euismod
et netus

Etiam malesuada quis augue vitae dapibus. Sed non tortor id neque posuere luctus ac vel sapien. Nullam metus velit, efficitur commodo elementum vitae, porttitor id tortor. Fusce sagittis nec nulla sit amet varius.

Maecenas ullamcorper New York, NYPhasellus tellus augue
.mod-hero.light.with-cover.layout-banner
  header
    h1 Phasellus tellus augue, maximus a viverra tincidunt
    .typography-5
      | Phasellus luctus elementum
      a< href='#' Aenean sit
    form
      .mod-two-fields
        .field
          label for='select1' Coverage
          .selectbox
            select id='select1'
              option 10,000
              option 10,000
              option 10,000
              option 10,000
        .field
          label for='select2' Term
          .selectbox
            select id='select2'
              option a venenatis pulvinar
              option augue vitae dapibus
              option non tortor id
              option efficitur commodo
      .layout-form-inputs
        div
          button.button.action Maecenas ullamcorper
          p
            | maximus a viverra
            a< href='#' 0-000-000-0000
        div
    .layout-transparent
      .mod-brands
        h5 In rhoncus orci et ex fermentum, ut euismod
        .content
          img src='holder.js/120x50?auto=yes'
          img src='holder.js/140x40?auto=yes'
          img src='holder.js/120x50?auto=yes'
          span et netus
          img src='holder.js/140x40?auto=yes'
          img src='holder.js/120x50?auto=yes'
  aside
    img src='holder.js/500x578?auto=yes'
.layout-trustpilot
  .mod-trustpilot.horizontal.columns
    aside
      .powered-by
        .trustpilot-logo
      .stars.mini.excellent
        .star.filled
        .star.filled
        .star.filled
        .star.filled
        .star.filled
    .review
      p Etiam malesuada quis augue vitae dapibus. Sed non tortor id neque posuere luctus ac vel sapien. Nullam metus velit, efficitur commodo elementum vitae, porttitor id tortor. Fusce sagittis nec nulla sit amet varius.
    .author
      strong Maecenas ullamcorper
      strong< New York, NY
      a.more href='#' Phasellus tellus augue

Phasellus tellus augue, maximus a viverra tincidunt

Phasellus luctus elementum Aenean sit

maximus a viverra
0-000-000-0000

In rhoncus orci et ex fermentum, ut euismod
et netus
.mod-hero.light.layout-banner
  header
    h1 Phasellus tellus augue, maximus a viverra tincidunt
    .typography-5
      | Phasellus luctus elementum
      a< href='#' Aenean sit
    form
      .mod-two-fields
        .field
          label for='select1' Coverage
          .selectbox
            select id='select1'
              option 10,000
              option 10,000
              option 10,000
              option 10,000
        .field
          label for='select2' Term
          .selectbox
            select id='select2'
              option a venenatis pulvinar
              option augue vitae dapibus
              option non tortor id
              option efficitur commodo
      .layout-form-inputs
        button.button.action Maecenas ullamcorper
        p.spacer-zero
          | maximus a viverra
          br
          a href='#' 0-000-000-0000
  aside
    .spacer-xl
      .mod-trustpilot.mixed.spacer-negative-m
        h2 Our clients love us!
        .header
          .stars.mini.excellent
            .star.filled
            .star.filled
            .star.filled
            .star.filled
            .star.filled
          .trustpilot-logo
        .review
          p Etiam malesuada quis augue vitae dapibus. Sed non tortor id neque posuere luctus ac vel sapien. Nullam metus velit, efficitur commodo elementum vitae, porttitor id tortor. Fusce sagittis nec nulla sit amet varius.
          .meta
            span Maecenas ullamcorper
            em< New York, NY
        strong
          a.more href='#' Phasellus tellus augue
.mod-brands.with-feature-image
  h5 In rhoncus orci et ex fermentum, ut euismod
  .content
    img src='holder.js/120x50?auto=yes'
    img src='holder.js/140x40?auto=yes'
    img src='holder.js/120x50?auto=yes'
    span et netus
    img src='holder.js/140x40?auto=yes'
    img src='holder.js/120x50?auto=yes'
    img src='holder.js/120x50?auto=yes'
  img src='holder.js/240x280?auto=yes'

Sed dapibus orci id sapien placerat, a consequat augue

Phasellus luctus elementum Aenean sit

maximus a viverra
0-000-000-0000

Etiam malesuada quis augue vitae dapibus. Sed non tortor id neque posuere luctus ac vel sapien. Nullam metus velit, efficitur commodo elementum vitae, porttitor id tortor. Fusce sagittis nec nulla sit amet varius.

Maecenas ullamcorper New York, NY
.mod-hero.light.layout-banner.layout-single-header
  h1 Sed dapibus orci id sapien placerat, a consequat augue
  header
    .typography-5.text-center
      | Phasellus luctus elementum
      a< href='#' Aenean sit
    form
      .mod-two-fields
        .field
          label for='select1' Coverage
          .selectbox
            select id='select1'
              option 10,000
              option 10,000
              option 10,000
              option 10,000
        .field
          label for='select2' Term
          .selectbox
            select id='select2'
              option a venenatis pulvinar
              option augue vitae dapibus
              option non tortor id
              option efficitur commodo
      .layout-form-inputs
        button.button.action Maecenas ullamcorper
        p.spacer-zero
          | maximus a viverra
          br
          a href='#' 0-000-000-0000
  aside.we-work
    h3 America's top Insurance
    img src='holder.js/500x200?auto=yes'
.layout-trustpilot
  .mod-trustpilot.horizontal
    aside
      .powered-by
        .trustpilot-logo
      .stars.mini.excellent
        .star.filled
        .star.filled
        .star.filled
        .star.filled
        .star.filled
      strong
        a.more href='#' Phasellus tellus augue
    .review
      p Etiam malesuada quis augue vitae dapibus. Sed non tortor id neque posuere luctus ac vel sapien. Nullam metus velit, efficitur commodo elementum vitae, porttitor id tortor. Fusce sagittis nec nulla sit amet varius.
      .meta
        span Maecenas ullamcorper
        em< New York, NY
    img src='holder.js/240x240?auto=yes'

Phasellus tellus augue, maximus a viverra tincidunt

Phasellus luctus elementum Aenean sit

maximus a viverra
0-000-000-0000

In rhoncus orci et ex fermentum, ut euismod
et netus
.mod-hero.light.layout-banner.layout-single-header
  h1 Phasellus tellus augue, maximus a viverra tincidunt
  header
    .typography-5.text-center
      | Phasellus luctus elementum
      a< href='#' Aenean sit
    form
      .mod-two-fields
        .field
          label for='select1' Coverage
          .selectbox
            select id='select1'
              option 10,000
              option 10,000
              option 10,000
              option 10,000
        .field
          label for='select2' Term
          .selectbox
            select id='select2'
              option a venenatis pulvinar
              option augue vitae dapibus
              option non tortor id
              option efficitur commodo
      .layout-form-inputs
        button.button.action Maecenas ullamcorper
        p.spacer-zero
          | maximus a viverra
          br
          a href='#' 0-000-000-0000
  aside
    .mod-trustpilot.mixed
      .header
        .stars.mini.excellent
          .star.filled
          .star.filled
          .star.filled
          .star.filled
          .star.filled
        .trustpilot-logo
      .review
        p Etiam malesuada quis augue vitae dapibus. Sed non tortor id neque posuere luctus ac vel sapien. Nullam metus velit, efficitur commodo elementum vitae, porttitor id tortor. Fusce sagittis nec nulla sit amet varius.
        .meta
          span Maecenas ullamcorper
          em< New York, NY
      strong
        a.more href='#' Phasellus tellus augue
.mod-brands.shift.with-feature-image
  h5 In rhoncus orci et ex fermentum, ut euismod
  .content
    img src='holder.js/120x50?auto=yes'
    img src='holder.js/140x40?auto=yes'
    img src='holder.js/120x50?auto=yes'
    span et netus
    img src='holder.js/140x40?auto=yes'
    img src='holder.js/120x50?auto=yes'
    img src='holder.js/120x50?auto=yes'
  img src='holder.js/240x280?auto=yes'

Phasellus tellus augue, maximus a viverra tincidunt

Phasellus luctus elementum Aenean sit

maximus a viverra 0-000-000-0000

Nam consequat maximus turpis, vestibulum
et netus

Etiam malesuada quis augue vitae dapibus. Sed non tortor id neque posuere luctus ac vel sapien. Nullam metus velit, efficitur commodo elementum vitae, porttitor id tortor. Fusce sagittis nec nulla sit amet varius.

Maecenas ullamcorper Turpis quis elitPhasellus tellus augue
.mod-hero.light.with-cover.layout-banner
  header
    h1 Phasellus tellus augue, maximus a viverra tincidunt
    .typography-5
      | Phasellus luctus elementum
      a< href='#' Aenean sit
    form
      .mod-two-fields
        .field
          label for='select1' Coverage
          .selectbox
            select id='select1'
              option 10,000
              option 10,000
              option 10,000
              option 10,000
        .field
          label for='select2' Term
          .selectbox
            select id='select2'
              option a venenatis pulvinar
              option augue vitae dapibus
              option non tortor id
              option efficitur commodo
      .layout-form-inputs
        div
          button.button.action Maecenas ullamcorper
          p
            | maximus a viverra
            a< href='#' 0-000-000-0000
        div
    .layout-brands
      .mod-brands
        h5 Nam consequat maximus turpis, vestibulum
        .content
          img src='holder.js/120x50?auto=yes&theme=dark'
          img src='holder.js/140x40?auto=yes&theme=dark'
          img src='holder.js/120x50?auto=yes&theme=dark'
          img src='holder.js/140x40?auto=yes&theme=dark'
          img src='holder.js/120x50?auto=yes&theme=dark'
          img src='holder.js/140x40?auto=yes&theme=dark'
          img src='holder.js/120x50?auto=yes&theme=dark'
          span et netus
  aside
    img src='holder.js/500x578?auto=yes'
.layout-trustpilot
  .mod-trustpilot.horizontal.columns
    aside
      .powered-by
        .trustpilot-logo
      .stars.mini.excellent
        .star.filled
        .star.filled
        .star.filled
        .star.filled
        .star.filled
    .review
      p Etiam malesuada quis augue vitae dapibus. Sed non tortor id neque posuere luctus ac vel sapien. Nullam metus velit, efficitur commodo elementum vitae, porttitor id tortor. Fusce sagittis nec nulla sit amet varius.
    .author
      strong Maecenas ullamcorper
      strong< Turpis quis elit
      a.more href='#' Phasellus tellus augue

Phasellus tellus augue, maximus a viverra tincidunt

Phasellus luctus elementum Aenean sit

maximus a viverra 0-000-000-0000

Vivamus dictum justo a venenatis pulvinar
et netus
.mod-hero.light.with-cover.layout-banner
  header
    h1 Phasellus tellus augue, maximus a viverra tincidunt
    .typography-5
      | Phasellus luctus elementum
      a< href='#' Aenean sit
    form
      .mod-two-fields
        .field
          label for='select1' Coverage
          .selectbox
            select id='select1'
              option 10,000
              option 10,000
              option 10,000
              option 10,000
        .field
          label for='select2' Term
          .selectbox
            select id='select2'
              option a venenatis pulvinar
              option augue vitae dapibus
              option non tortor id
              option efficitur commodo
      .layout-form-inputs
        div
          button.button.action Maecenas ullamcorper
          p
            | maximus a viverra
            a< href='#' 0-000-000-0000
        div
          .mod-trustpilot.short
            aside
              .powered-by
                .trustpilot-logo
              .stars.mini.excellent
                .star.filled
                .star.filled
                .star.filled
                .star.filled
                .star.filled
              strong.typography-7
                a.more href='#' Nulla maximus congue
  aside
    img src='holder.js/500x578?auto=yes'
.mod-brands
  h5 Vivamus dictum justo a venenatis pulvinar
  .content
    img src='holder.js/120x50?auto=yes'
    img src='holder.js/140x40?auto=yes'
    img src='holder.js/120x50?auto=yes'
    img src='holder.js/140x40?auto=yes'
    img src='holder.js/120x50?auto=yes'
    span et netus

Phasellus tellus augue, maximus a viverra tincidunt

Phasellus luctus elementum Aenean sit

maximus a viverra 0-000-000-0000

Etiam malesuada quis augue vitae dapibus. Sed non tortor id neque posuere luctus ac vel sapien. Nullam metus velit, efficitur commodo elementum vitae, porttitor id tortor. Fusce sagittis nec nulla sit amet varius.

.mod-hero.light.with-cover.layout-banner.layout-single-header
  h1 Phasellus tellus augue, maximus a viverra tincidunt
  header
    .typography-5.text-center
      | Phasellus luctus elementum
      a< href='#' Aenean sit
    form
      .mod-two-fields
        .field
          label for='select1' Coverage
          .selectbox
            select id='select1'
              option 10,000
              option 10,000
              option 10,000
              option 10,000
        .field
          label for='select2' Term
          .selectbox
            select id='select2'
              a venenatis pulvinar
              augue vitae dapibus
              non tortor id
              efficitur commodo
      .layout-form-inputs
        button.button.action Maecenas ullamcorper
        p
          | maximus a viverra
          a< href='#' 0-000-000-0000
    .spacer-m
.layout-trustpilot
  .mod-trustpilot.horizontal.with-big-feature-image
    aside
      .powered-by
        .trustpilot-logo
      .stars.mini.excellent
        .star.filled
        .star.filled
        .star.filled
        .star.filled
        .star.filled
      a.more href='#' Phasellus tellus augue
    .review
      p Etiam malesuada quis augue vitae dapibus. Sed non tortor id neque posuere luctus ac vel sapien. Nullam metus velit, efficitur commodo elementum vitae, porttitor id tortor. Fusce sagittis nec nulla sit amet varius.
    img.bottom-cover src='holder.js/500x540?auto=yes'

Phasellus tellus augue, maximus a viverra tincidunt

Phasellus luctus elementum Aenean sit

maximus a viverra
0-000-000-0000

In rhoncus orci et ex fermentum, ut euismod
et netus
.mod-hero.light.with-cover.layout-banner.layout-single-header
  h1 Phasellus tellus augue, maximus a viverra tincidunt
  header
    .typography-5.text-center
      | Phasellus luctus elementum
      a< href='#' Aenean sit
    form
      .mod-two-fields
        .field
          label for='select1' Coverage
          .selectbox
            select id='select1'
              option 10,000
              option 10,000
              option 10,000
              option 10,000
        .field
          label for='select2' Term
          .selectbox
            select id='select2'
              option a venenatis pulvinar
              option augue vitae dapibus
              option non tortor id
              option efficitur commodo
      .layout-form-inputs
        button.button.action Maecenas ullamcorper
        p.spacer-zero
          | maximus a viverra
          br
          a href='#' 0-000-000-0000
    .spacer-m
.mod-brands.with-big-feature-image
  h5 In rhoncus orci et ex fermentum, ut euismod
  .content
    img src='holder.js/120x50?auto=yes'
    img src='holder.js/140x40?auto=yes'
    img src='holder.js/120x50?auto=yes'
    img src='holder.js/140x40?auto=yes'
    img src='holder.js/120x50?auto=yes'
    span et netus
  img src='holder.js/500x600?auto=yes'