PolicyGenius - Style Guide

Calculator

Proin aliquam

In rhoncus orci

Vivamus
$1,000,000
Suspendisse molestie
$10,000
Nulla
$ ----

Vulputate ipsum

Proin pharetra felis et
$ ----
Aliquam nisl nibh, lacinia
$ ----
Morbi quis dui consequat
$ ----

The math

Nam accumsan quam
$1,000,000
Sed vulputate
$ ----

Sed vulputate

$1,000,000
div style='max-width: 480px; background: #fbfbfb; padding: 24px;'
  .mod-calculator
    .header
      img src='images/pg-calculator-logo.svg'
      i.i-help
      h3 Proin aliquam
    .content
      h4 In rhoncus orci
      .row
        .label Vivamus
        .value $1,000,000
      .row
        .label Suspendisse molestie
        .value $10,000
      .row.active
        .label Nulla
        .value $ ----
      h4 Vulputate ipsum
      .row
        .label Proin pharetra felis et
        .value $ ----
      .row
        .label Aliquam nisl nibh, lacinia
        .value $ ----
      .row
        .label Morbi quis dui consequat
        .value $ ----
      h4 The math
      .row
        .label Nam accumsan quam
        .value $1,000,000
      .row
        .label Sed vulputate
        .value $ ----
    .footer
      h3 Sed vulputate
      .value $1,000,000

Calculator with Links

In rhoncus orci

Lacinia et diam

Phasellus

  • Suspendisse sed$1,000,000
  • Mauris ex mauris$---
  • Maecenas ullamcorper$1,000,000
  • Etiam malesuada= $1,000,000
  • Fusce quisElit at
 
.mod-calculator-with-links
  h3 In rhoncus orci
  ul
    li
      span Fermentum
      span.value $1,000,000
      a href='#' SODALES
    li
      span Suspendisse molestie
      span.value $10,000
      a href='#' SODALES
    li
      span Augue
      span.value $---
      a href='#' SODALES
  h3 Lacinia et diam
  ul
    li
      span Suspendisse
      span.value $1,000,000
      a href='#' SODALES
    li
      span Nulla maximus
      span.value $10,000
      a href='#' SODALES
    li
      span Aliquam
      span.value $---
      a href='#' SODALES
  h3 Phasellus
  ul
    li
      span Suspendisse sed
      span.value $1,000,000
    li
      span Mauris ex mauris
      span.value $---
    li
      span Maecenas ullamcorper
      span.value $1,000,000
    li
      span Etiam malesuada
      span.value
        | = $1,000,000
    li
      span Fusce quis
      span.value Elit at