Cards

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Card with Footer

Some quick example text to build on the card title.

2 days ago
Cards with Images
Card image
Card with Image Top

Some quick example text to build on the card title and make up the bulk of the card's content.

Read More
Card with Image Bottom

Some quick example text to build on the card title and make up the bulk of the card's content.

View Details
Card image
Card image
Image Overlay

This is a card with supporting text below as a natural lead-in.

Last updated 3 mins ago

Card Styles
Primary Header

Some example text to show the card content.

Success Header

Some example text to show the card content.

Danger Header

Some example text to show the card content.

Primary Border

Some example text to show card styling with borders.

Success Border

Some example text to show card styling with borders.

Warning Border

Some example text to show card styling with borders.

Background Colors
Primary Card

Some text to show the card content with a primary background.

Secondary Card

Some text to show the card content with secondary background.

Success Card

Some text to show the card content with success background.

Danger Card

Some text to show the card content with danger background.

Warning Card

Some text to show the card content with warning background.

Info Card

Some text to show the card content with info background.

Light Card

Some text to show the card content with light background.

Dark Card

Some text to show the card content with dark background.

Cards with List Groups
List Group Card
  • An item
  • A second item
  • A third item
With Icons
  • Messages 12
  • Notifications 3
  • Settings
Mixed Content

Some text before the list.

  • First item
  • Second item
Card link Another link
Horizontal Cards
Card image
Horizontal Card

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Image on Right

This card has the image positioned on the right side instead of left.

Learn More
Card image
Card Grid
Card image
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago
Card image
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago
Card image
Card title

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
Real-World Examples
Profile
Sarah Johnson

UI/UX Designer

152
Posts
2.5k
Followers
180
Following
Product -25%
Wireless Headphones

Electronics

(245 reviews)
$149.99 $199.99
Monthly Revenue

$45,250

12.5%

Compared to $40,200 last month

Target: $50,000 90% achieved