Title here
Summary here
Shortcodes Overview
Shortcodes let you use reusable template snippets inside Markdown content.
In Thulite, shortcode templates live in layouts/_shortcodes/ and are called from page content with Hugo shortcode syntax.
Install the VS Code extension for shortcode snippets and completions: Hugo Shortcodes for VS Code.
Doks
Callout
Display highlighted notes, warnings, and other notices inline with your content.
Card
Display content in a styled card with an optional icon, color, and body text.
Link Card
Display a clickable card that links to another page or URL.
Card Grid
Arrange cards side by side in a responsive grid layout.
Details
Display a collapsible disclosure widget with a summary and hidden body content.
Preview
Wrap shortcode output in a labeled preview box to show a live render alongside its code.
Steps
Display a numbered list of steps with styled step indicators.
Tabs
Display content in a tabbed interface using tabs and tab shortcodes.
Tree
Render a file and folder tree from a Markdown list with optional SVG icons.
Video
Embed a self-hosted video using the HTML video element.
Integrations
Images
img
Render a responsive image with lazy loading and LQIP support.
picture
Render a responsive image with format negotiation (e.g. WebP with JPEG fallback).
figure
Render a responsive, lazy-loaded image with an optional caption.
SVGs
SVGs
Embed SVG files directly in your Markdown content.
Icons
Insert icon symbols inline with a simple shortcode.
Custom shortcodes
Create a template in layouts/_shortcodes/.
Example file: layouts/_shortcodes/note.html
<div class="callout callout-info">{{ .Inner | markdownify }}</div>Use it in Markdown:
{{< note >}}
Use shortcodes when plain Markdown is not enough.
{{< /note >}}Keep shortcodes focused and reusable. If logic becomes complex, move it to a partial and call that from the shortcode.
Learn more
Shortcodes
Write and use Hugo shortcodes in content files.
Shortcode templates
Build shortcode templates and pass arguments.