Cards
Flexible containers for grouping content with headers, footers, images, overlays, and layouts.
Basic Card with Image
Card with a placeholder image on top, title, body text, and a call-to-action button.
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content. This is a wider card with supporting text.
Card with Header & Footer
Cards with distinct header and footer sections separated by borders.
Featured
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
2 days ago
Text Alignment Cards
Cards with left, center, and right aligned text.
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Navigation Cards
Cards with tab and pill navigation integrated in the header.
Active Tab Content
This is the content for the active tab. It changes when you select a different tab.
Active Pill Content
Pill navigation uses rounded capsule-shaped buttons for tab switching.
Colored Background Cards
Cards with solid background colors and white text for strong visual emphasis.
Accent Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Success Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Info Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Border-Styled Cards
Cards with colored top borders and tinted headers for subtle categorization.
Accent
Some quick example text to build on the card title and make up the bulk of the content.
Success
Some quick example text to build on the card title and make up the bulk of the content.
Warning
Some quick example text to build on the card title and make up the bulk of the content.
Danger
Some quick example text to build on the card title and make up the bulk of the content.
Info
Some quick example text to build on the card title and make up the bulk of the content.
Card with Actions
Card headers with interactive collapse, expand, and close icon buttons.
Collapsible Card
This card can be collapsed or closed using the header action buttons. Try clicking the chevron to collapse or the X to dismiss.
Another Collapsible Card
This card can be collapsed or closed using the header action buttons. Try clicking the chevron to collapse or the X to dismiss.
Card Group
Three cards joined side by side in a connected group layout with shared borders.
Card One
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card Two
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card Three
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content.
Last updated 3 mins ago
Card Deck
Three equal-width cards with consistent spacing between them.
Card One
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card Two
This card has supporting text below as a natural lead-in to additional content.
Last updated 5 mins ago
Card Three
This is a wider card with supporting text below as a natural lead-in to additional content.
Last updated 8 mins ago
Horizontal Card
Card with image on the left and content on the right in a horizontal layout.
Horizontal Card Layout
This is a wider card with supporting text to the right of the image. The image sits on the left and the content fills the remaining space. Great for media listings and feature highlights.
Last updated 3 mins ago