06-00-cards

Placeholder Image cap
Card title

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

Go somewhere

Card Body

This is some text within a card body.

Card Titles, text, and links

Card title
Card subtitle

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

Card link Another link

Card Images

Placeholder Card Image

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


Card List groups 1


Card List groups 2

Featured

Card Kitchen sink (Mix and match multiple content types)

Placeholder Card Image
Card title

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

Card link Another link

Card Header and footer 1

Featured
Special title treatment

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

Go somewhere

Card Header and footer 2

Featured
Special title treatment

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

Go somewhere

Card Header and footer 3

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Card Header and footer 4

Featured
Special title treatment

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

Go somewhere

Card Sizing Using grid markup

Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere

Card Sizing Using utilities

Card title

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

Button
Card title

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

Button

Card Sizing Using custom CSS

Special title treatment

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

Go somewhere

Card Text alignment

Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere

Card Navigation 1

Special title treatment

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

Go somewhere

Card Navigation 2

Special title treatment

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

Go somewhere

Card Images Image caps 1

Placeholder Card Image
Card title

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 title

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

Placeholder Card Image

Card Image overlays

Placeholder Card image
Card title

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 Image Horizontal

Placeholder Card Image
Card title

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 styles - Background and color

Header
Primary card title

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

Header
Secondary card title

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

Header
Success card title

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

Header
Danger card title

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

Header
Warning card title

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

Header
Info card title

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

Header
Light card title

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

Header
Dark card title

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


Card styles - Border

Header
Primary card title

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

Header
Secondary card title

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

Header
Success card title

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

Header
Danger card title

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

Header
Warning card title

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

Header
Info card title

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

Header
Light card title

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

Header
Dark card title

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


Card styles - Mixins utilities

Header
Success card title

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


Card groups 1

Placeholder Card Image
Card title

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

Placeholder Card Image
Card title

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

Last updated 3 mins ago

Placeholder 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 than the first to show that equal height action.

Last updated 3 mins ago


Card groups 2

Placeholder Card Image
Card title

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

Placeholder Card Image
Card title

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

Placeholder 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 than the first to show that equal height action.


Card decks 1

Placeholder Card Image
Card title

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

Placeholder Card Image
Card title

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

Last updated 3 mins ago

Placeholder 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 than the first to show that equal height action.

Last updated 3 mins ago


Card decks 2

Placeholder Card Image
Card title

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

Placeholder Card Image
Card title

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

Placeholder 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 than the first to show that equal height action.


Grid cards 1a

div->class="row row-cols-1 row-cols-md-2"

Placeholder Card Image
Card title

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

Placeholder Card Image
Card title

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

Placeholder Card Image
Card title

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

Placeholder Card Image
Card title

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


Grid cards 1b

div->class="row row-cols-1 row-cols-md-3"

Placeholder Card Image
Card title

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

Placeholder Card Image
Card title

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

Placeholder Card Image
Card title

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

Placeholder Card Image
Card title

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


Grid cards 1c

div->class="row row-cols-1 row-cols-md-3", innerDiv->class="card h-100"

Placeholder Card Image
Card title

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

Placeholder Card Image
Card title

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

Placeholder Card Image
Card title

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

Placeholder Card Image
Card title

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


Card columns

Placeholder Card Image
Card title that wraps to a new line

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Placeholder Card Image
Card title

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

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title
Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

Placeholder Card Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

Card columns can also be extended and customized with some additional code. Shown below is an extension of the .card-columns class to generate a set of responsive tiers for changing the number of columns.

	
	.card-columns {
	  @include media-breakpoint-only(lg) {
		column-count: 4;
	  }
	  @include media-breakpoint-only(xl) {
		column-count: 5;
	  }
	}
	

EoF