Card Documentation
- Card Horizontal (.card--horizontal): Displays the card in a Horizontal layout with image on the left and content on the right.
- Card Horizontal Reverse (.card--horizontal-reverse): Displays the card in a reversed horizontal card layout with the content on the left and image on the right.
Vertical (Default) Card
Vertical (Default) Card (Two Column)
Vertical (Default) Card (Three Column)
Vertical (Default) Card (Four Column)
Horizontal Card
Horizontal Card Reverse
Horizontal Card (Two Column)
Card - Data Cards
There will be graceful degradation here, and browsers that do not support text-stroke will have the text fall back to solid Navy.
Currently on browser effected is IE 11.
80%
Lorem ipsum dolor sit amet conse ctetur adipiscing elit sed do eiusm.
90+
Lorem ipsum dolor sit amet conse ctetur adipiscing elit sed do eiusm.
Created
Lorem ipsum dolor sit amet conse ctetur adipiscing elit sed do eiusm.
Card - Modal
Vertical Card with Icon and label
This card has no button because the "Link Name" was left empty.
Modal #1
Co-founder & CEO
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos quo autem numquam, ratione corrupti culpa.
Vertical Card with Icon and label
This card has no button because the "Link Name" was left empty.
Modal #2
Co-founder & CEO
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos quo autem numquam, ratione corrupti culpa.
Card Listing With Highlight
Animation Card (Two Column)
Card Listing Documentation
- Card Listing (.card--listing): Displays a card as a listing element
- Has Tag (.has-tag): The class .has-tag must be added to the .content-container if there is a tag being added to the card, this will provide the display adjustment for the icon tto be displayed to the left of the listing item.
- Card Listing with Image (.card--listing--image): Displays a card listing to have all content on the left, and an optional image on the right.