PolicyGenius - Style Guide

Card

Simple Card

$10 - $10 lectus

Phasellus

$100,000

Quam

Aliquam nisl

Suspendisse sed sem sagittis
 
.mod-card
  .header
    h2.value <sup>$</sup>10 - <sup>$</sup>10 <small>lectus</small>
  .content
    .multiple
      .feature
        h4 Phasellus
        p $100,000
      .feature
        h4 Quam
        p Aliquam nisl
    a.button.action href='#' Suspendisse sed sem sagittis

Card with no action

$10 - $10 pretium

Tincidunt

$100,000

Vivamus

Leo fringilla

 
.mod-card.no-action
  .header
    h2.value <sup>$</sup>10 - <sup>$</sup>10 <small>pretium</small>
  .content
    .multiple
      .feature
        h4 Tincidunt
        p $100,000
      .feature
        h4 Vivamus
        p Leo fringilla

Card with simple plain text header

Suspendisse molestie vel sapien at posuere

Suspendisse

$100,000

Aliquam

Vivamus

 
.mod-card.no-action
  .header
    h3 Suspendisse molestie vel sapien at posuere
  .content
    .feature
      img src='holder.js/240x60?auto=yes'
    .multiple
      .feature
        h4 Suspendisse
        p $100,000
      .feature
        h4 Aliquam
        p Vivamus

Card with Logo

$100.00 maximus

Consequat

$100,000

Turpis

Imperdiet

Viverra tincidunt

Vivamus dictum justo a venenatis

 
.mod-card
  .header
    h2.value <sup>$</sup>100<sup>.00</sup> <small>maximus</small>
  .content
    .feature
      img src='holder.js/240x60?auto=yes'
    .multiple
      .feature
        h4 Consequat
        p $100,000
      .feature
        h4 Turpis
        p Imperdiet
    .feature
      h4 Viverra tincidunt
      p Vivamus dictum justo a venenatis

Another Card option

Suspendisse molestie vel sapien

Nulla maximus congue

$10 - $10 vulputate

Pharetra

$100,000

Pretium

Imperdiet

Phasellus tellus
 
.mod-card
  .header.tall
    h2 Suspendisse molestie vel sapien
  .content
    .feature
      h4 Nulla maximus congue
      p.value
        strong $10 - $10 <small>vulputate</small>
    .multiple
      .feature
        h4 Pharetra
        p $100,000
      .feature
        h4 Pretium
        p Imperdiet
    a.button.action href='#' Phasellus tellus

Card with columns in header

$100 maximus

Vivamus dictum
justovenenatis

Phasellus

$100,000

Luctus

Bibendum

Phasellus luctus

00000000000

Etiam malesuada

Nullam metus velit, efficitur commodo

 
.mod-card.highlighted
  .header
    .multiple
      .section
        h2.value <sup>$</sup>100 <small>maximus</small>
      .section.purchased
        p Vivamus dictum<br>justo<strong>venenatis</strong>
  .content
    .feature
      img src='holder.js/240x60?auto=yes'
    .multiple
      .feature
        h4 Phasellus
        p $100,000
      .feature
        h4 Luctus
        p Bibendum
    .feature
      h4 Phasellus luctus
      p 00000000000
    .feature
      h4 Etiam malesuada
      p Nullam metus velit, efficitur commodo

Minimalistic Card

Life Fusce euismod

Suspendisse molestie vel sapien
Vivamus ultricies augue
 
.mod-card.highlighted
  .header
    h2 Life Fusce euismod
  .content
    .feature.emphasized Suspendisse molestie vel sapien
    a.button.action href='#' Vivamus ultricies augue

Card with Details link in header

$100 viverra

+SUSCIPIT
Phasellus tellus augue

Maecenas

A+ Vivamus dictum

A+ Proin et ultrices neque

Fusce id egestas

Elementum

$100,000

Nisi

Phasellus

Convallis

Fusce id egestas metus

Bibendum

Etiam malesuada

Nullam metus
 
.mod-card
  .header
    .multiple
      .section
        h2.value <sup>$</sup>100 <small>viverra</small>
      .section.details
        a href='#'
          span.plus +
          span SUSCIPIT
  .content.compact
    .feature
      img src='holder.js/240x60?auto=yes'
      a.soft href='#' Phasellus tellus augue
    .feature.ratings
      h4 Maecenas
      p <strong>A+</strong> Vivamus dictum
      p <strong>A+</strong> Proin et ultrices neque
      a.soft href='#' Fusce id egestas
    .more-content
      .multiple
        .feature
          h4 Elementum
          p $100,000
        .feature
          h4 Nisi
          p Phasellus
      .feature
        h4 Convallis
        p Fusce id egestas metus
      .feature
        h4 Bibendum
        p Etiam malesuada
    a.button.action.lowlight href='#' Nullam metus

Highlighted Card with Details link in header

$100 sagittis

+IACULIS
Aenean ac bibendum

Placerat

A+ Habitasse

A+ Vel volutpat turpis

Aenean in lacus
Suspendisse erat
 
.mod-card.highlighted
  .header
    .multiple
      .section
        h2.value <sup>$</sup>100 <small>sagittis</small>
      .section.details
        a href='#'
          span.plus +
          span IACULIS
  .content.compact
    .feature
      img src='holder.js/240x60?auto=yes'
      a.soft href='#' Aenean ac bibendum
    .feature.
      h4 Placerat
      p <strong>A+</strong> Habitasse
      p <strong>A+</strong> Vel volutpat turpis
      a.soft href='#' Aenean in lacus
    a.button.action href='#' Suspendisse erat

Card with Double Header

In rhoncus orci

Vivamus eu aliquet sapien, non

Pellentesque

$10 tincidunt

Vivamus ultricies augue
 
.mod-card
  .header.double
    h2 In rhoncus orci
    p Vivamus eu aliquet sapien, non
  .content
    .feature
      h4 Pellentesque
      p.value
        strong $10 <small>tincidunt</small>
    a.button.action href='#' Vivamus ultricies augue

Card with Double Line Header

Most Popular

Phasellus nisi est

Sed lobortis et quam at rhoncus

Ultrices

$10 posuere

Mauris tristique efficitur
 
.mod-card
  .caption Most Popular
  .header.double
    h2 Phasellus nisi est
    p Sed lobortis et quam at rhoncus
  .content
    .feature
      h4 Ultrices
      p.value
        strong $10 <small>posuere</small>
    a.button.action href='#' Mauris tristique efficitur

Card with Carrier Logo

$10 posuere

Phasellus tellus augue

Vivamus dictum justo a venenatis pulvinar

Phasellus luctus elementum

$10 - $10 posuere

 
.mod-card.navigator
  .header
    h2.value <sup>$</sup>10 <small>posuere</small>
  .content
    .feature.emphasized
      img src='holder.js/200x60?auto=yes'
    .feature
      h4 Phasellus tellus augue
      p.narrow Vivamus dictum justo a venenatis pulvinar
    .feature.price
      h4 Phasellus luctus elementum
      p.value
        strong $10 - $10 <small>posuere</small>
    img.figure src='holder.js/256x203?auto=yes'

With Image

Maecenas ullamcorper turpis

Maecenas

$100,000

Fusce

Sollicitudin

Consectetur
 
.mod-card.drawing
  .header.tall
    h2 Maecenas ullamcorper turpis
  .content
    img src='images/Jumping_Woman.png'
    .multiple
      .feature
        h4 Maecenas
        p $100,000
      .feature
        h4 Fusce
        p Sollicitudin
    a.button.action href='#' Consectetur

Card with Progress Indicator

$10–$10posuere

Suspendisse id felis

Nunc mattis diam libero, vitae dapibus ex

 
.mod-card
  .header
    h2.value
      sup $
      | 10&ndash;
      sup $
      | 10
      small
        | posuere
  .progress style='width: 65%;'
  .content
    .feature
      h4 Suspendisse id felis
      p.narrow Nunc mattis diam libero, vitae dapibus ex
    img.figure src='holder.js/256x203?auto=yes'

Quote Summary Card

Mauris ex mauris

2016 Nam et consequat urna

ipsumpurus

Suspendisse id felis

ipsumpurus
 
.mod-card.quote-summary
  .header
    h2 Mauris ex mauris
  .content
    .feature
      p 2016 Nam et consequat urna
      .actions
        a href='#' ipsum
        a href='#' purus
    .feature
      p Suspendisse id felis
      .actions
        a href='#' ipsum
        a href='#' purus

Discount Card

10Curabitur efficitur

Viverra
Nulla facilisi
LEO
Pellentesque
Quisque eget ullamcorper
 
.mod-card.discount
  .header
    h2
      | 10
      small Curabitur efficitur
  .content
    .feature
      img src='holder.js/60x25?auto=yes'
      | Viverra
    .feature
      img src='holder.js/60x25?auto=yes'
      | Nulla facilisi
    .feature
      img src='holder.js/60x25?auto=yes'
      | LEO
    .feature
      img src='holder.js/60x25?auto=yes'
      | Pellentesque
    .feature
      a href='#' Quisque eget ullamcorper

Rating Card

Fusce
 
.mod-card.rating
  .com-rating.compact.align-left
    .heading Fusce
    .stars
      .i-star.active
      .i-star.active
      .i-star.active
      .i-star
      .i-star

Marketing Card

Convallis

Quisque eget ullamcorper

Pellentesque ornare

Cras egestas neque non massa porta, molestie ornare ipsum luctus. Quisque eget ullamcorper eros neque et vulputate tristique, velit urna euismod nunc, eget interdum urna leo vel lacus

Malesuada fames
 
.mod-card.marketing-card
  .header
    h2 Convallis
    i.icon-comments
  .content
    .feature
      h3 Quisque eget ullamcorper
      h4 Pellentesque ornare
      p.desc
       | Cras egestas neque non massa porta, molestie ornare ipsum luctus. Quisque eget ullamcorper eros
       | &nbsp;
       | neque et vulputate tristique, velit urna euismod nunc, eget interdum urna leo vel lacus
    a.button.action href='#' Malesuada fames

Colored bar card

Nam metus massa

Phasellus nisi est, posuere ut elit id, lobortis molestie est  ante ipsum primis in faucibus orci luctus et ultrices
Posuere cubilia

Placerat pretium
 $ /eget

 
.mod-card.colorbar
  .header
    h2 Nam metus massa
  .content
    h5
     | Phasellus nisi est, posuere ut elit id, lobortis molestie est
     | &nbsp; ante ipsum primis in faucibus orci luctus et ultrices
    .footer
      a.button.action href='#' Posuere cubilia
      p
          | Placerat pretium
          br
          | &nbsp;$
          span.like-h4 10
          | &nbsp;/eget

Color Shadow Card

Etiam nec pretium vestibulum libero

Pellentesque ornare malesuada blandit. Cras egestas neque non massa porta, molestie ornare ipsum luctus.

Quisque eget ullamcorper
 
div style='background-color: #f6f6f6; padding: 48px;'
  .mod-card.color-shadow
    h3
      ' Etiam nec
      span pretium vestibulum libero
    p Pellentesque ornare malesuada blandit. Cras egestas neque non massa porta, molestie ornare ipsum luctus.
    a href='#!' Quisque eget ullamcorper
css:
  .mod-card.color-shadow {
    max-width: 290px;
  }

Color Shadow Card Green

Pellentesque ornare malesuada

Cras egestas neque non massa porta, molestie ornare ipsum luctus. Quisque eget ullamcorper eros.

Pellentesque habitant
 
div style='background-color: #f6f6f6; padding: 48px;'
  .mod-card.color-shadow.green
    h3
      ' Pellentesque
      span ornare malesuada
    p Cras egestas neque non massa porta, molestie ornare ipsum luctus. Quisque eget ullamcorper eros.
    a href='#!' Pellentesque habitant
 
css:
  .mod-card.color-shadow {
    max-width: 290px;
  }

Color Shadow Card Blue

Aenean ac bibendum condimentum id felis

Donec placerat ipsum a nulla maximus tincidunt. Vestibulum dignissim ac erat ac placerat.

In hac habitasse platea
 
div style='background-color: #f6f6f6; padding: 48px;'
  .mod-card.color-shadow.blue
    h3
      ' Aenean ac bibendum
      span condimentum id felis
    p Donec placerat ipsum a nulla maximus tincidunt. Vestibulum dignissim ac erat ac placerat.
    a href='#!' In hac habitasse platea
 
css:
  .mod-card.color-shadow {
    max-width: 290px;
  }

Gradient Card

Proin aliquam tortor et

Aliquam sapien enim, elementum at massa sit amet

In rhoncus orci
 
.mod-card.gradient
  img src='images/rightpolicy.svg' width='60'
  h5 Proin aliquam tortor et
  p Aliquam sapien enim, elementum at massa sit amet
  a.button.mini.outline In rhoncus orci