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
bordered Utility Adds border
compact Utility Less padding
card-side Utility The image in <figure> will be on to the side
image-full Utility The image in <figure> element will be the background
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.

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.