Comparison Card
Usage notes:
For the standard and simple comparison cards, you can hide columns/sections on small using the .col-hide-for-medium-only class.
However, note that you will need to add the class to the corrisponding header column/section if there is one in the comparision table.
Phasellus
Nullam metus
Aliquam
Vulputate
- Nam accumsan quam eu
- Suspendisse sed sem sagittis
- Vestibulum lacinia
Plan Features
- Aenean in lacus lacinia
- Suspendisse erat dolor
- Suspendisse molestie vel
- Phasellus viverra mollis
Nunc mattis molestie libero
Proin pharetra felis.mod-comparison-table-header
.section.plan-col
| Phasellus
span.i-directup
.section
| Nullam metus
span.i-dropdown
.section.col-hide-for-medium-only
| Aenean sit
span.i-dropdown
.section
| Aliquam
span.i-dropdown
.section.cta-col
.mod-comparison-card.small-only--with-header
.summary
.plan
.value
sup $
| 10
small
| /non
h4 Proin aliquam tortor
.info
img src='holder.js/160x40?auto=yes'
.rating
.stars
.com-rating.compact
.stars
.i-star.active
.i-star.active
.i-star.active
.i-star.active
.i-star
.rate
| 1.0
span
| /10
span.i-help
.pricing.col-hide-for-medium-only
h4 Aenean ac bibendum
.value
sup $
| 100
small aliquam dignissim
.pricing
h4 Orci et
.value
sup $
| 10K
small consequat aliquet
.actions
.mod-example.button.action href='#' Nulla maximus
a.button.read-more href='#' Read Full Details
a.link href='#'
span Show Details
.details.visible
.section
h3.details-header Vulputate
ul.mod-simple-list.condensed
li Nam accumsan quam eu
li Suspendisse sed sem sagittis
li Vestibulum lacinia
a.hidden-for-large-up.i-checkheart href='#' Maecenas efficitur accumsan hendrerit.
.section.col-hide-for-medium-only
.item
h3.details-header.icon-checkheart Aliquam
p
| Proin aliquam tortor et aliquam dignissim
strong $10/quam
a.action href='#' In rhoncus orci
.item
h3.details-header.icon-checkheart Aliquam
p
| Proin aliquam tortor et aliquam dignissim
strong $10/quam
a.action href='#' In rhoncus orci
.section
h3.details-header Plan Features
ul.checklist
li.i-check.checked Aenean in lacus lacinia
li.i-check.checked Suspendisse erat dolor
li.i-delete Suspendisse molestie vel
li.i-delete Phasellus viverra mollis
.actions
h3.details-header Nunc mattis molestie libero
a.button.mini.i-openbook Proin pharetra felis
Simple Comparison Card
Phasellus
Nullam metus
Aliquam
Plan Features
Vulputate
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mollis turpis eget mattis congue. Fusce vitae turpis quis mauris maximus tincidunt vel sit amet nibh.
Maecenas efficitur accumsan hendrerit..mod-comparison-table-header
.section.plan-col
| Phasellus
span.i-directup
.section
| Nullam metus
span.i-dropdown
.section.col-hide-hide-for-medium-only
| Aenean sit
span.i-dropdown
.section
| Aliquam
span.i-dropdown
.section.cta-col
.mod-comparison-card.simple
.summary
.plan-col
.com-text-lockup--rate
.value
sup $
| 10
sup .10
small
| /non
.logo-col
img src='holder.js/120x80?auto=yes&text="Logo"'
.rating-col
h4.col-header
' BBB Lorem
i.i-help
strong +A
.stars-col
h4.col-header Pellentesque habitant
.com-rating.compact.narrow
.stars
.i-star.active
.i-star.active
.i-star.active
.i-star.active
.i-star
.cta-col.actions
.mod-example.button.action href='#' Nulla maximus
a.link href='#'
span Show Details
a.button.outline Jargon
.details.visible
.ratings-col
h3.details-header.icon-checkheart Aliquam
p
| Proin aliquam tortor et aliquam dignissim
strong $10/quam
a.action href='#' In rhoncus orci
.features-col
h3.details-header Plan Features
ul.mod-icon-list.small
li.i-check.checked Aenean in lacus lacinia
li.i-check.checked Suspendisse erat dolor
li.i-check.checked Suspendisse molestie vel
li.i-check.checked Phasellus viverra mollis
.description-col
h3.details-header Vulputate
p
| Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mollis turpis eget mattis congue. Fusce vitae turpis quis mauris maximus tincidunt vel sit amet nibh.
a.hidden-for-large-up.i-checkheart href='#' Maecenas efficitur accumsan hendrerit.
Simple Comparison Card - Compare Variant
Phasellus
Nullam metus
Aliquam
Compare
Plan Features
Vulputate
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mollis turpis eget mattis congue. Fusce vitae turpis quis mauris maximus tincidunt vel sit amet nibh.
Nunc mattis molestie libero
Proin pharetra felis.mod-comparison-table-header.with-compare
.compare-col-spacer
.section.plan-col
| Phasellus
span.i-directup
.section.logo-col
| Nullam metus
span.i-dropdown
.section.col-hide-for-medium-only
| Aenean sit
span.i-dropdown
.section
| Aliquam
span.i-dropdown
.section.cta-col
.mod-comparison-card.simple.with-compare.small-only--with-header
.summary-wrapper
.compare-container
.col-header Compare
label.checkbox.isolated type="checkbox" value="on"
input type='checkbox' checked='checked'
span
.summary
.plan-col
.com-text-lockup--rate
.value
sup $
| 10
sup .10
small
| /non
.logo-col
img src='holder.js/120x80?auto=yes&text="Logo"'
.rating-col
h4.col-header
' Level Term
i.i-help
strong Congue
.rating-col.col-hide-for-medium-only
h4.col-header
' BBB Lorem
i.i-help
strong +A
.cta-col.actions
.cta-button.mod-example.button.action href='#' Maximus
.actions-wrapper
a.link href='#'
span Show Details
a.details-button.button.outline Details
a.compare-button.button.outline Compare
.details.visible
.ratings-col
h3.details-header.icon-checkheart Aliquam
p
| Proin aliquam tortor et aliquam dignissim
strong $10/quam
a.action href='#' In rhoncus orci
.features-col
h3.details-header Plan Features
ul.mod-icon-list.small
li.i-check.checked Aenean in lacus lacinia
li.i-check.checked Suspendisse erat dolor
li.i-check.checked Suspendisse molestie vel
li.i-check.checked Phasellus viverra mollis
.description-col
h3.details-header Vulputate
p
| Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mollis turpis eget mattis congue. Fusce vitae turpis quis mauris maximus tincidunt vel sit amet nibh.
.actions
h3.details-header Nunc mattis molestie libero
a.button.mini.i-openbook Proin pharetra felis
.mod-comparison-card
.no-results
h2 In rhoncus orci et ex fermentum
p Vivamus eu aliquet sapien, non fringilla enim.
a.button.info href='#' Show Details
In rhoncus orci et ex fermentum.
Suspendisse molestie nulla maximus congue dolor sed vestibulum.
Consequat augue
Proin aliquam tortor0-000-000-0000
.mod-comparison-card
.no-results
h2 In rhoncus orci et ex fermentum.
p
| Suspendisse molestie
'
a href='#'
i nulla maximus congue
'
| dolor sed vestibulum.
img src='images/no-results-hero.gif'
p
i Consequat augue
p
| Proin aliquam tortor
a.action href='#' 0-000-000-0000
No border variant
In rhoncus orci et ex fermentum
Ut scelerisque nulla at sem suscipit, at porta mi tincidunt.
Vivamus ultriciesMaecenas gravida ex a sed vulputate, sodales cursus risus blandit.
Suspendisse molestie vel sapien at
.mod-comparison-card.no-border
.you-re-unique
h2 In rhoncus orci et ex fermentum
p Ut scelerisque nulla at sem suscipit, at porta mi tincidunt.
p
strong: em Vivamus ultricies
' Maecenas gravida ex a sed vulputate, sodales cursus risus blandit.
.talk-to-expert
img src='images/no-results-hero.gif'
div
h3 Suspendisse molestie vel sapien at
.contact-options
.buttons
.button.outline.mini.left-side.i-phone Nulla maximus congue
.button.outline.mini.left-side.i-chat A consequat augue
.mod-simple-card
| Donec dui est
br
| #00000000
$('.mod-comparison-card .summary').on('click', function(e) {
e.preventDefault();
var $this = $(this),
$details = $this.parents('.mod-comparison-card').find('.details'),
$link_text = $this.find('.link span');
if ($details.hasClass('visible')) {
$link_text.text('Show Details');
} else {
$link_text.text('Hide Details');
}
$details.toggleClass('visible');
});