Hextra Shortcodes on Exoscale Academy

Callout

Mon, 01 Jan 0001 00:00:00 +0000

Callouts highlight important information with a colored left border and an icon. Five types are supported: default (green), info (blue), warning (orange), error (red), and important (teal).

{{< hextra/callout type="info" >}}
Your message here. Supports **Markdown**.
{{< /hextra/callout >}}

Parameters:

Parameter	Description	Default
`type`	Callout style: `default`, `info`, `warning`, `error`, `important`	`default`
`emoji`	Optional emoji to replace the icon (e.g., `"🚀"`)	(none)

Examples:

This is a default callout. It uses a light-bulb icon and green styling.

This is an info callout. Use it to surface supplementary context.

This is a warning callout. Draw attention to potential issues.

This is an error callout. Indicate something that went wrong.

This is an important callout. Emphasize critical information.

🚀

You can use an emoji instead of the default icon.

Cards

Mon, 01 Jan 0001 00:00:00 +0000

Cards display content in a responsive grid. Wrap individual hextra/card shortcodes inside a hextra/cards container.

{{< hextra/cards cols="3" >}}
 {{< hextra/card link="https://example.com" title="Title" subtitle="Description" icon="document-text" >}}
 {{< hextra/card title="No link" subtitle="This card is not clickable." >}}
{{< /hextra/cards >}}

Container parameters (hextra/cards):

Parameter	Description	Default
`cols`	Number of columns at the `lg` breakpoint	`3`

Card parameters (hextra/card):

Parameter	Description	Default
`title`	Card heading	(required)
`subtitle`	Description text below the title	(none)
`link`	URL the card links to	(none)
`icon`	Icon name from `data/hextra/icons.yaml`	(none)
`image`	Image URL or page-bundle path	(none)
`tag`	Badge text shown in the top-right corner	(none)
`tagColor`	Bootstrap color name for the tag badge	`secondary`

Three-column grid:

Details

Mon, 01 Jan 0001 00:00:00 +0000

A collapsible content block built on the native HTML <details> element with card styling and a rotating chevron indicator.

{{< hextra/details title="Click to expand" >}}
Hidden content here. Supports **Markdown**.
{{< /hextra/details >}}

Parameters:

Parameter	Description	Default
`title`	Summary text (supports Markdown)	(empty)
`closed`	Set to `"true"` to render collapsed	open

Open by default:

Click to expand this section

Here is the hidden content revealed when the summary is clicked.

Steps

Mon, 01 Jan 0001 00:00:00 +0000

Numbered step lists rendered with CSS counters. Place h3–h6 headings inside the shortcode body — each heading becomes a numbered step.

{{< hextra/steps >}}

### First step
Description of the first step.

### Second step
Description of the second step.

{{< /hextra/steps >}}

Example:

Clone the repository 🔗

git clone https://github.com/layer5io/academy-example.git

Install dependencies 🔗

npm install

Start the development server 🔗

hugo server -D

Tabs

Mon, 01 Jan 0001 00:00:00 +0000

Tabbed interfaces powered by Bootstrap 5 nav-tabs. Each hextra/tab is nested inside a hextra/tabs container. Tabs support cross-page sync via localStorage when tabs share the same names.

{{< hextra/tabs >}}
 {{< hextra/tab name="Tab One" >}}Content for tab one.{{< /hextra/tab >}}
 {{< hextra/tab name="Tab Two" >}}Content for tab two.{{< /hextra/tab >}}
{{< /hextra/tabs >}}

Tab parameters (hextra/tab):

Parameter	Description	Default
`name`	Tab label	`Tab <N>`
`selected`	Set to `"true"` to pre-select this tab	`false`

Code samples across languages:

File Tree

Mon, 01 Jan 0001 00:00:00 +0000

An interactive file tree with expandable/collapsible folders. Compose three shortcodes: hextra/filetree/container, hextra/filetree/folder, and hextra/filetree/file.

{{< hextra/filetree/container >}}
 {{< hextra/filetree/folder name="src" >}}
 {{< hextra/filetree/file name="main.go" >}}
 {{< /hextra/filetree/folder >}}
 {{< hextra/filetree/file name="README.md" >}}
{{< /hextra/filetree/container >}}

Folder parameters:

Parameter	Description	Default
`name`	Folder name	(required)
`state`	`"open"` or `"closed"`	`open`

Example:

- - _index.md
  - getting-started.md
- - _index.md
  - first-post.md
- baseof.html
- index.html
hugo.yaml
package.json

Badge

Mon, 01 Jan 0001 00:00:00 +0000

Inline badges with color variants. Supports both positional and named parameter forms.

{{< hextra/badge "Simple badge" >}}
{{< hextra/badge content="Styled" color="green" link="https://example.com" icon="document-text" >}}

Parameters:

Parameter	Description	Default
`content`	Badge text (or use positional param)	(required)
`color`	Color: `gray`, `green`, `blue`, `yellow`, `red`, `purple`, `orange`, `indigo`, `amber`	`gray`
`link`	Optional URL to wrap the badge as a link	(none)
`icon`	Optional icon name from `data/hextra/icons.yaml`	(none)

Color variants:

Default Success Info Warning Error Important Amber

Icon

Mon, 01 Jan 0001 00:00:00 +0000

Renders an inline SVG icon from data/hextra/icons.yaml. Useful for embedding icons in running text.

{{< hextra/icon "light-bulb" >}}

Available icons:

Here are a few icons inline: light-bulb, information-circle, exclamation, folder, document-text.

PDF

Mon, 01 Jan 0001 00:00:00 +0000

Embeds a PDF file in a responsive iframe.

{{< hextra/pdf "sample.pdf" >}}

Parameters:

Parameter	Description	Default
positional	Path to the PDF file (page resource, asset, or absolute path)	(required)

Example:

Include

Mon, 01 Jan 0001 00:00:00 +0000

Includes the rendered content of another page inline. This shortcode must use the percent-delimiter syntax.

{{% hextra/include "include-snippet" %}}

Parameters:

Parameter	Description	Default
positional	Page path relative to the content directory	(required)

Example (included from a separate page):

This paragraph was pulled in from a separate page using the hextra/include shortcode. It demonstrates how you can compose content from multiple sources into a single page.

Included content supports full Markdown formatting.
Lists, code, and emphasis all render correctly.

Term

Mon, 01 Jan 0001 00:00:00 +0000

Wraps a glossary term in an <abbr> tooltip. Hover over the highlighted terms below to see their definitions. Definitions are sourced from data/<lang>/termbase.yaml.

{{< hextra/term "API" >}}

Parameters:

Parameter	Description	Default
`entry`	Glossary abbreviation or full term (named or positional)	(required)

To use this shortcode, create a termbase data file at data/en/termbase.yaml:

- abbr: API
 term: Application Programming Interface
 definition: A set of protocols for building software.

Examples:

Hugo is an SSG that can be controlled via its CLI . Configuration is written in YAML and sites are commonly served through a CDN . Most projects use a CI/CD pipeline to deploy changes automatically. The theme exposes a rich API of shortcodes and partials.

Jupyter

Mon, 01 Jan 0001 00:00:00 +0000

Renders a Jupyter Notebook (.ipynb) as code blocks and Markdown cells.

{{% hextra/jupyter "example-notebook.ipynb" %}}

Parameters:

Parameter	Description	Default
positional	Path or URL to the `.ipynb` file	(required)
`allowUnsafeHTML`	Set to `"true"` to render raw HTML from notebook outputs	`false`

Example:

# A simple Python greeting
message = "Hello from the Academy!"
print(message)

# Generate Fibonacci numbers
def fibonacci(n):
 a, b = 0, 1
 result = []
 for _ in range(n):
 a, b = b, a + b
 result.append(a)
 return result

fibonacci(10)

Asciinema

Mon, 01 Jan 0001 00:00:00 +0000

Embeds an asciinema terminal recording player. The player CSS/JS is loaded from CDN automatically when this shortcode is used.

{{< hextra/asciinema file="demo.cast" >}}

Parameters:

Parameter	Description	Default
`file`	Path or URL to the `.cast` file (also accepts positional param)	(required)
`theme`	Player color theme	`asciinema`
`speed`	Playback speed multiplier	`1`
`autoplay`	Auto-play on load	`false`
`loop`	Loop playback	`false`
`poster`	Poster/thumbnail specification	(none)
`markers`	Comma-separated time markers (e.g., `"5:Intro,10:Demo"`)	(none)

Example: