PolicyGenius - Style Guide

Vertical Card

Maecenas ullamcorper turpis

Etiam malesuada
Nunc mattisPhasellus sapien
Etiam malesuada
Suspendisse id felis nulla. Nulla facilisi. Mauris pharetra augue ac arcu dapibus aliquam. Nunc mattis diam libero, vitae dapibus ex dictum in. Nullam tempor scelerisque enim, ut dapibus tellus finibus quis.
Integer pharetra
$100 /ornare
  • Dapibus $100
Phasellus sapien
Nulla
$1,000 felis
  • Aenean $1,000
Pellentesque eu tincidunt
$1,000 luctus
Donec venenatis
  • Lorem Ipsum dolor amet Prozac
    $10 tristique
Nam metus massa
  • Nunc ornare ornare nunc, nec efficitur
  • Sed lobortis
Mauris tristique
  • Etiam malesuada
    $10
  • Phasellus tellus augue
    $10
  • Etiam malesuada quis
    $100
  • Quisque ac quam
    $10
Mauris pharetra augue
$1,000 luctus
Fusce vitae turpis

EGET

  • Suspendisse molestie vel sapien
In rhoncus orci et ex
10K
Pellentesque habitant morbi
10K
Tristique
10
Donec imperdiet leo id
10
Ultricies augue in tortor

Phasellus viverra

 
.mod-vertical-card
  .mod-vertical-card-header
    h2.mod-vertical-card-title: span Maecenas ullamcorper turpis
    .mod-vertical-card-details
      .mod-vertical-card-stars.lineup
        .i-star.active
        .i-star.active
        .i-star.active
        .i-star
        .i-star
        .i-help
      .mod-vertical-card-tier
        strong
          | Etiam malesuada
          i.i-help
    .mod-vertical-card-actions
      a.button.action.full-width.mini href='#' Nunc mattis
      a.button.outline.full-width.mini href='#' Phasellus sapien
  .mod-vertical-card-content
    .mod-vertical-card-section
      .mod-vertical-card-caption
        | Etiam malesuada
      strong Suspendisse id felis nulla. Nulla facilisi. Mauris pharetra augue ac arcu dapibus aliquam. Nunc mattis diam libero, vitae dapibus ex dictum in. Nullam tempor scelerisque enim, ut dapibus tellus finibus quis.
  .mod-vertical-card-content
    .mod-vertical-card-section
      .mod-vertical-card-caption
        | Integer pharetra
        i.i-help
      .mod-vertical-card-price
        .sign-vertical
          .icon-discount-white
        span.mod-vertical-card-price-value $100
        small.mod-vertical-card-price-period
          '  /ornare
      ul.mod-icon-list.condensed
        li.icon-checkmark Dapibus $100
  .mod-vertical-card-content
    .mod-vertical-card-section
      .mod-vertical-card-caption
        | Phasellus sapien
        i.i-help
      .mod-vertical-card-price
        .sign-vertical Nulla
        strong.mod-vertical-card-price-value.small $1,000
        span.mod-vertical-card-price-period.small
          '  felis
      ul.mod-icon-list.condensed
        li.icon-checkmark Aenean $1,000
  .mod-vertical-card-content
    .mod-vertical-card-section
      .mod-vertical-card-caption
        | Pellentesque eu tincidunt
        i.i-help
      .mod-vertical-card-price
        strong.mod-vertical-card-price-value.small $1,000
        span.mod-vertical-card-price-period.small
          '  luctus
  .mod-vertical-card-content
    .mod-vertical-card-section
      .mod-vertical-card-caption
        | Donec venenatis
        i.i-help
      ul.mod-icon-list.condensed
        li.icon-checkmark
          .list-truncation
            span.truncate Lorem Ipsum dolor amet Prozac
          .nowrap
            strong  $10
            span
              '  tristique
  .mod-vertical-card-content
    .mod-vertical-card-section
      .mod-vertical-card-caption
        | Nam metus massa
        i.i-help
      ul.mod-icon-list.condensed
        li.icon-checkmark
          .text-truncation
            .truncate Nunc ornare ornare nunc, nec efficitur
        li.icon-checkmark
          .text-truncation
            .truncate Sed lobortis
  .mod-vertical-card-content
    .mod-vertical-card-section
      .mod-vertical-card-caption
        | Mauris tristique
        i.i-help
      ul.mod-simple-list.condensed.no-bullet
        li
          .list-truncation
            span.truncate Etiam malesuada
          span.mod-vertical-card-action $10
        li
          .list-truncation
            span.truncate Phasellus tellus augue
          span.mod-vertical-card-action $10
        li
          .list-truncation
            span.truncate Etiam malesuada quis
          span.mod-vertical-card-action $100
        li
          .list-truncation
            span.truncate  Quisque ac quam
          span.mod-vertical-card-action $10
  .mod-vertical-card-content
    .mod-vertical-card-section
      .mod-vertical-card-caption
        | Mauris pharetra augue
        i.i-help
      .mod-vertical-card-price
        span.mod-vertical-card-price-value $1,000
        small.mod-vertical-card-price-period
          '  luctus
  .mod-vertical-card-content
    .mod-vertical-card-section
      .mod-vertical-card-caption
        | Fusce vitae turpis
        i.i-help
      h2.mod-vertical-card-title EGET
      ul.mod-icon-list.condensed
        li.icon-checkmark Suspendisse molestie vel sapien
  .mod-vertical-card-content
    .mod-vertical-card-section
      .mod-vertical-card-caption
        | In rhoncus orci et ex
        i.i-help
      .mod-vertical-card-dl
        .mod-vertical-card-dl-row
          .mod-vertical-card-dt 10K
          .mod-vertical-card-dd Pellentesque habitant morbi
        .mod-vertical-card-dl-row
          .mod-vertical-card-dt 10K
          .mod-vertical-card-dd Tristique
        .mod-vertical-card-dl-row
          .mod-vertical-card-dt 10
          .mod-vertical-card-dd Donec imperdiet leo id
        .mod-vertical-card-dl-row
          .mod-vertical-card-dt 10
          .mod-vertical-card-dd Ultricies augue in tortor
  .mod-vertical-card-content
    .mod-vertical-card-section
      h2.mod-vertical-card-title Phasellus viverra
      .mod-card-form.filter
        label.teal
          .checkbox.flip
            input type='checkbox'
            span.truncate Suspendisse sed sem sagittis
          p Nam consequat maximus turpis

Enrollment variation

Phasellus tellus augue, maximus a viverra

Proin et ultrices
Morbi sit amet dapibus
$100 /viverra
  • Vivamus $100
Vestibulum
$1,000 /ultrices
  • Vivamus $1,000
Etiam malesuada
Nullam metus velit, efficitur commodo elementum vitae, porttitor id tortor
 
.mod-vertical-card
  .mod-vertical-card-header
    h2.mod-vertical-card-title Phasellus tellus augue, maximus a viverra
    .mod-vertical-card-details
      .mod-vertical-card-stars.big
        .i-star.active
        .i-star.active
        .i-star.active
        .i-star
        .i-star
        .i-help
      .mod-vertical-card-tier.big
          strong
            | Proin et ultrices
            i.i-help
  .mod-vertical-card-content
    .mod-vertical-card-section
      .mod-vertical-card-caption
        | Morbi sit amet dapibus
        i
      .mod-vertical-card-price
        span.mod-vertical-card-price-value $100
        small.mod-vertical-card-period
          '  /viverra
      ul.mod-icon-list.condensed
        li.icon-checkmark Vivamus $100
  .mod-vertical-card-content
    .mod-vertical-card-section
      .mod-vertical-card-caption
        | Vestibulum
        i.i-help
      .mod-vertical-card-price
        strong.mod-vertical-card-price-value.small $1,000
        span.mod-vertical-card-price-period.small
          '  /ultrices
      ul.mod-icon-list.condensed
        li.icon-checkmark Vivamus $1,000
  .mod-vertical-card-content
    .mod-vertical-card-section
      .mod-vertical-card-caption
        | Etiam malesuada
      strong Nullam metus velit, efficitur commodo elementum vitae, porttitor id tortor

Mini variation

Sed non tortor id neque posuere luctus ac vel sapien. Nullam metus velit.

AMET
Maecenas ullamcorper
$100 /quis
  • Aenean $100
Ullamcorper
$1,000
  • Quis $1,000
Proin at nunc
Nunc mattis molestie libero, sed vulputate ipsum aliquet vitae
Proin
 
.mod-vertical-card.mini
  .mod-vertical-card-header
    h2.mod-vertical-card-title Sed non tortor id neque posuere luctus ac vel sapien. Nullam metus velit.
    .mod-vertical-card-extra AMET
    .mod-vertical-card-break
      .mod-vertical-card-stars.lineup
        .i-star.active
        .i-star.active
        .i-star.active
        .i-star
        .i-star
        .i-help
  .mod-vertical-card-content
    .mod-vertical-card-section.half-width-on-mobile
      .mod-vertical-card-caption Maecenas ullamcorper
      .mod-vertical-card-shift
        .mod-vertical-card-price
          .sign
            .icon-discount-white
          span.mod-vertical-card-price-value $100
          small.mod-vertical-card-price-period
            '  /quis
        ul.mod-icon-list.condensed
          li.icon-close-accent Aenean $100
    .mod-vertical-card-section.half-width-on-mobile
      .mod-vertical-card-caption Ullamcorper
      .mod-vertical-card-shift
        .mod-vertical-card-type
          strong $1,000
        ul.mod-icon-list.condensed
          li.icon-checkmark Quis $1,000
    .mod-vertical-card-plan
      ' Proin at nunc
      br
      strong Nunc mattis molestie libero, sed vulputate ipsum aliquet vitae
  .mod-vertical-card-footer
    .mod-vertical-card-actions
      a.button.action Proin
 
css:
  .mod-vertical-card.mini {
    max-width: 320px;
  }