Card

Cards are used to group and display content in a way that is easily readable.

Class name
Type
card Component Container element
card-title Component Title of card
card-body Component Container for content
card-actions Component Container for buttons
card-bordered
Modifier
Adds border to <card>
image-full
Modifier
The image in <figure> element will be the background
card-normal
Responsive
Applies default paddings
card-compact
Responsive
Applies smaller padding
card-side
Responsive
The image in <figure> will be on to the side
# Card
Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

# Compact card (less padding for `card-body`)
Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

# Card with badge
Shoes

Shoes!
NEW

If a dog chews shoes whose shoes does he choose?

Fashion
Products
# Card with bottom image

Shoes!

If a dog chews shoes whose shoes does he choose?

Shoes
# Card with centered content and paddings
Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

# Card with image overlay
Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

# Card with no image

Card title!

If a dog chews shoes whose shoes does he choose?

# Card with custom color

Card title!

If a dog chews shoes whose shoes does he choose?

# Centered card with neutral color

Cookies!

We are using cookies for no reason.

# Card with action on top

We are using cookies for no reason.

# Card glass
car!

Life hack

How to park your car at your garage?

# Card with image on side
Movie

New movie is released!

Click the button to watch on Jetflix app.

# Responsive card (vertical on small screen, horizontal on large screen)
Album

New album is released!

Click the button to listen on Spotiwhy app.