cards

Wraps inner card shortcodes in a responsive grid

Either call form works, and both produce identical HTML.

Note

This shortcode shadows Hextra’s cards, so its behavior differs from the upstream one of the same name. See the Hextra shortcodes guide for the baseline.

Parameters

Name	Type	Required	Default	Description
`cols`	int	no	`3`	Number of grid columns at the lg breakpoint and up.

Example

{{< cards cols="2" >}}
  {{< card title="First card" link="/docs/first/" subtitle="A first card." >}}
  {{< card title="Second card" link="/docs/second/" subtitle="A second card." >}}
{{< /cards >}}

Rendered output

First cardA first card.

Second cardA second card.

Notes

Emits the same .section-cards container the parent-section auto-card grid uses, so a hand-written grid renders identically to an auto-generated one. The default of 3 matches that container’s own default.

Source: layouts/_shortcodes/cards.html

card checklist

Was this page helpful?