Semantic Blocks

Zolt uses the "Triple Colon" syntax ::: for semantic containers like alerts, tabs, accordions, and columns.

Callouts (Info Boxes)

Display important information with styled containers.

Types

zolt 
:::info [Information]
This is an informational message.
:::

:::warning [Warning]
This is a warning message.
:::

:::error [Error]
This is an error message.
:::

:::success [Success]
This is a success message.
:::

:::note [Note]
This is a note.
:::
Result
Information

This is an informational message.

Warning

This is a warning message.

Error

This is an error message.

Success

This is a success message.

Note

This is a note.

With Attributes

zolt 
:::info [Custom Title] {color=red}
Styled callout with custom attributes.
:::
Result
Custom Title

Styled callout with custom attributes.

Accordions (Details)

Create collapsible content sections.

Basic Syntax

zolt 
:::details [Click to expand]
Hidden content that appears when clicked.
:::
Result
Click to expand

Hidden content that appears when clicked.

With Attributes

zolt 
:::details [Open by default] {open=true}
This content is visible by default.
:::
Result
Open by default

This content is visible by default.

Example

zolt 
:::details [Installation Steps]
1. Download the installer
2. Run the executable
3. Follow the wizard
:::

:::details [Configuration Options]
- Option A
- Option B
- Option C
:::
Result
Installation Steps
  1. Download the installer
  2. Run the executable
  3. Follow the wizard
Configuration Options
  • Option A
  • Option B
  • Option C

Tabs

Organize content into tabbed sections.

Basic Syntax

zolt 
:::tabs
:::tab [Tab One]
Content of the first tab.
:::

:::tab [Tab Two]
Content of the second tab.
:::

:::tab [Tab Three]
Content of the third tab.
:::
:::
Result

Content of the first tab.

Content of the second tab.

Content of the third tab.

With Default Tab

zolt 
:::tabs {default=Python}
:::tab [JavaScript]
console.log("Hello");
:::

:::tab [Python]
print("Hello")
:::
:::
Result
javascript 
console.log("Hello");
python 
print("Hello")

With Active Tab

zolt 
:::tabs
:::tab [Step 1]
First step content.
:::

:::tab [Step 2] {active=true}
Second step content (shown by default).
:::
:::
Result

First step content.

Second step content (shown by default).

Columns

Create multi-column layouts.

Basic Columns

zolt 
:::columns
:::column
First column content.
:::

:::column
Second column content.
:::
:::
Result

First column content.

Second column content.

Column Widths

zolt 
:::columns
:::column {width=70%}
Main content (70% width).
:::

:::column {width=30%}
Sidebar content (30% width).
:::
:::
Result

Main content (70% width).

Sidebar content (30% width).

Three Columns

zolt 
:::columns {cols=3}
:::column
**Left Column**

Content here.
:::

:::column
**Center Column**

Content here.
:::

:::column
**Right Column**

Content here.
:::
:::
Result

Left Column

Content here.

Center Column

Content here.

Right Column

Content here.

Combined Example

zolt 
:::columns
:::column {width=60%}
### Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

:::details [Learn more]
Additional details that can be expanded.
:::
:::

:::column {width=40%}
### Sidebar

- [Link 1](@link1)
- [Link 2](@link2)
- [Link 3](@link3)

:::info [Note]
Important sidebar information.
:::
:::
:::
Result

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn more

Additional details that can be expanded.

Note

Important sidebar information.

Best Practices

  1. Use appropriate types for callouts (warning vs error)
  2. Keep accordions concise for user experience
  3. Limit tabs to 3-5 for usability
  4. Use columns for side-by-side comparisons
  5. Test layouts across different screen sizes

© 2026 Marmotz