Writing & Markdown
Cards
Create navigation and informational card grids with links, icons, and descriptions using the Hugo cards shortcode.
Usage
{{</* cards */>}}
{{</* card url="../" title="Learn Shortcodes" icon="academic-cap" */>}}
{{</* card url="" title="Plain text card (no link)" */>}}
{{</* /cards */>}}Cards can be shown as links (with url) or as plain text.
Parameters
cards (wrapper)
The cards shortcode wraps one or more card items into a responsive grid.
card (item)
| Parameter | Type | Description |
|---|---|---|
title | string | Required. Title heading for the card |
url | string | Link destination (makes the card clickable) |
icon | string | Icon name from Hero Icons |
subtitle | string | Subtitle text (supports Markdown) |
Examples
Navigation Cards
{{</* cards */>}}
{{</* card url="/writing/buttons/" title="Buttons" icon="cursor-arrow-rays" */>}}
{{</* card url="/writing/media/" title="Media" icon="play" */>}}
{{</* card url="/writing/charts/" title="Charts" icon="chart-bar" */>}}
{{</* /cards */>}}Info Cards (no links)
{{</* cards */>}}
{{</* card title="Fast" icon="bolt" subtitle="Built for speed" */>}}
{{</* card title="Secure" icon="shield-check" subtitle="Security first" */>}}
{{</* /cards */>}}Was this page helpful?
Icons
Insert inline SVG icons from Hero Icons and academic icon packs using the Hugo icon shortcode — with size and color options.
Steps
Display numbered step-by-step sequences for tutorials and how-to guides using the Hugo steps shortcode.
From the makers of
© 2026 Lore Labs.