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.
Centre
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.
Ga (Irish language)
Inline Irish language text with the correct font and lang="ga" attribute:
He greeted her with Dia duit, a chara as she entered.
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 and optional attribution:
Be yourself; everyone else is already taken.
A quote without attribution still gets the decorative marks.
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:
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.)