Cards
Hextra cards shortcode for responsive grid card layouts.
1 minute read
Cards display content in a responsive grid. Wrap individual hextra/card shortcodes inside a hextra/cards container.
{{< hextra/cards cols="3" >}}
{{< hextra/card link="https://example.com" title="Title" subtitle="Description" icon="document-text" >}}
{{< hextra/card title="No link" subtitle="This card is not clickable." >}}
{{< /hextra/cards >}}
Container parameters (hextra/cards):
| Parameter | Description | Default |
|---|---|---|
cols | Number of columns at the lg breakpoint | 3 |
Card parameters (hextra/card):
| Parameter | Description | Default |
|---|---|---|
title | Card heading | (required) |
subtitle | Description text below the title | (none) |
link | URL the card links to | (none) |
icon | Icon name from data/hextra/icons.yaml | (none) |
image | Image URL or page-bundle path | (none) |
tag | Badge text shown in the top-right corner | (none) |
tagColor | Bootstrap color name for the tag badge | secondary |
Three-column grid:
Two-column grid with tags:
Card without link
This card has no link — it is not clickable.