Content
Containers
Hero Sections

The hero container is designed for creates professional, visually-striking “landing page” headers. It handles complex CSS requirements like Split Layouts, Glow Effects, and Sliders while maintaining a minimalist authoring experience.

Basic Syntax

By default, the hero centers its content, making it perfect for banners and simple headlines.

::: hero
# Build Faster.
The minimalist, zero-config documentation generator.

::: button "Get Started" /intro color:blue
:::

Advanced Layouts

The hero container supports specialized flags to control its structural behavior.

Flag	Effect
`layout:split`	Divides the hero into a Text area (left) and a Media area (right). Stacks vertically on mobile.
`layout:slider`	Transforms the hero into a horizontal slider with scroll-snap behavior.
`glow:true`	Injects a subtle, radial gradient glow in the background.

The Split Layout (`== side`)

Use the == side separator to define what content goes in the primary text area and what goes in the secondary “side” area (typically an image or a video embed).

::: hero layout:split glow:true
# docmd 2.0
Isomorphic execution. AI-optimized.

::: button "Quickstart" /getting-started/basic-usage color:blue

== side
::: embed "https://www.youtube.com/watch?v=0CSyIBHQy9g"
:::

docmd 2.0

Isomorphic execution. AI-optimized.

Quickstart

The Slider Layout (`== slide`)

Create an interactive hero slider by using the == slide separator between different content nodes.

::: hero layout:slider
== slide
# Isomorphic Core
The engine renders everywhere.
== slide
# AI Optimization
Built for the LLM era.
:::

Isomorphic Core

The engine renders everywhere.

AI Optimization

Built for the LLM era.

Responsive Behavior

The hero container is fully responsive by default:

On Desktop, layout:split displays side-by-side.
On Mobile, it automatically transitions to a centered, vertical stack to ensure optimal readability.

Best Practices

Glow Effects: Use glow:true sparingly on dark mode sites for a premium “neon” feel.
Media Types: The “side” content of a split layout is perfect for the ::: embed component, high-quality PNGs, or raw <video> tags.
CTA Placement: Always place ::: button elements within the primary “Hero Copy” section (before the == side separator) to ensure they are the first thing users see on mobile.