Cards

Card Blocks

This is some text within a card block.
This is some text and button within a card block.Button
This is some text and icon within a card block.star
 

Default Cards

Card title

Left-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button

Card title

Center-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button

Card title

Right-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button

Cards with icons

favorite

Card title

Left-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
explore

Card title

Center-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
home

Card title

Right-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button

Cards with Header and Footer

Text Aligned-left

Card Title

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

Button
Text Aligned-center

Card Title

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

Button
Text Aligned-right

Card Title

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

Button

Cards with image top

card-image-cap

Card title

Left-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
card-image-cap

Card title

Center-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
card-image-cap

Card title

Right-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button

Cards with image bottom

Card title

Left-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
card-image-cap

Card title

Center-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
card-image-cap

Card title

Right-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
card-image-cap

Cards with image overlay

card-img-overlay

Card title

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

Last updated 3 mins ago

card-img-overlay

Card title

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

Last updated 3 mins ago

card-img-overlay

Card title

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

Last updated 3 mins ago

Card Colors

Inverse Card

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

Button
Primary Card

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

Button
Success Card

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

Button
Info Card

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

Button
Warning Card

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

Button
Danger Card

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

Button

Card Outline Colors

Inverse Card

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

Button
Primary Card

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

Button
Success Card

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

Button
Info Card

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

Button
Warning Card

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

Button
Danger Card

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

Button

Card Shapes

Default Card

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

Button
Rectangle Card

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

Button
Rounded Card

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

Button