PolicyGenius - Style Guide

Hero Panel

Curabitur ex nibh, pharetra eget aliquam congue

Pharetra eget aliquam congue

Phasellus in laoreet quam
.mod-hero-panel style='background-image: url(images/career-board-hero-image.jpg)'
  .breadcrumb-wrapper
    img src='holder.js/100px24?text="breadcrumb container"'
  .layout-container
    .main-container
      .text-wrapper
        h1
          | Curabitur ex nibh, pharetra eget aliquam congue
        h2
          | Pharetra eget aliquam congue
      .form-wrapper
        .selectfield
            .field
              label for='select2' Coverage
              .selectbox
                select id='select2'
                  option Life insurance
                  option Renters insurance
                  option Long-term disability insurance
            .field
              label for='select3' Term
              .selectbox
                select id='select3'
                  option Life insurance
                  option Renters insurance
                  option Long-term disability insurance
      .cta
        a.button.action href='#' Phasellus in laoreet quam
        small
          a href='#' Suspendisse
          '* molestie vel sapien
    .ad-container-wrapper
      .ad-container
        .content
          header
            | Phasellus in laoreet quam
          .logo-wrapper
            .logo
              img src='holder.js/400x400?auto=yes'
            .logo
              img src='holder.js/80x100?auto=yes'
            .logo
              img src='holder.js/50x50?auto=yes'
            .logo
              img src='holder.js/400x80?auto=yes'
            .logo.wide
              img src='holder.js/400x400?auto=yes'
        figure
          img src='holder.js/400x282?auto=yes'

Affiliate

Curabitur ex nibh, pharetra eget aliquam congue

Pharetra eget aliquam congue

Nullam metus velit, efficitur commodo elementum

.mod-hero-panel style='background-image: url(images/career-board-hero-image.jpg)'
  .breadcrumb-wrapper
    img src='holder.js/100px24?text="breadcrumb container"'
  .layout-container.centered
    .main-container
      .text-wrapper
        h1
          | Curabitur ex nibh, pharetra eget aliquam congue
        h2
          | Pharetra eget aliquam congue
      .form-wrapper
        .selectfield
            .field
              label for='select2' Coverage
              .selectbox
                select id='select2'
                  option Life insurance
                  option Renters insurance
                  option Long-term disability insurance
            .field
              label for='select3' Term
              .selectbox
                select id='select3'
                  option Life insurance
                  option Renters insurance
                  option Long-term disability insurance
      .cta
        a.button.action href='#' Phasellus in laoreet quam
      .affiliate-bottom
        img src='holder.js/400x400'
        p.text
          | Nullam metus velit, efficitur commodo elementum

Curabitur ex nibh, pharetra eget aliquam congue

Pharetra eget aliquam congue

"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
.mod-hero-panel style='background-image: url(images/career-board-hero-image.jpg)'
  .breadcrumb-wrapper
    img src='holder.js/100px24?text="breadcrumb container"'
  .layout-container.affiliate
    .main-container
      .text-wrapper
        h1
          | Curabitur ex nibh, pharetra eget aliquam congue
        h2
          | Pharetra eget aliquam congue
      .form-wrapper
        .selectfield
            .field
              label for='select2' Coverage
              .selectbox
                select id='select2'
                  option Life insurance
                  option Renters insurance
                  option Long-term disability insurance
            .field
              label for='select3' Term
              .selectbox
                select id='select3'
                  option Life insurance
                  option Renters insurance
                  option Long-term disability insurance
      .cta
        a.button.action href='#' Phasellus in laoreet quam
        small
          a href='#' Suspendisse
          '* molestie vel sapien
    .ad-container-wrapper.ad-container-wrapper-affiliate
      .ad-container.full
        p.paragraph
          | "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."
        .bottom
          span.text Fusce sagittis nec
          .image-wrapper
            .image-container
              img.ad-container-logo src='holder.js/170x58?auto=yes'
    .image-wrapper.overlapping
      .image-container
        img.image-bottom src='holder.js/290x254?auto=yes'

Affiliate - no CTA

Curabitur ex nibh, pharetra eget aliquam congue

Pharetra eget aliquam congue

.mod-hero-panel.no-cta style='background-image: url(images/career-board-hero-image.jpg)'
  .breadcrumb-wrapper
    img src='holder.js/100px24?text="breadcrumb container"'
  .layout-container
    .main-container
      .text-wrapper
        h1
          | Curabitur ex nibh, pharetra eget aliquam congue
        h2
          | Pharetra eget aliquam congue