{{> layouts/head pageTitle="Card Components" }}
{{> layouts/header }} {{> layouts/sidebar activeMenu="ui-elements" activePage="cards" }}

## Card Components

Cards provide a flexible and extensible content container with multiple variants and options.

### Basic Cards

##### Simple Card

This is a simple card with some text content. Cards are built with as little markup and styles as possible.

Action
Card Header

##### Card with Header

Add an optional header within a card. Headers can be styled by adding .card-header to elements.

##### Card with Footer

Add an optional footer within a card. Footers can be styled by adding .card-footer to elements.

### Cards with Images

Image Cap

##### Image Cap

Cards include various options for working with images. Choose from appending "image caps" at either end of a card.

Go somewhere

##### Image Bottom

Place an image at the bottom of the card. Images in cards have no fixed width or height by default.

Image Bottom

##### Image Overlay

Turn an image into a card background and overlay your card's text.

Last updated 3 mins ago

### Colored Cards

Primary Card

##### Primary Background

Use text and background utilities to change the appearance of a card.

Success Card

##### Success Background

Cards include their own variant classes for quickly changing the background-color.

Danger Card

##### Danger Background

Conveying meaning to assistive technologies using color.

Warning Card

##### Warning Background

Use .text-bg-{color} helpers to improve color contrast.

### Border Cards

Primary Border

##### Primary Border Card

Use border utilities to change just the border-color of a card.

Success Border

##### Success Border Card

Note that .text-{color} utilities are also available.

Danger Border

##### Danger Border Card

Mix and match with various content and components.

Warning Border

##### Warning Border Card

Create visually appealing cards with border colors.

### Top Border Cards

##### Total Revenue

# $12,099

5.86%

##### New Orders

# 1,340

12%

##### Bounce Rate

# 28.5%

3.5%

##### Page Views

# 45,320

0%

### Cards with Lists

Featured List

- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

List with Badges

- Messages 14
- Notifications 2
- Updates 1

Recent Activity

###### List group item heading

3 days ago

Some placeholder content.

And some small print.

###### Another item heading

3 days ago

Some more placeholder content.

And some muted small print.

### Special Cards

JD

#### John Doe

UI/UX Designer

Creating beautiful and functional user interfaces with modern design principles.

Follow Message

##### Shopping Cart

3 items

Product 1 $29.99
Product 2 $49.99
Product 3 $19.99

##### Total

##### $99.97

##### Featured Announcement

New features available!

##### Version 2.0 Released

We're excited to announce the release of version 2.0 with many new features and improvements.

- Enhanced Performance
- New Dashboard Layouts
- Improved Mobile Experience

### Card Groups

Card 1

##### Card Group 1

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

Last updated 3 mins ago

Card 2

##### Card Group 2

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

Last updated 3 mins ago

Card 3

##### Card Group 3

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

Last updated 3 mins ago

### Horizontal Cards

Horizontal

##### Horizontal Card Layout

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

##### Right Image Layout

Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.

Learn More

Image Right

{{> layouts/footer }}
{{> layouts/scripts }}