PolicyGenius - Style Guide

Robust Card

Maecenas ullamcorper Mauris ex mauris, porttitor sed
Nam et consequat urna
Nullam metus Fusce sagittis nec nulla sit
Aenean
$100.00/ex
Vivamus consectetur risus et
SapienMaximus
Suspendisse vel massa
Curabitur efficitur
Turpis Porttitor
MI
ID
ID
Donec nunc nulla
Hendrerit
Fermentum placerat
Fusce quis elit
CurabiturEfficitur
Nullam 100,000 placerat
.mod-robust-card style='max-width:62.5rem;'
  .mod-robust-card-header
    .mod-robust-card-header-row
      .mod-robust-card-logo
        .sign
          .icon-discount-white
          strong Etiam
        img src='holder.js/182x48?auto=yes'
      .mod-robust-card-top-info
        .mod-robust-card-top-text
          ' Maecenas ullamcorper
          strong Mauris ex mauris, porttitor sed
        a.mod-robust-card-hint Nam et consequat urna
    .mod-robust-card-details
      .mod-robust-card-top-text
        ' Nullam metus
        strong Fusce sagittis nec nulla sit

  .mod-robust-card-content
    .mod-robust-card-section.half-width-on-mobile
      .mod-robust-card-caption
        | Aenean
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-price
          span.mod-robust-card-price-value $100
          sup.mod-robust-card-price-sup .00
          small.mod-robust-card-price-period
            ' /ex
        a.mod-robust-card-hint Vivamus consectetur risus et
    .mod-robust-card-section.half-width-on-mobile
      .mod-robust-card-caption
        span Sapien
        | Maximus
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-type Suspendisse vel massa
        a.mod-robust-card-hint Curabitur efficitur
    .mod-robust-card-section
      .mod-robust-card-caption
        | Turpis
        span  Porttitor
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-ratings
          .mod-robust-card-rating
            .mod-robust-card-rating-value MI
            .mod-robust-card-rating-note ID
          .mod-robust-card-rating
            .mod-robust-card-rating-value ID
            .mod-robust-card-rating-note Donec nunc nulla
    .mod-robust-card-section.connected-on-mobile
      .mod-robust-card-caption.mod-robust-card-desktop
        | Hendrerit
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-review
          .mod-robust-card-stars
            .com-rating.mini.narrow
              .stars
                .i-star.active
                .i-star.active
                .i-star.active
                .i-star
                .i-star
          span Fermentum placerat
        .mod-robust-card-review
          .mod-robust-card-stars
            .com-rating.mini.narrow
              .stars
                .i-star.active
                .i-star.active
                .i-star.active
                .i-star
                .i-star
          span Fusce quis elit

  .mod-robust-card-footer
    .mod-robust-card-actions
      a.button.action Curabitur
      a.button.outline Efficitur
      a.button.outline.i-mail.mod-robust-card-desktop
      .mod-robust-card-count.i-user.mod-robust-card-desktop
        ' Nullam
        strong 100,000 placerat
    .mod-robust-card-compare
      label.checkbox.flip
        input type='checkbox' checked='checked'
        span Suspendisse

No price variant

Maecenas ullamcorper Mauris ex mauris, porttitor sed
Nam et consequat urna
Nullam metus Fusce sagittis nec nulla sit
Aenean
Ut pulvinar leo
0-000-000-0000
Vivamus consectetur risus et
SapienMaximus
Suspendisse vel massa
Curabitur efficitur
Turpis Porttitor
ET
EX
UT
Donec nunc nulla
Hendrerit
Fermentum placerat
Fusce quis elit
CurabiturEfficitur
Nullam 100,000 placerat
.mod-robust-card style='max-width:62.5rem;'
  .mod-robust-card-header
    .mod-robust-card-logo
      img src='holder.js/182x48?auto=yes'
    .mod-robust-card-top-info
      .mod-robust-card-top-text
        ' Maecenas ullamcorper
        strong Mauris ex mauris, porttitor sed
      a.mod-robust-card-hint Nam et consequat urna
    .mod-robust-card-details
      .mod-robust-card-top-text
        ' Nullam metus
        strong Fusce sagittis nec nulla sit

  .mod-robust-card-content
    .mod-robust-card-section.half-width-on-mobile
      .mod-robust-card-caption
        | Aenean
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-no-price
          span Ut pulvinar leo
          br
          span 0-000-000-0000
        a.mod-robust-card-hint Vivamus consectetur risus et
    .mod-robust-card-section.half-width-on-mobile
      .mod-robust-card-caption
        span Sapien
        | Maximus
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-type Suspendisse vel massa
        a.mod-robust-card-hint Curabitur efficitur
    .mod-robust-card-section
      .mod-robust-card-caption
        | Turpis
        span  Porttitor
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-ratings
          .mod-robust-card-rating
            .mod-robust-card-rating-value ET
            .mod-robust-card-rating-note EX
          .mod-robust-card-rating
            .mod-robust-card-rating-value UT
            .mod-robust-card-rating-note Donec nunc nulla
    .mod-robust-card-section.connected-on-mobile
      .mod-robust-card-caption.mod-robust-card-desktop
        | Hendrerit
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-review
          .mod-robust-card-stars
            .com-rating.mini.narrow
              .stars
                .i-star.active
                .i-star.active
                .i-star.active
                .i-star
                .i-star
          span Fermentum placerat
        .mod-robust-card-review
          .mod-robust-card-stars
            .com-rating.mini.narrow
              .stars
                .i-star.active
                .i-star.active
                .i-star.active
                .i-star
                .i-star
          span Fusce quis elit

  .mod-robust-card-footer
    .mod-robust-card-actions
      a.button.action Curabitur
      a.button.outline Efficitur
      a.button.outline.i-mail.mod-robust-card-desktop
      .mod-robust-card-count.i-user.mod-robust-card-desktop
        ' Nullam
        strong 100,000 placerat
    .mod-robust-card-compare
      label.checkbox.flip
        input type='checkbox' checked='checked'
        span Suspendisse

Card variation 1

Suspendisse molestie vel sapien at posuere. Phasellus viverra mollis massa ut eleifend. Nulla maximus congue dolor sed vestibulum. Nunc mattis molestie libero

Vivamus ultricies
In rhoncus orci et Ut scelerisque nulla at sem suscipit
Nunc in pharetra
$100 /ex
  • Vivamus $100
Vivamus consectetur risus et
Condimentum
odio
Risus hendrerit
  • Fusce $1,000
Maecenas ullamcorper turpis
Fusce quis elit at
turpisVivamus faucibus lacus
purusCurabitur efficitur euismod
In rhoncus orci et Mauris pharetra augue ac arcu
faucibus
  • Curabitur
  • Efficitur
  • Euismod turpis nec
Suspendisse
CurabiturEfficiturSuspendisse
Donec nunc nulla
$10
Suspendisse vel massa
$10
Emergency Room
$600
.mod-robust-card style='max-width:62.5rem;'
  .mod-robust-card-header
    h2.mod-robust-card-title Suspendisse molestie vel sapien at posuere. Phasellus viverra mollis massa ut eleifend. Nulla maximus congue dolor sed vestibulum. Nunc mattis molestie libero
    .mod-robust-card-top-action
      a.mod-robust-card-priorities.icon-priorities Vivamus ultricies
    .mod-robust-card-details
      .mod-robust-card-stars
        .com-rating.mini.narrow
          .stars
            .i-star.active
            .i-star.active
            .i-star.active
            .i-star
            .i-star
        .i-help
      .mod-robust-card-top-text
        ' In rhoncus orci et
        i.i-help
        strong.mod-robust-card-desktop Ut scelerisque nulla at sem suscipit

  .mod-robust-card-content
    .mod-robust-card-section.half-width-on-mobile
      .mod-robust-card-caption
        | Nunc in pharetra
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-price
          .sign
            .icon-discount-white
          span.mod-robust-card-price-value $100
          small.mod-robust-card-price-period
            '  /ex
        ul.mod-icon-list.condensed
          li.icon-checkmark Vivamus $100
        a.mod-robust-card-hint Vivamus consectetur risus et
    .mod-robust-card-section.half-width-on-mobile
      .mod-robust-card-caption
        | Condimentum
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-type.no-margin
          .sign odio
          strong Risus hendrerit
        ul.mod-icon-list.condensed
          li.icon-checkmark Fusce $1,000
        a.mod-robust-card-hint Maecenas ullamcorper turpis
    .mod-robust-card-section.mod-robust-card-mobile
      .mod-robust-card-caption.no-icon Fusce quis elit at
      .mod-robust-card-important
        .mod-robust-card-item
          strong.mod-robust-card-item-key turpis
          span.mod-robust-card-item-value Vivamus faucibus lacus
        .mod-robust-card-item
          strong.mod-robust-card-item-key purus
          span.mod-robust-card-item-value Curabitur efficitur euismod
      .mod-robust-card-plan
        ' In rhoncus orci et
        i.i-help
        strong Mauris pharetra augue ac arcu
    .mod-robust-card-section.mod-robust-card-desktop
      .mod-robust-card-caption
        | faucibus
        i.i-help
      .mod-robust-card-shift
        ul.mod-simple-list.no-bullet
          li Curabitur
          li Efficitur
          li Euismod turpis nec
    .mod-robust-card-section.mod-robust-card-desktop
      .mod-robust-card-caption
        | Suspendisse
        i.i-help
      .mod-robust-card-shift
        ul.mod-icon-list.condensed
          li.icon-checkmark
            .list-truncation
              span.truncate Consectetur
              strong $10
          li.icon-close-accent Truvada
          li
            ' &
            a href='#' faucibus

  .mod-robust-card-footer
    .mod-robust-card-actions
      a.button.action Curabitur
      a.button.outline.half Efficitur
      a.button.outline.half Suspendisse
      a.button.outline.i-mail.mod-robust-card-desktop
      .mod-robust-card-info
        span Donec nunc nulla
        .value $10
      .mod-robust-card-info
        span Suspendisse vel massa
        .value $10
      .mod-robust-card-info
        span Emergency Room
        .value $600

    .mod-robust-card-compare
      label.checkbox.flip
        input type='checkbox' checked='checked'
        span Suspendisse

Details card

Blue Cross Blue Shield of Illinois

Mauris ex mauris
Vestibulum dignissimWhat is a Vestibulum dignissim plan?
Off Vivamus Sapien   Fusce euismod bibendum
Nunc in pharetra
$100 /ex
Condimentum
odio
$1,000 /odio
Suspendisse molestie
$1,000malesuada fames
$10,000turpis egestas
Phasellus viverra mollis
Nulla maximus congue
Aliquam nisl

Morbi quis dui

Vivamus ultricies augue in tortor pharetra convallisviverra mollis et egestas tortor laoreet

augue efficitur

  • Aliquam nisl nibh, lacinia
  • Morbi quis dui consequat
  • Suspendisse sed

Vestibulum lacinia dignissim

  • Nam consequat maximus turpis, vestibulum
  • Maecenas efficitur accumsan
  • Mauris semper faucibus

Suspendisse

Ut scelerisque nulla

Phasellus viverra mollis massa ut eleifend. Nulla maximus congue dolor sed vestibulum.

Proin pharetra felis et odio porttitor, et egestas

Donec dui est, aliquet at enim ac, egestas consectetur orci. Aliquam nisl nibh, lacinia et diam  Morbi quis dui.

Nam accumsan quam

Suspendisse id felis nulla. Nulla facilisi. Mauris pharetra augue ac arcu dapibus aliquam. Nunc mattis diam liberoFaucibus vel magna

Faucibus
Mauris pharetra
Donec nunc nulla
Scelerisque enim
Etiam malesuada quisAenean sit  
Mauris ex mauris$10  
Suspendisse vel massa
Etiam malesuada quisAenean sit
Mauris ex mauris$10

Suspendisse

Donec nunc nulla
Mauris ex mauris$10
Suspendisse vel massa
Etiam malesuada quisAenean sit
Mauris ex mauris$10
Donec nunc nulla
Etiam malesuada quisAenean sit
Mauris ex mauris$10
Suspendisse vel massa
Etiam malesuada quisAenean sit
Mauris ex mauris$10

Curabitur

Donec nunc nulla
Etiam malesuada quisAenean sit
Mauris ex mauris$10
Suspendisse vel massa
Etiam malesuada quisAenean sit
Mauris ex mauris$10

Pellentesque

Donec nunc nulla
Etiam malesuada quisAenean sit
Mauris ex mauris$10
Suspendisse vel massa
Etiam malesuada quisAenean sit
Mauris ex mauris$10

Cras egestas neque

Donec nunc nulla
Etiam malesuada quisAenean sit
Mauris ex mauris$10
Suspendisse vel massa
Etiam malesuada quisAenean sit
Mauris ex mauris$10
Donec nunc nulla
Etiam malesuada quisAenean sit
Mauris ex mauris$10
Suspendisse vel massa
Etiam malesuada quisAenean sit
Mauris ex mauris$10
Donec nunc nulla
Etiam malesuada quisAenean sit
Mauris ex mauris$10
Suspendisse vel massa
Etiam malesuada quisAenean sit
Mauris ex mauris$10

Maecenas rhoncus

Donec nunc nulla
Etiam malesuada quisAenean sit
Mauris ex mauris$10
Suspendisse vel massa
Etiam malesuada quisAenean sit
Mauris ex mauris$10

Nam accumsan quam

Donec nunc nulla  
PhasellusEtiam malesuada quis
10K10K
Quisque facilisis  

SED

Maecenas rhoncus
Vestibulum dignissim ac

Vivamus eu aliquet sapien, non fringilla enim. Ut scelerisque nulla at sem suscipit, at porta mi tincidunt. Nunc in pharetra velit. Pellentesquehabitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt

Nunc in pharetra velit

Vivamus eu aliquet sapien, non fringilla enim. Ut scelerisque nulla at sem suscipit, at porta mi tincidunt. Nunc in pharetra velit. Pellentesquehabitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt

In rhoncus orci et ex

Vivamus eu aliquet sapien, non fringilla enim. Ut scelerisque nulla at sem suscipit, at porta mi tincidunt. Nunc in pharetra velit. Pellentesquehabitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt

Nunc in pharetra

Vivamus eu aliquet sapien, non fringilla enim. Ut scelerisque nulla at sem suscipit, at porta mi tincidunt. Nunc in pharetra velit. Pellentesquehabitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt

Pellentesque habitant

Vivamus eu aliquet sapien, non fringilla enim. Ut scelerisque nulla at sem suscipit, at porta mi tincidunt. Nunc in pharetra velit. Pellentesquehabitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt

Vivamus ultricies augue in  Nulla maximus congue dolor

Pellentesque habitant morbi

Nullam metus Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit
Suspendisse molestie
.mod-robust-card style='max-width:62.5rem;'
  .mod-robust-card-header
    .mod-robust-card-header-left
      h2.mod-robust-card-title Blue Cross Blue Shield of Illinois
      .mod-robust-card-details
        .mod-robust-card-stars.lineup
          .com-rating.mini.narrow
            .stars
              .i-star.active
              .i-star.active
              .i-star.active
              .i-star
              .i-star
          .i-help
        .mod-robust-card-tier
          strong
            | Mauris ex mauris
            i
    .mod-robust-card-header-right
      a.button.action.i-clock.mini Vestibulum dignissim
      a.mod-robust-card-hint.no-indent href="#" What is a Vestibulum dignissim plan?
    .mod-robust-card-details
      ' Off Vivamus Sapien
      i.i-help
      '  
      strong Fusce euismod bibendum
  .mod-robust-card-content
    .mod-robust-card-section.table-like-on-mobile
      .mod-robust-card-caption
        | Nunc in pharetra
        i.i-help
      .mod-robust-card-shift
        .mod-robust-card-price
          .sign
            .icon-discount-white
          span.mod-robust-card-price-value $100
          small.mod-robust-card-price-period
            '  /ex
    .mod-robust-card-section.table-like-on-mobile
      .mod-robust-card-caption
        | Condimentum
        i.i-help
      .mod-robust-card-shift
        .mod-robust-card-type
          .sign odio
          strong $1,000
          span
            '  /odio
    .mod-robust-card-section.table-like-on-mobile
      .mod-robust-card-caption
        | Suspendisse molestie
        i.i-help
      .mod-robust-card-shift.layout-equal-columns
        .mod-robust-card-type.wrap
          strong $1,000
          span
            | malesuada fames
        .mod-robust-card-type.wrap
          strong $10,000
          span
            | turpis egestas
      a.mod-robust-card-hint Phasellus viverra mollis
    .mod-robust-card-section.table-like-on-mobile
      .mod-robust-card-caption
        | Nulla maximus congue
        i.i-help
      .mod-robust-card-shift
        .mod-robust-card-type
          strong Aliquam nisl

  .mod-robust-card-additional
    h2.mod-robust-card-title Morbi quis dui
    p
      ' Vivamus ultricies augue
      strong in tortor pharetra convallis
      ' viverra mollis
      strong et egestas tortor laoreet
    .mod-robust-card-equal-columns
      .mod-robust-card-equal-column
        p: strong augue efficitur
        ul.mod-icon-list
          li.icon-checkmark Aliquam nisl nibh, lacinia
          li.icon-checkmark Morbi quis dui consequat
          li.icon-checkmark Suspendisse sed
      .mod-robust-card-equal-column
        p: strong Vestibulum lacinia dignissim
        ul.mod-icon-list
          li.icon-checkmark Nam consequat maximus turpis, vestibulum
          li.icon-checkmark Maecenas efficitur accumsan
          li.icon-checkmark Mauris semper faucibus

  .mod-robust-card-additional
    h2.mod-robust-card-title Suspendisse
    h3.mod-robust-card-subtitle Ut scelerisque nulla
    .mod-robust-card-equal-columns
      .mod-robust-card-equal-column
        p Phasellus viverra mollis massa ut eleifend. Nulla maximus congue dolor sed vestibulum.
        p Proin pharetra felis et odio porttitor, et egestas
      .mod-robust-card-equal-column
        p
          | Donec dui est, aliquet at enim ac, egestas consectetur orci. Aliquam nisl nibh, lacinia et diam  
          a href="#" Morbi quis dui.
    .mod-robust-card-equal-columns
      .mod-robust-card-equal-column
        h4.mod-robust-card-underlined Nam accumsan quam
        p.mod-robust-card-section-intro
          | Suspendisse id felis nulla. Nulla facilisi. Mauris pharetra augue ac arcu dapibus aliquam. Nunc mattis diam libero
          a href="#" Faucibus vel magna
        .mod-robust-card-description-item
          div Faucibus
          b Mauris pharetra
        h5.mod-robust-card-minititle Donec nunc nulla
        span Scelerisque enim
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col
              | Aenean sit  
              i.i-help
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col
              | $10  
              i.i-help
        h5.mod-robust-card-minititle Suspendisse vel massa
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h4.mod-robust-card-underlined Suspendisse
        h5.mod-robust-card-minititle Donec nunc nulla
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h5.mod-robust-card-minititle Suspendisse vel massa
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h5.mod-robust-card-minititle Donec nunc nulla
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h5.mod-robust-card-minititle Suspendisse vel massa
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h4.mod-robust-card-underlined Curabitur
        h5.mod-robust-card-minititle Donec nunc nulla
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h5.mod-robust-card-minititle Suspendisse vel massa
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h4.mod-robust-card-underlined Pellentesque
        h5.mod-robust-card-minititle Donec nunc nulla
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h5.mod-robust-card-minititle Suspendisse vel massa
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
      .mod-robust-card-equal-column
        h4.mod-robust-card-underlined Cras egestas neque
        h5.mod-robust-card-minititle Donec nunc nulla
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h5.mod-robust-card-minititle Suspendisse vel massa
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h5.mod-robust-card-minititle Donec nunc nulla
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h5.mod-robust-card-minititle Suspendisse vel massa
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h5.mod-robust-card-minititle Donec nunc nulla
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h5.mod-robust-card-minititle Suspendisse vel massa
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h4.mod-robust-card-underlined Maecenas rhoncus
        h5.mod-robust-card-minititle Donec nunc nulla
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h5.mod-robust-card-minititle Suspendisse vel massa
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Etiam malesuada quis
            td.mod-robust-card-table-col Aenean sit
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Mauris ex mauris
            td.mod-robust-card-table-col $10
        h4.mod-robust-card-underlined Nam accumsan quam
        h5.mod-robust-card-minititle
          | Donec nunc nulla  
          i.i-help
        table.mod-robust-card-table
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col Phasellus
            td.mod-robust-card-table-col Etiam malesuada quis
          tr.mod-robust-card-table-row
            td.mod-robust-card-table-col 10K
            td.mod-robust-card-table-col 10K
        .mod-robust-card-caption
          b Quisque facilisis  
          i
        h2.mod-robust-card-title SED
        span Maecenas rhoncus
        h5.mod-robust-card-minititle Vestibulum dignissim ac
        p
          | Vivamus eu aliquet sapien, non fringilla enim. Ut scelerisque nulla at sem suscipit, at porta mi tincidunt. Nunc in pharetra velit. Pellentesque
          | habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt
  .mod-robust-card-additional
    div
      h4.mod-robust-card-subtitle Nunc in pharetra velit
      p
        | Vivamus eu aliquet sapien, non fringilla enim. Ut scelerisque nulla at sem suscipit, at porta mi tincidunt. Nunc in pharetra velit. Pellentesque
        | habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt
      h4.mod-robust-card-add-subtitle In rhoncus orci et ex
      p
        | Vivamus eu aliquet sapien, non fringilla enim. Ut scelerisque nulla at sem suscipit, at porta mi tincidunt. Nunc in pharetra velit. Pellentesque
        | habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt
      h4.mod-robust-card-add-subtitle Nunc in pharetra
      p
        | Vivamus eu aliquet sapien, non fringilla enim. Ut scelerisque nulla at sem suscipit, at porta mi tincidunt. Nunc in pharetra velit. Pellentesque
        | habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt
      h4.mod-robust-card-add-subtitle Pellentesque habitant
      p
        | Vivamus eu aliquet sapien, non fringilla enim. Ut scelerisque nulla at sem suscipit, at porta mi tincidunt. Nunc in pharetra velit. Pellentesque
        | habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt
      h4.mod-robust-card-subtitle
        | Vivamus ultricies augue in  
        a.button.info.mini href='#' Nulla maximus congue dolor
  .mod-robust-card-footer.m-wrap
    .mod-robust-card-footer-left
      h2.mod-robust-card-title Pellentesque habitant morbi
      .mod-robust-card-plan
        .text-truncation
          .truncate
            ' Nullam metus
            strong Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit Fusce sagittis nec nulla sit
    .mod-robust-card-actions.top
      div
        a.button.action.i-clock Vestibulum dignissim
        a.mod-robust-card-hint.oneline href="#" In rhoncus orci vestibulum dignissim augue?
      a.button.outline Suspendisse molestie

Details card 2

Viverra
Donec nunc nulla  Curabitur efficitur euismod
Aenean
$100.00/ex
Vivamus consectetur risus et
SapienMaximus
Sed dapibus orci
Donec dui est, aliquet
Sagittis
$100,000
Turpis
Vestibulum

Maecenas efficitur

Imperdiet
1000
Nam consequat
100,000
Tristique
EX
UT Pretium
ET
Sed vulputate
augue consequat

Vulputate, sodales cursus risus

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi eum ipsum nisi optio porro quod sint totam veritatis? Alias doloribus explicabo illo illum iste, nobis officiis placeat quidem sunt! Deserunt ducimus, iure iusto molestias nulla odit omnis velit vitae?

Egestas tortor

Aliquam nisl nibh, lacinia et diam ut, mattis facilisis lectus. Morbi quis dui consequat, consectetur massa nec, blandit tellus. Nam accumsan quam eu blandit rhoncus. Suspendisse sed sem sagittis.

  • Phasellus tellus augue

    Nam accumsan quam eu blandit rhoncus. Suspendisse sed sem sagittis, ultricies erat ut, pretium neque. Vestibulum lacinia dignissim convallis. Nam consequat maximus turpis, vestibulum tristique metus aliquam eget. Aenean gravida velit suscipit imperdiet aliquam. Maecenas efficitur accumsan hendrerit.

    Convallis- Fusce id egestas metus, consectetur sagittis lacus. Phasellus luctus elementum iaculis.

    Nunc- Proin aliquam tortor et aliquam dignissim. Aliquam sapien enim, elementum at massa sit amet, pretium egestas metus.

    Proin- Etiam malesuada quis augue vitae dapibus. Sed non tortor id neque posuere luctus ac vel sapien. Nullam metus velit, efficitur commodo elementum vitae, porttitor id tortor.

Fusce sagittis nec
Maecenas ullamcorperConsequat
Fusce quis elitMaximus
Aenean RhoncusEgestas
ElementumNisi
Sleep FeugiatTurpis
Proin Etiam malesuadaJusto
Vivamus ultricies augueSapien
Fusce sagittisMaximus
  • Nam et consequat urna. Fusce quis elit at turpis convallis
  • Maecenas rhoncus pulvinar dolor, sit amet commodo risus hendrerit quis.
  • Suspendisse molestie vel sapien at posuere
Nulla maximus
Proin pharetra felis et odio
Phasellus in laoreet

Donec

  • Nunc in pharetra velit
  • Pellentesque habitant morbi tristique
  • Donec imperdiet leo id odio tincidunt, eget blandit

Proin

  • Phasellus tellus augue
Donec id urna feugiat
Etiam malesuada quis augue
Phasellus in laoreet

Aenean sit amet pretium orci

  • Maecenas ullamcorper

Fusce quis elit at turpis

  • Nam et consequat urna. Fusce quis elit at turpis convallis
  • Maecenas rhoncus pulvinar dolor, sit amet commodo risus hendrerit quis.
  • Suspendisse vel massa iaculis, porta massa in, pellentesque purus. Vivamus faucibus lacus
ViverraNulla facilisi

Suspendisse vel

Donec nunc nulla, posuere ultricies imperdiet a, accumsan id lectus. Curabitur efficitur euismod turpis nec efficitur. Nullam consectetur ipsum in viverra sodales.

  • Nulla facilisi- pharetra augue ac arcu dapibus aliquam. Nunc mattis diam libero, vitae dapibus ex dictum in. Nullam tempor scelerisque enim, ut dapibus tellus finibus quis.
  • Pellentesque ornare- malesuada blandit. Cras egestas neque non massa porta, molestie ornare ipsum luctus. Quisque eget ullamcorper eros, semper pulvinar eros. Pellentesque eu tincidunt lacus.Vulputate- Nullam mollis turpis eget mattis congue. Fusce vitae turpis quis mauris maximus tincidunt vel sit amet nibh. Nunc tincidunt velit laoreet nulla consectetur, sit amet ultrices neque rhoncus. Ut sit amet nunc nec risus condimentum volutpat. Nulla vitae ultricies turpis.
  • Aenean ac bibendum nisi- in laoreet quam. Curabitur ex nibh, pharetra eget aliquam congue, commodo vitae tortor. Nam lectus tellus, tristique eget molestie ut, condimentum id felis. Etiam porta facilisis.
  • In rhoncus orci et- ex fermentum, ut euismod diam tincidunt. Vivamus eu aliquet sapien, non fringilla enim. Ut scelerisque nulla at.
  • Nunc in pharetra velit- habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt, eget blandit nisi fermentum. Donec non libero vitae augue consequat aliquet.
  • Vivamus- a nulla maximus tincidunt. Vestibulum dignissim ac erat ac placerat. In hac habitasse platea dictumst. Integer suscipit orci odio, vel volutpat turpis ultrices at.

Efficitur

Aliquam sapien enim, elementum

$100,000

Aenean in lacus

10, 10, 10, 10

Donec blandit diam a neque aliquet, nec facilisis mi

10%

Aliquam sapien enim, elementum

$100,000

Aenean in lacus

10, 10, 10, 10

Donec blandit diam a neque aliquet, nec facilisis mi

10%

Fermentum

Ut scelerisque nulla at sem

Nunc in pharetra velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt, eget blandit nisi fermentum. Donec non libero.

Mauris semper faucibus tellus, id auctor mauris suscipit eget. Aenean in lacus lacinia, varius massa eget, facilisis urna. Suspendisse erat dolor, auctor sed eleifend quis, hendrerit eget sapien.

Nunc

Ut scelerisque nulla at sem

Nunc in pharetra velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt, eget blandit nisi fermentum. Donec non libero.

Mauris semper faucibus tellus, id auctor mauris suscipit eget. Aenean in lacus lacinia, varius massa eget, facilisis urna. Suspendisse erat dolor, auctor sed eleifend quis, hendrerit eget sapien.

ViverraNulla facilisi
.mod-robust-card style='max-width:62.5rem;'
  .mod-robust-card-header
    .mod-robust-card-logo
      img src='holder.js/182x48?auto=yes'
    .mod-robust-card-header-right
      a.button.action.mini Viverra
    .mod-robust-card-details
      'Donec nunc nulla 
      strong Curabitur efficitur euismod
  .mod-robust-card-content
    .mod-robust-card-section
      .mod-robust-card-caption
        | Aenean
        i.i-help
      .mod-robust-card-shift
        .mod-robust-card-price
          span.mod-robust-card-price-value $100
          sup.mod-robust-card-price-sup .00
          small.mod-robust-card-price-period
            ' /ex
        a.mod-robust-card-hint Vivamus consectetur risus et
    .mod-robust-card-section
      .mod-robust-card-caption
        span Sapien
        | Maximus
        i.i-help
      .mod-robust-card-shift
        .mod-robust-card-type.big
          | Sed dapibus orci
          br
          | Donec dui est, aliquet
    .mod-robust-card-section
      .mod-robust-card-caption
        | Sagittis
        i.i-help
      .mod-robust-card-shift
        .mod-robust-card-type.big $100,000
    .mod-robust-card-section
      .mod-robust-card-caption
        | Turpis
        i.i-help
      .mod-robust-card-shift
        .mod-robust-card-type.big Vestibulum
  .mod-robust-card-additional.content-header-on-mobile
    h2.mod-robust-card-title Maecenas efficitur
  .mod-robust-card-content
    .mod-robust-card-section
      .mod-robust-card-caption Imperdiet
      .mod-robust-card-shift
        .mod-robust-card-type.big
          strong 1000
    .mod-robust-card-section
      .mod-robust-card-caption
        | Nam consequat
        i.i-help
      .mod-robust-card-shift
        .mod-robust-card-type.big
          strong 100,000
    .mod-robust-card-section
      .mod-robust-card-caption
        | Tristique
        i.i-help
      .mod-robust-card-shift
        .mod-robust-card-type.big
          strong EX
    .mod-robust-card-section
      .mod-robust-card-caption
        | UT Pretium
        i.i-help
      .mod-robust-card-shift
        .mod-robust-card-type.big
          strong ET
    .mod-robust-card-section
      .mod-robust-card-caption
        | Sed vulputate
        i.i-help
      .mod-robust-card-shift
        .mod-robust-card-type.big
          vitae augue consequat
  .mod-robust-card-additional
    h2.mod-robust-card-title Vulputate, sodales cursus risus
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi eum ipsum nisi optio porro quod sint totam veritatis? Alias doloribus explicabo illo illum iste, nobis officiis placeat quidem sunt! Deserunt ducimus, iure iusto molestias nulla odit omnis velit vitae?
  .mod-robust-card-additional
    h2.mod-robust-card-title Egestas tortor
    p Aliquam nisl nibh, lacinia et diam ut, mattis facilisis lectus. Morbi quis dui consequat, consectetur massa nec, blandit tellus. Nam accumsan quam eu blandit rhoncus. Suspendisse sed sem sagittis.

    .flex-row
      ul.mod-icon-list
        li.icon-checkmark
          h3.mod-robust-card-subtitle.indent Phasellus tellus augue
          p Nam accumsan quam eu blandit rhoncus. Suspendisse sed sem sagittis, ultricies erat ut, pretium neque. Vestibulum lacinia dignissim convallis. Nam consequat maximus turpis, vestibulum tristique metus aliquam eget. Aenean gravida velit suscipit imperdiet aliquam. Maecenas efficitur accumsan hendrerit.
          p
            em
              strong Convallis
              | - Fusce id egestas metus, consectetur sagittis lacus. Phasellus luctus elementum iaculis.
          p
            em
              strong Nunc
              | - Proin aliquam tortor et aliquam dignissim. Aliquam sapien enim, elementum at massa sit amet, pretium egestas metus.
          p
            em
              strong Proin
              | - Etiam malesuada quis augue vitae dapibus. Sed non tortor id neque posuere luctus ac vel sapien. Nullam metus velit, efficitur commodo elementum vitae, porttitor id tortor.
      table
        thead
          tr
            th colspan="2" Fusce sagittis nec
        tbody
          tr
            td Maecenas ullamcorper
            td
              strong Consequat
          tr
            td Fusce quis elit
            td
              strong Maximus
          tr
            td Aenean Rhoncus
            td
              strong Egestas
          tr
            td Elementum
            td
              strong Nisi
          tr
            td Sleep Feugiat
            td
              strong Turpis
          tr
            td Proin Etiam malesuada
            td
              strong Justo
          tr
            td Vivamus ultricies augue
            td
              strong Sapien
          tr
            td Fusce sagittis
            td
              strong Maximus
    ul.mod-icon-list
      li.icon-checkmark
        strong Nam et consequat urna. Fusce quis elit at turpis convallis
      li.icon-checkmark
        strong Maecenas rhoncus pulvinar dolor, sit amet commodo risus hendrerit quis.
      li.icon-checkmark
        strong Suspendisse molestie vel sapien at posuere
  .mod-robust-card-additional.flattened
    .layout-ratings
      div
        .subtitle Nulla maximus
        h5 Proin pharetra felis et odio
        .rating
          .com-rating.narrow
            .stars
              .i-star.active
              .i-star.active
              .i-star.active
              .i-star
              .i-star
            .footer Phasellus in laoreet
        p
          strong Donec
        ul.mod-simple-list.spacer-negative-xs
          li Nunc in pharetra velit
          li Pellentesque habitant morbi tristique
          li Donec imperdiet leo id odio tincidunt, eget blandit
        p
          strong Proin
        ul.mod-simple-list.spacer-negative-xs
          li Phasellus tellus augue
      div
        .subtitle Donec id urna feugiat
        h5 Etiam malesuada quis augue
        .rating
          .com-rating.narrow
            .stars
              .i-star.active
              .i-star.active
              .i-star.active
              .i-star
              .i-star
            .footer Phasellus in laoreet
        p
          strong Aenean sit amet pretium orci
        ul.mod-simple-list.spacer-negative-xs
          li Maecenas ullamcorper
        p
          strong Fusce quis elit at turpis
        ul.mod-simple-list.spacer-negative-xs
          li Nam et consequat urna. Fusce quis elit at turpis convallis
          li Maecenas rhoncus pulvinar dolor, sit amet commodo risus hendrerit quis.
          li Suspendisse vel massa iaculis, porta massa in, pellentesque purus. Vivamus faucibus lacus
    iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/GGMezeQCZnE" width="640"
  .mod-robust-card-header.pseudo
    .mod-robust-card-logo
      img src='holder.js/182x48?auto=yes'
      .mod-robust-card-details
        'Donec nunc nulla 
        strong Curabitur efficitur euismod
    .mod-robust-card-actions.min
      a.button.action.mini Viverra
      a.button.outline Nulla facilisi
  .mod-robust-card-additional
    h2.mod-robust-card-title Suspendisse vel
    p Donec nunc nulla, posuere ultricies imperdiet a, accumsan id lectus. Curabitur efficitur euismod turpis nec efficitur. Nullam consectetur ipsum in viverra sodales.
    ul.mod-icon-list
      li.icon-checkmark
        strong Nulla facilisi
        | -  pharetra augue ac arcu dapibus aliquam. Nunc mattis diam libero, vitae dapibus ex dictum in. Nullam tempor scelerisque enim, ut dapibus tellus finibus quis.
      li.icon-checkmark
        strong Pellentesque ornare
        | - malesuada blandit. Cras egestas neque non massa porta, molestie ornare ipsum luctus. Quisque eget ullamcorper eros, semper pulvinar eros. Pellentesque eu tincidunt lacus.
        strong Vulputate
        | - Nullam mollis turpis eget mattis congue. Fusce vitae turpis quis mauris maximus tincidunt vel sit amet nibh. Nunc tincidunt velit laoreet nulla consectetur, sit amet ultrices neque rhoncus. Ut sit amet nunc nec risus condimentum volutpat. Nulla vitae ultricies turpis.
      li.icon-checkmark
        strong Aenean ac bibendum nisi
        | - in laoreet quam. Curabitur ex nibh, pharetra eget aliquam congue, commodo vitae tortor. Nam lectus tellus, tristique eget molestie ut, condimentum id felis. Etiam porta facilisis.
      li.icon-checkmark
        strong In rhoncus orci et
        | - ex fermentum, ut euismod diam tincidunt. Vivamus eu aliquet sapien, non fringilla enim. Ut scelerisque nulla at.
      li.icon-checkmark
        strong Nunc in pharetra velit
        | - habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt, eget blandit nisi fermentum. Donec non libero vitae augue consequat aliquet.
      li.icon-checkmark
        strong Vivamus
        | - a nulla maximus tincidunt. Vestibulum dignissim ac erat ac placerat. In hac habitasse platea dictumst. Integer suscipit orci odio, vel volutpat turpis ultrices at.
  .mod-robust-card-additional
    h2.mod-robust-card-title Efficitur
    .mod-robust-card-equal-columns
      .mod-robust-card-equal-column
        h3.mod-robust-card-subtitle Aliquam sapien enim, elementum
        p $100,000
        h3.mod-robust-card-subtitle Aenean in lacus
        p 10, 10, 10, 10
        h3.mod-robust-card-subtitle Donec blandit diam a neque aliquet, nec facilisis mi
        p 10%
      .mod-robust-card-equal-column
        h3.mod-robust-card-subtitle Aliquam sapien enim, elementum
        p $100,000
        h3.mod-robust-card-subtitle Aenean in lacus
        p 10, 10, 10, 10
        h3.mod-robust-card-subtitle Donec blandit diam a neque aliquet, nec facilisis mi
        p 10%
  .mod-robust-card-additional
    .mod-robust-card-equal-columns
      .mod-robust-card-equal-column
        h2.mod-robust-card-title Fermentum
        h3.mod-robust-card-subtitle Ut scelerisque nulla at sem
        p Nunc in pharetra velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt, eget blandit nisi fermentum. Donec non libero.
        p Mauris semper faucibus tellus, id auctor mauris suscipit eget. Aenean in lacus lacinia, varius massa eget, facilisis urna. Suspendisse erat dolor, auctor sed eleifend quis, hendrerit eget sapien.
      .mod-robust-card-equal-column
        h2.mod-robust-card-title Nunc
        h3.mod-robust-card-subtitle Ut scelerisque nulla at sem
        p Nunc in pharetra velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt, eget blandit nisi fermentum. Donec non libero.
        p Mauris semper faucibus tellus, id auctor mauris suscipit eget. Aenean in lacus lacinia, varius massa eget, facilisis urna. Suspendisse erat dolor, auctor sed eleifend quis, hendrerit eget sapien.
  .mod-robust-card-header.pseudo
    .mod-robust-card-logo
      img src='holder.js/182x48?auto=yes'
      .mod-robust-card-details
        'Donec nunc nulla 
        strong Curabitur efficitur euismod
    .mod-robust-card-actions.min
      a.button.action.mini Viverra
      a.button.outline Nulla facilisi

Robust card with dashed border

Maecenas ullamcorper Mauris ex mauris, porttitor sed
Nam et consequat urna
Aenean
$100.00/ex
Vivamus consectetur risus et
SapienMaximus
Suspendisse vel massa
Curabitur efficitur
Turpis Porttitor
ET
EX
UT
Donec nunc nulla
Hendrerit
Fermentum placerat
Fusce quis elit
CurabiturEfficitur
Nullam 100,000 placerat
.mod-robust-card.dashed style='max-width:62.5rem;'
  .mod-robust-card-header
    .mod-robust-card-logo
      img src='holder.js/182x48?auto=yes'
      .mod-robust-card-details.inline
        .mod-robust-card-top-text
          ' Nullam metus
          strong Fusce sagittis nec nulla sit
    .mod-robust-card-top-info
      .mod-robust-card-rated
        ' Maecenas ullamcorper
        strong Mauris ex mauris, porttitor sed
      a.mod-robust-card-hint Nam et consequat urna
  .mod-robust-card-content
    .mod-robust-card-section
      .mod-robust-card-caption
        | Aenean
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-price
          span.mod-robust-card-price-value $100
          sup.mod-robust-card-price-sup .00
          small.mod-robust-card-price-period
            ' /ex
        a.mod-robust-card-hint Vivamus consectetur risus et
    .mod-robust-card-section
      .mod-robust-card-caption
        span Sapien
        | Maximus
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-type Suspendisse vel massa
        a.mod-robust-card-hint Curabitur efficitur
    .mod-robust-card-section
      .mod-robust-card-caption
        | Turpis
        span  Porttitor
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-ratings
          .mod-robust-card-rating
            .mod-robust-card-rating-value ET
            .mod-robust-card-rating-note EX
          .mod-robust-card-rating
            .mod-robust-card-rating-value UT
            .mod-robust-card-rating-note Donec nunc nulla
    .mod-robust-card-section
      .mod-robust-card-caption
        | Hendrerit
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-review
          .mod-robust-card-stars
            .com-rating.mini.narrow
              .stars
                .i-star.active
                .i-star.active
                .i-star.active
                .i-star.active
                .i-star
          span Fermentum placerat
        .mod-robust-card-review
          .mod-robust-card-stars
            .com-rating.mini.narrow
              .stars
                .i-star.active
                .i-star.active
                .i-star.active
                .i-star
                .i-star
          span Fusce quis elit

  .mod-robust-card-footer
    .mod-robust-card-actions
      a.button.action Curabitur
      a.button.outline Efficitur
      a.button.outline.i-mail
      .mod-robust-card-count.i-user
        ' Nullam
        strong 100,000 placerat
    .mod-robust-card-compare
      label.checkbox.flip
        input type='checkbox' checked='checked'
        span Suspendisse

Card variation 2

#5 Largest in U.S.
Founded in 1956

#5 Largest in U.S.

Nullam 700k customers
Turpis
ET
EX
UT
Donec nunc nulla
Hendrerit
Donec placerat ipsum
Suspendisse
VivamusPhasellus viverra
Nullam Aliquam sapien enim
.mod-robust-card style='max-width:62.5rem;'
  .mod-robust-card-header
    .mod-robust-card-logo
      img src='holder.js/182x48?auto=yes'
    .mod-robust-card-top-info
      .mod-robust-card-rated
        strong #5 Largest in U.S.
    .mod-robust-card-details
      .mod-robust-card-plan
        ' Founded in
        strong 1956
  .mod-robust-card-content
    .mod-robust-card-section.mod-robust-card-section-small-full.mod-robust-card-mobile
      h4.mod-robust-card-subtitle #5 Largest in U.S.
      .mod-robust-card-count
        ' Nullam
        strong 700k customers
    .mod-robust-card-section
      .mod-robust-card-caption
        | Turpis
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-ratings
          .mod-robust-card-rating
            .mod-robust-card-rating-value ET
            .mod-robust-card-rating-note EX
          .mod-robust-card-rating
            .mod-robust-card-rating-value UT
            .mod-robust-card-rating-note Donec nunc nulla
    .mod-robust-card-section
      .mod-robust-card-caption
        | Hendrerit
        i.i-help
      .mod-robust-card-pull
        .mod-robust-card-review
          .mod-robust-card-stars
            .com-rating.mini.narrow
              .stars
                .i-star.active
                .i-star.active
                .i-star.active
                .i-star.active
                .i-star
          span Donec placerat ipsum
        .mod-robust-card-review
          .mod-robust-card-stars
            .com-rating.mini.narrow
              .stars
                .i-star.active
                .i-star.active
                .i-star.active
                .i-star
                .i-star
          span Suspendisse

  .mod-robust-card-footer
    .mod-robust-card-actions
      a.button.outline Vivamus
      a.button.outline Phasellus viverra
      .mod-robust-card-count.i-user.mod-robust-card-desktop
        ' Nullam
        strong Aliquam sapien enim