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 Utility Adds border to <card>
image-full Utility 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
Examples
card
Preview
HTML

Top image
NEW

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.

Image bottom

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.

Small image file

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.

Article
Photography
card with shadow, image-full, small image size
Preview
HTML

shadow, center, padding

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.

Image overlay

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.

Accent color

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.

responsive compact (card-compact lg:card-normal)
Preview
HTML

This card is compact only on small screens

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.

card with side image
Preview
HTML

Horizontal

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.

Horizontal
NEW

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.

card without image
Preview
HTML

No Images

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.

card with out image
Preview
HTML

no border with shadow

Rerum reiciendis beatae tenetur excepturi

no border with shadow

Rerum reiciendis beatae tenetur excepturi

glass card
Preview
HTML

Glass

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.

mini cards
Preview
HTML

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos.

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos.

Rerum reiciendis beatae tenetur excepturi aut pariatur est eos.