Shortcode Showcase
This page demonstrates every shortcode available in the First Folio theme. Use it as a visual reference.
Callout
Four built-in types plus custom styling:
This is a tip callout — use it for helpful suggestions.
This is an info callout — use it for informational notes.
This is an alert callout — use it for critical information.
This is a warning callout — use it for cautionary notes.
This callout has a custom title and background colour.
With float positioning:
This callout floats to the right of the content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. The callout sits alongside this paragraph text, demonstrating the float position parameter.
center
Colorbold
Inline highlighted text in the theme’s secondary accent colour:
This recipe calls for really good butter — the kind from a farmers’ market.
Without the underline: no underline here.
Details
Collapsible content using the HTML <details> element:
Click to expand this section
This content is hidden by default. It can contain bold text, italic text, code, and other Markdown formatting.
- List items work too
- As do other block elements
Dialogue
For plays and screenplays — character name in small caps with optional parenthetical:
ELENA
Have you seen the forecast?
MARCUS (checking his phone)
Rain again. Third day running.
ELENA (sighing)
At least the garden is happy.
Direction
Stage directions for dramatic scripts:
The cafe. Morning light through rain-streaked windows. ELENA and MARCUS at a corner table.
Pause. The sound of rain intensifies.
Gallery
Displays page image resources as a responsive grid with lightbox:
Img
The img shortcode embeds a page resource image with positioning, caption, and optional blur:
This paragraph demonstrates the img shortcode floated to the right. The image sits alongside the text, wrapping naturally. The shortcode generates responsive thumbnails with WebP support, matching the gallery behaviour.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
With the noborder parameter to remove the accent border:
Poem
Preserves line breaks exactly as written — essential for verse:
Popquote
Expandable quote with a summary line:
The best time to plant a tree was twenty years ago…
The best time to plant a tree was twenty years ago. The second best time is now.
This shortcode is useful for long quotations that would interrupt the flow of an article. The reader can choose to expand it.
Quote
Pull-quote with decorative quotation marks. Two paths: the back-compat attribution= for a single-line credit, and the structured-fields path for richer testimonial layouts (name, role, organisation, photo, featured modifier).
Back-compat — single-line attribution
Be yourself; everyone else is already taken.
Unattributed
A quote without attribution still gets the decorative marks.
Structured — name only
There and back again, and many adventures along the way.
Structured — name and role
When you have eliminated the impossible, whatever remains, however improbable, must be the truth.
Structured — name and organisation
Books! And cleverness! There are more important things — friendship and bravery.
Structured — name, role, organisation, page-resource photo, featured
The road goes ever on and on, down from the door where it began.
AragornRanger of the North, Heirs of IsildurStructured — photo from site-root path
All we have to decide is what to do with the time that is given us.
GandalfWizardStructured — photo from absolute URL
It’s a dangerous business, going out your door.
Bilbo BagginsHobbit of the ShireEdge case — unresolvable photo emits a build warning and omits the <img>
The filename intentionally-missing-file.jpg below does not exist in the page bundle; it’s the demo for the unresolvable-photo path. Running hugo or hugo server will print a WARN line on stderr referencing the filename. The <img> element is omitted from the rendered HTML — the attribution still renders, just without a photo. This warning is intentional and exercises RT-54.11 in the theme’s regression suite.
Hey dol! Merry dol! Ring a dong dillo!
Back-compat precedence — attribution= set alongside structured fields uses attribution=
When both are set on the same shortcode, attribution= wins and the structured fields (including any photo) are ignored. Sites migrating from the legacy form can leave both during the transition.
The truth is rarely pure and never simple.
Raw HTML
Passes HTML through without Markdown processing:
This is raw HTML passed through the rawhtml shortcode.
Section List
Renders navigation links to site sections:
With a limit parameter to show recent items per section:
Side-by-Side
Places two items side by side on desktop, stacked on mobile:
Stats
A pair of shortcodes for portfolio / consultancy “stats rows” — a number paired with a short label. Use stat standalone, or wrap several in stats for a responsive grid.
Standalone
A single stat block, used inline:
Prefix and suffix
Optional prefix and suffix add small adornments around the number:
Wrapped — auto-fit responsive grid
The default {{< stats >}} wrapper lays children out with auto-fit columns. The layout reflows to fewer columns as the viewport narrows:
Wrapped — fixed columns
Pass columns=N to fix the column count regardless of viewport. Useful when the row would otherwise reflow to a layout that looks unbalanced:
Video
Embeds a local video file with HTML5 player controls:
{{< video "/videos/sample.mp4" >}}(Place a video file at static/videos/sample.mp4 to see this in action.)
Contact Form
Self-hosted contact form with Cloudflare Turnstile CAPTCHA:
{{< contactform newsletter="true" >}}(Requires Cloudflare Worker configuration. See docs/contactform.md for setup.)
Formspree
A simpler contact form using Formspree as the backend:
{{< formspree id="your-form-id" >}}(Replace with your actual Formspree form ID.)