Skip to main content

Card

A bordered vertical container. Cards hold any content and can be placed inside a row: for side-by-side layout.

Basic usage

card:
## Card title
Some body text here.
button: Action

Width inside a row

Use a fraction modifier when placing cards inside a row:.

row:
1/3 card:
## First
1/3 card:
## Second
1/3 card:
## Third

Supported fractions: 1/2, 1/3, 2/3, 1/4, 3/4, full.

Vertical centering

Add middle to center the card's content vertically.

row:
1/2 middle card:
centered title: Centered
centered subtitle: Both axes

1/2 card:
## Normal
Content sits at the top.

Background image

Place an img: with a destination as the first child to use it as a background image.

1/2 card:
img: Hero background → /images/banner.jpg
## Card title
Text over the background image.

Without a destination, img: renders as a placeholder instead.

Reference

ModifierOptions
Width1/2, 1/3, 2/3, 1/4, 3/4, full
Alignmentmiddle (vertical centering)
Centeringcentered (horizontal centering on the page)