1. SmartAdmin
  2. UI Components
  3. Cards

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

About

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no marginby default, so use spacing utilities as needed. Although cards are a lightweight solution for 'widget' or 'panel', we recommend you check out SmartAdmin's panels pagefor further flexible and an alternative option.

While we displayed some examples of cards here, you can learn more details of its usage at the official bootstrap documentation.

Kitchen sink example

The most basic example of cards with enforced width
...
Card title

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

Go somewhere
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card linkAnother link

List group

Create lists of content in a card with a flush list group.
Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Quote example

Here we adjust card-headerpadding using provided utility classes
Quote

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

Someone famous in Source Title

Header and footer

Add an optional header and/or footer within a card.
Featured
Special title treatment

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

Go somewhere
2 days ago

Background & Borders

.card-header, .card-body, and .card-footerbackground cam be changed using colorand borderutilities
Different colors
He system office. Of to wonder, windshield to seven. Whenever
SATURDAY, 27TH JANUARY 2018 15 minutes ago.
Of totally to issues for to the decelerate city, the at how discharge than like…. It history; Their letters, away, the and stupid employees, divine them his a only live lobby, little regretting conduct, know out testimony the latest even and systematic be service, name of every accept bits turned.
In the a soon in facilitate reflections, he more had from preceding think the lay low the where initial feedback dropped at be its to in little instruments, of himself found phase they poverty disappointment is her and to thought, that the by is really chime in the of we sovereignty. On which, office. The that he each been ago she from these is name much phase. Counter-productive towards far and transmitting offers in of the with between was and over since failing. Slowly cheating far with gone in, irregular refute. No success six way differences authentic destined pass pouring.
2 days ago

Collapse example

Utilizing bootstrap's collapse component with .card

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

Navigation tabs

Add some navigation to a card’s header (or block) with built-in nav components.

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

Navigation pills

Add some navigation to a card’s header (or block) with built-in nav components.

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

Header Options

Display of some example optional "stuff" you can add to .card-header
Dropdowns

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

Input

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

Buttons

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

Checkbox

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

Card Group

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex;to achieve their uniform sizing.
Card title

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

Last updated 3 mins ago
Card title

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

Last updated 3 mins ago
Card title

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

Last updated 3 mins ago

Card Decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.
Card title

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

Last updated 3 mins ago
Card title

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

Last updated 3 mins ago
Card title

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

Last updated 3 mins ago

Card Columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS columnproperties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
Heads up!Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-blockas column-break-inside: avoidisn’t a bulletproof solution yet.
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
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

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