Hero Sections

The hero container creates visually striking landing page headers. It handles split media layouts, background glow effects, and interactive carousels without requiring raw HTML markup.

Container Syntax

::: hero [layout:split|slider] [glow:true|false] # Hero container opener
::: slide # Individual carousel slide opener
# Isomorphic Core Engine
Renders statically and runs client-side without full page reloads.
::: /slide # Explicit slide closer

::: slide # Second slide opener
# AI Context Optimisation
Structure-aware parsing for LLM agents.
::: /slide
::: /hero # Explicit hero closer

Features & Supported Attributes

Parameter / Property Type Description
Layout Variant layout:split | layout:slider split divides into hero text and media areas; slider creates a scroll-snap carousel.
Glow Effect glow:true | glow:false Injects a subtle radial gradient glow behind the hero section.
Sub-Containers ::: slide … ::: /slide Defines individual slides inside a slider layout. Legacy == slide is also supported.
Closing Tags ::: /hero, ::: /slide, ::: Supports explicit named closing tags or generic ::: closers.

Usage Examples

Split Layout

Use the == side separator to divide content into a primary hero text area and a secondary media area:

::: hero layout:split glow:true # Split header layout
# docmd
Isomorphic execution engine. AI-optimised documentation.

::: button title:"Quickstart Guide" url:"../../getting-started/quick-start.md" color:blue

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

docmd

Isomorphic execution engine. AI-optimised documentation.

Quickstart Guide

Slider Layout

Use explicit ::: slide sub-containers to build an interactive carousel of hero content panels:

::: hero layout:slider # Interactive slider container
::: slide # Panel 1
# Isomorphic Core Engine
Renders statically and runs client-side without full page reloads.
::: /slide

::: slide # Panel 2
# AI Context Optimisation
Structure-aware parsing for LLM agents.
::: /slide
::: /hero

Isomorphic Core Engine

Renders statically and executes client-side smoothly.

AI Context Optimisation

Structure-aware parsing for LLM agents.

Hero Design Best Practices

Use glow:true on dark-themed sites for a premium visual effect. Place ::: button elements in the primary text section before == side to guarantee proper mobile stacking order.

Previous Mermaid Diagrams Next URL Embeds