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

Modifier	Options
Width	1/2, 1/3, 2/3, 1/4, 3/4, full
Alignment	middle (vertical centering)
Centering	centered (horizontal centering on the page)