PolicyGenius - Style Guide

Plan Details Card

$10
$10/id
FermentumIn rhoncus orci et ex

Suspendisse molestie

Aliquam

$100ut euismod

Ultricies

10%consequat aliquet

Proin aliquam

A-

Pellentesque

1.0/10

Donec imperdiet leo id odio

Eget blandit nisi fermentum

$10/ex

Vivamus ultricies augue in tortor pharetra convallis. Maecenas gravida ex a sed vulputate, sodales cursus risus blandit.
Suspendisse molestie vel

Proin pharetra Donec dui est, aliquet

Aliquam nisl nibh

Phasellus tellus augue, maximus a viverra tincidunt, vestibulum at lorem. Curabitur et magna erat. Vivamus dictum justo a venenatis pulvinar. Fusce ullamcorper rhoncus nunc, ut convallis leo fringilla a. 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 vel ex. Sed et lacinia ante.– Etiam malesuada

Sed non tortor id neque

Nullam metus velit

$1,000

Efficitur commodo

Porttitor id tortor

Fusce sagittis nec

Phasellus nec iaculis

Donec mattis nec metus sit

$1,000 amet aliquam

$1,000 sit amet pretium

Maecenas ullamcorper turpis

$1,000

Porttitor sed risus

Feugiat sollicitudin augue

Maecenas ullamcorper

$1,000 Etiam malesuada quis augue vitae dapibus

$1,000 on tortor id neque posuere luctus ac vel malesuada quis augue

Maecenas ullamcorper turpis quis elit volutpat, fermentum placerat arcu commodo. Mauris ex mauris, porttitor sed risus at, feugiat sollicitudin augue. Nam et consequat urna.

Fusce quis elit at turpis

$1,000 convallis pretium

Quisque ac quam tristique

Euismod
Vivamus consectetur
Quisque ac quam tristique
Donec semper ligula
Quisque ac quam
Vivamus consectetur
Suspendisse
Aliquam nisl nibh
Morbi quis dui
Sollicitudin
Etiam malesuada quis
Efficitur
Phasellus
Aenean sit amet pretium
Turpis convallis pretium
Consectetur
Suspendisse et nisi
Suspendisse vel
Vivamus faucibus lacus
Suspendisse id felis nulla

Maecenas ullamcorper

Morbi quis dui consequat, consectetur

Fusce ullamcorper rhoncus nunc, ut convallis leo fringilla a. Proin et ultrices neque. Morbi sit amet dapibus dui. Fusce id egestas metus, consectetur sagittis lacus. Phasellus luctus elementum iaculis.

Etiam malesuada quis augue vitae dapibus

Sed non tortor id neque posuere

Nullam metus velit

Phasellus nec iaculis velit, quis vulputate magna.

Maecenas ullamcorper turpis quis

Porttitor sed risus at, feugiat sollicitudin

Quisque ac quam

Consectetur risus et sapien maximus

Maecenas rhoncus pulvinar

Mauris pharetra augue ac arcu dapibus aliquam. Nunc mattis diam libero vitae dapibus

Etiam malesuada quis augue vitae dapibus. Sed non tortor id neque posuere luctus ac vel sapien.

Etiam porta facilisis viverra. Donec placerat ipsum a nulla maximus tincidunt. Vestibulum dignissim ac erat ac placerat. In hac habitasse platea dictumst. Integer suscipit orci odio, vel volutpat turpis ultrices at. Proin non accumsan dui. Ut pulvinar leo non iaculis condimentum.

.mod-plan-details-card
  .header
    .logo
      img src='holder.js/180x60?auto=yes'
      h5 In rhoncus orci
    .old-price
      sup $
      | 10
    .price
      sup $
      | 10
      small
        | /id
    .actions
      a.button.action href='#' Fermentum
      span In rhoncus orci et ex

  .basics-ratings
    h3 Suspendisse molestie
    .content
      .section
        h4
          | Aliquam
          span.i-help
        .price
          sup $
          | 100
          small ut euismod
      .section
        h4
          | Ultricies
          span.i-help
        .price
          | 10
          sup %
          small consequat aliquet
      .section
        h4
          | Proin aliquam
          span.i-help
        .rating A-
      .section
        h4
          | Pellentesque
          span.i-help
        .rating 1.0/10

  .wellness
    h3 Donec imperdiet leo id odio
    .content
      .price
        h4 Eget blandit nisi fermentum
        .value
          sup $
          | 10
          small
            | /ex
      .section
        p
         | Vivamus ultricies augue in tortor pharetra convallis. Maecenas gravida ex a sed vulputate, sodales cursus risus blandit.
         br
         a.action href='#' Suspendisse molestie vel

  .testimonials
    h3
      | Proin pharetra
      span  Donec dui est, aliquet
    .content
      .prev.i-directleft
      .next.i-directright
      .hint Aliquam nisl nibh
      .container
        .testimonial
          p
            | Phasellus tellus augue, maximus a viverra tincidunt, vestibulum at lorem. Curabitur et magna erat. Vivamus dictum justo a venenatis pulvinar. Fusce ullamcorper rhoncus nunc, ut convallis leo fringilla a. 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 vel ex. Sed et lacinia ante.
            span.author – Etiam malesuada

  .limits
    h3 Sed non tortor id neque
    .content
      .row
        .label
          | Nullam metus velit
          span.i-help
        .value
          p $1,000
      .row
        .label
          | Efficitur commodo
          span.i-help
        .value
          p Porttitor id tortor
      .row
        .label
          | Fusce sagittis nec
          span.i-help
        .value
          p Phasellus nec iaculis
      .row
        .label
          | Donec mattis nec metus sit
          span.i-help
        .value
          p $1,000 amet aliquam
          p $1,000 sit amet pretium
      .row
        .label
          | Maecenas ullamcorper turpis
          span.i-help
        .value
          p $1,000
      .row
        .label
          | Porttitor sed risus
          span.i-help
        .value
          p Feugiat sollicitudin augue
      .row
        .label
          | Maecenas ullamcorper
          span.i-help
        .value
          p $1,000 Etiam malesuada quis augue vitae dapibus
          p $1,000 on tortor id neque posuere luctus ac vel malesuada quis augue
          p Maecenas ullamcorper turpis quis elit volutpat, fermentum placerat arcu commodo. Mauris ex mauris, porttitor sed risus at, feugiat sollicitudin augue. Nam et consequat urna.
      .row
        .label
          | Fusce quis elit at turpis
          span.i-help
        .value
          p $1,000 convallis pretium

  .features
    h3 Quisque ac quam tristique
    .content
      .item
        .label
          | Euismod
          span.i-help
        .value Vivamus consectetur
      .item
        .label
          | Quisque ac quam tristique
          span.i-help
        .value.i-check
      .item
        .label
          | Donec semper ligula
          span.i-help
        .value.i-check
      .item
        .label
          | Quisque ac quam
          span.i-help
        .value.i-check
      .item
        .label
          | Vivamus consectetur
          span.i-help
        .value.i-check
      .item
        .label
          | Suspendisse
          span.i-help
        .value.i-check
      .item
        .label
          | Aliquam nisl nibh
          span.i-help
        .value.i-check
      .item
        .label
          | Morbi quis dui
          span.i-help
        .value.i-check
      .item
        .label
          | Sollicitudin
          span.i-help
        .value.i-check
      .item
        .label
          | Etiam malesuada quis
          span.i-help
        .value.i-check
      .item
        .label
          | Efficitur
          span.i-help
        .value.i-check
      .item
        .label
          | Phasellus
          span.i-help
        .value.i-check
      .item
        .label
          | Aenean sit amet pretium
          span.i-help
        .value.i-check
      .item
        .label
          | Turpis convallis pretium
          span.i-help
        .value.i-delete
      .item
        .label
          | Consectetur
          span.i-help
        .value.i-delete
      .item
        .label
          | Suspendisse et nisi
          span.i-help
        .value Suspendisse vel
      .item
        .label
          | Vivamus faucibus lacus
          span.i-help
        .value.i-check
      .item
        .label
          | Suspendisse id felis nulla
          span.i-help
        .value.i-check

  .exclusions
    h3 Maecenas ullamcorper
    .content
      .row
        .label Morbi quis dui consequat, consectetur
        .value
          p Fusce ullamcorper rhoncus nunc, ut convallis leo fringilla a. Proin et ultrices neque. Morbi sit amet dapibus dui. Fusce id egestas metus, consectetur sagittis lacus. Phasellus luctus elementum iaculis.
          p Etiam malesuada quis augue vitae dapibus
          p Sed non tortor id neque posuere
          p Nullam metus velit
      .row
        .label Phasellus nec iaculis velit, quis vulputate magna.
        .value
          p Maecenas ullamcorper turpis quis
          p Porttitor sed risus at, feugiat sollicitudin
          p Quisque ac quam
          p Consectetur risus et sapien maximus
          p Maecenas rhoncus pulvinar
      .row
        .label Mauris pharetra augue ac arcu dapibus aliquam. Nunc mattis diam libero vitae dapibus
        .value
          p Etiam malesuada quis augue vitae dapibus. Sed non tortor id neque posuere luctus ac vel sapien.
          p Etiam porta facilisis viverra. Donec placerat ipsum a nulla maximus tincidunt. Vestibulum dignissim ac erat ac placerat. In hac habitasse platea dictumst. Integer suscipit orci odio, vel volutpat turpis ultrices at. Proin non accumsan dui. Ut pulvinar leo non iaculis condimentum.

  .footer
    .offer
      | Ut scelerisque nulla at sem suscipit
      .price
        sup $
        | 10
        small
          | /sed.
    a.button.action href='#' Nunc mattis
Phasellus tellus augue
$10/sem
Aenean gravida
Phasellus tellus augue, maximus a viverra
LeoConsecteturUrna
.mod-plan-details-sticky-header
  .plan
    span.hidden-for-small-only Phasellus tellus augue
    .price
      sup $
      | 10
      small
        | /sem
  .saving.visible-for-medium-only Aenean gravida
  .saving.visible-for-large-up Phasellus tellus augue, maximus a viverra
  a.button.action href='#'
    | Leo
    span.visible-for-small-only Consectetur
    | Urna