Shortcodes Demo · Pocket Hugo

This page groups together several practical shortcodes that work well in a content-first Hugo theme. They are intentionally simple, easy to copy, and suitable for essays, notes, and documentation pages.

Fold

Use fold when a section should stay readable without taking too much vertical space.

{{< fold "Why this shortcode exists" >}}
This hidden block is rendered inside a native `<details>` element.
{{< /fold >}}

Why this shortcode exists

This hidden block is rendered inside a native <details> element, so it works without JavaScript and still feels natural in long-form writing.

Note

Use note for callouts such as tips, warnings, or side remarks.

{{< note type="info" title="Content-first" >}}
Pocket Hugo Theme keeps callouts readable without making them look like app UI.
{{< /note >}}

Content-first

Pocket Hugo Theme keeps callouts readable without making them look like app UI.

Tip

Shortcodes like this are useful for tutorials, changelogs, and writing guides.

Experimental

If you add custom shortcodes, keep them small and easy to understand. Readers should not need to decode the layout before reading the content.

Badge

Badges are useful for compact status labels inside paragraphs.

{{< badge "Stable" >}}
{{< badge text="Optional" type="info" >}}
{{< badge text="Experimental" type="warn" >}}

Stable Optional Experimental

Button

Use button when you want a stronger inline call to action than a normal text link.

{{< button href="/guide/" label="Open the Guide" >}}
{{< button href="/links/" label="Browse Links" style="ghost" >}}

Open the Guide Browse Links

Video and audio

These shortcodes keep common media embeds consistent with the rest of the theme.

{{< video src="/media/demo.mp4" title="Local video" >}}Caption{{< /video >}}
{{< audio src="/media/demo.mp3" title="Audio clip" >}}Caption{{< /audio >}}
{{< youtube id="rdwz7QiG0lk" >}}YouTube embed{{< /youtube >}}
{{< bilibili bvid="BV1xx411c7mu" >}}Bilibili embed{{< /bilibili >}}

A plain HTML5 video wrapper with the theme’s default radius and spacing.

HTML5 audio

A matching audio player for short clips, podcasts, or spoken notes.

A YouTube embed wrapped in the same media style.

A Bilibili embed using the same responsive frame.

Timeline

Use timeline when you want a process, update log, or historical sequence.

{{< timeline >}}
{{< timeline-item date="2026-01" title="Planning" >}}Outline the scope.{{< /timeline-item >}}
{{< timeline-item date="2026-02" title="Build" >}}Ship the first version.{{< /timeline-item >}}
{{< /timeline >}}

2026-01

Planning

Outline the first version of the feature and keep the data format small.

2026-02

Build

Add a simple implementation that fits long-form content rather than app-like UI.

2026-03

Polish

Tighten copy, spacing, and multilingual examples.

Columns

Use columns when two ideas need to be compared side by side.

{{< columns >}}
{{< column >}}Left side{{< /column >}}
{{< column >}}Right side{{< /column >}}
{{< /columns >}}

Better for

short comparisons
feature summaries
before/after notes

Avoid for

long essay paragraphs
deeply nested lists
content that must stay linear

Gallery

Use gallery when one article needs a compact image grid without writing a separate Markdown image block for every file.

{{< gallery pattern="sample*.webp" columns="3" >}}

The shortcode reads matching image files from the current page bundle, renders them as a responsive grid, and reuses the built-in lightbox when you click a photo.

Why this matters

These shortcodes are not meant to turn the theme into a component library. They simply give writers a few reusable building blocks that fit the theme without adding a framework layer.

Contents