PolicyGenius - Style Guide

Modal

Simple Modal

Etiam malesuada

Donec id urna

  • Tortor
  • Vulputate
  • Dictum

In rhoncus orci

Non

Nunc in pharetra velit

Pellentesque

fermentum@diam.eget

000 000-0000

Vivamus ultricies augue in
Morbi sit amet
#00000000
.mod-modal
  .dialog
    .header
      .close
      h3 Etiam malesuada
    .body
      h4 Donec id urna
      ul.bullets
        li Tortor
        li Vulputate
        li Dictum
      h4 In rhoncus orci
      p.i-help Non
      h4 Nunc in pharetra velit
      p.i-chat Pellentesque
      p.i-mail fermentum@diam.eget
      p.i-phone 000 000-0000
      .working-time Vivamus ultricies augue in

      .mod-simple-card
        | Morbi sit amet
        br
        | #00000000

Simple Modal with reveal modal

Mauris ex mauris

Etiam malesuada

Donec id urna

  • Dapibus
  • Luctus
  • Lobortis

Quis augue vitae

Sit

Maecenas ullamcorper turpis

Fermentum placerat

fermentum@diam.eget

000 000-0000

Vivamus ultricies augue in
a href='#' data-reveal-id='some-modal'
  | Mauris ex mauris
#some-modal.mod-modal.reveal-modal
  .dialog
    .header
      .close
      h3 Etiam malesuada
    .body
      h4 Donec id urna
      ul.bullets
        li Dapibus
        li Luctus
        li Lobortis
      h4 Quis augue vitae
      p.i-help Sit
      h4 Maecenas ullamcorper turpis
      p.i-chat Fermentum placerat
      p.i-mail fermentum@diam.eget
      p.i-phone 000 000-0000
      .working-time Vivamus ultricies augue in

Tabbed Modal

Proin

.mod-modal
  .dialog
    .header
      .close
      h3 Proin
    ul.tabs
      li: a.i-phone href='#expert-help' Etiam malesuada
      li.active: a.i-user href='#account' Phasellus
    .body#expert-help
    .body.active#account
      .mod-nav-panel
        ul
          li: h5 Maecenas ullamcorper
          li: a.i-dashboard href='#' Mauris
          li: a.i-mail href='#' Tristique
          li: a.i-write href='#' Sapien maximus
          li: h5 Sollicitudin pulvinar
          li: a.i-user href='#' Justo
          li: a.i-adduser href='#' Maecenas rhoncus
          li: h5 Vivamus
          li: a.i-logout href='#' Massa iaculis

Wide Modal

Fusce sagittis nec

Phasellus nec iaculis velit
.mod-modal.wide
  .dialog
    .header
      .close
      h3 Fusce sagittis nec
    .body
      .layout-start-quote
        .layout-choice
          img src='holder.js/600x600?auto=yes&text="modal-choice"'
        .layout-banners
          img class='hide-for-small' src='holder.js/600x600?auto=yes&text="modal-banners"'
          span Phasellus nec iaculis velit

Comparison Page Modal

Donec mattis nec metus sit

Donec nunc nulla, posuere

Ultricies imperdiet

fermentum@diam.eget

000 000-0000Vivamus ultricies augue in

.mod-modal.comparison-modal
  .dialog
    .header
      .close
      h3 Donec mattis nec metus sit
    .body
      .form
        .textfield
          .field
            label for='email' Aenean sit amet
            input type='email' id='email' placeholder='ullamcorper@elit.sed'
        button.button.action Maecenas rhoncus pulvinar
      .contact-info
        h4 Donec nunc nulla, posuere
        p.i-chat Ultricies imperdiet
        p.i-mail fermentum@diam.eget
        p.i-phone
          | 000 000-0000
          span.working-time Vivamus ultricies augue in

Mini

Etiam malesuada

Phasellus luctus elementum
.mod-modal.mini
  .dialog
    .header
      .close
      h3 Etiam malesuada
    .body
      .layout-start-quote
        .layout-choice
          img src='holder.js/600x600?auto=yes&text="modal-choice"'
        .layout-banners
          img class='hide-for-small' src='holder.js/600x600?auto=yes&text="modal-banners"'
          span Phasellus luctus elementum
// sticky comparison rough example
var fadeParent = $('.js-fade-comparison-info-parent'),
    fadeTarget = $('.js-fade-comparison-info-target'),
    windowTop,
    fadeTargetTop

if (fadeParent.length) {
  $(window).on('scroll', function () {
    windowTop = $(this).scrollTop();
    fadeTargetTop = fadeTarget.offset().top;
    if (windowTop > fadeTargetTop) {
      fadeTarget.addClass('active')
    } else {
      fadeTarget.removeClass('active')
    }
  })
}