Markdown Containers

Containers are full-width Markdown sections with a background, optional image layer, top and bottom raccord masks, motion, borders, filters and responsive visibility.

Syntax

Form	Syntax	Usage
Block	`::: container { bg="#0f172a" }`	Create a visual section.
Predefined	`predef=dune-header`	Use a complete preset.
Background	`bg`, `background`, `image`, `mask`	Color, gradient, image, or image mask.
Raccord masks	`mask-top`, `mask-bottom`	Shape the top or bottom edge.
Mirror / invert	`mask--mirror`, `mask--mirroir`, `mask-*-invert`	Mirror or invert a top/bottom mask when a preset needs it.
Spacing	`pad`, `pad-x`, `pad-y`	Control inner spacing.
Layout	`align`, `valign`	Position the inner Markdown.
Surface	`radius`, `border-*`, `shadow`	Round, border, or shadow the surface.
Motion	`anim`, `duration`, `delay`	Entrance or exit animation.
Visibility	`visible`, `hidden`, `hide-mobile`	Responsive display.
Config	`config=true`, `config=false`	Show or hide resolved preset config chips.

SyntaxResult

::: container { bg="linear-gradient(135deg, #0f766e, #1d4ed8)" align=center valign=middle mask-top=dunes-gray mask-bottom=wave-gray }
## One masked section

Any Markdown can live here.
:::

One masked section

Any Markdown can live here.

Predefined Container

Use predef=type to choose a complete preset. Use predef=type_color to force a gradient color such as ink-accent, deep-bright, panel-soft, ink-header, ink-teal, or night-warning.

Hero calmChapter breakRounded calloutSoft borderedCTA haloWide tableSimpleSimple borderSimple invisibleBorder rounded cornersRounded corner spiralSide capsule rightSide capsule leftLateral double wavesOrganic reliefDunes and waveletsCaves and mountainsSwell passageDune headerDouble wavesCloud driftGray currentCenter notch accentFan gradient

Hero calm

Centered opener with a diagonal lower raccord.

Configpredef=hero-calmheight=420bg=gradientmask-bottom=diagonal-wave mirroir-yanim=fade-in

Chapter break

Right-aligned divider with a mirrored inverted top and an inverted lower curve.

Configpredef=chapter-breakheight=280bg=gradientmask-top=triangle mirroir-y invertmask-bottom=curve invertanim=fade-in

Rounded callout

Rounded bordered message with a light shadow.

Configpredef=rounded-calloutheight=300bg=gradientradius=1.5remshadow=lightborder-width=1pxanim=tilt-in

Soft bordered

Quiet stretched surface with opacity and a soft border.

Configpredef=soft-borderedheight=autobg=gradientradius=1.4remshadow=lightborder-width=1pxanim=zoom-in

CTA halo

Centered call to action with a halo shadow.

Configpredef=cta-haloheight=320bg=gradientmask-bottom=clouds-gray mirroir-yshadow=haloanim=rotate-in

Wide table

Stretched surface for dense content.

Configpredef=wide-tableheight=autobg=gradientradius=1remshadow=long-dropanim=fold-up

Simple

Flat preset-gradient section.

Configpredef=simpleheight=300bg=gradient

Simple border

Flat gradient with a visible border.

Configpredef=simple-borderheight=300bg=gradientshadow=lightborder-width=2px

Simple invisible

Transparent layout container.

Configpredef=simple-invisibleheight=autobg=transparent

Border rounded corners

Rounded bordered surface with exterior contrast.

Configpredef=border-rounded-cornersheight=340bg=gradientradius=2remshadow=lightborder-width=2pxoutside-gap=0.85remoutside-bg=trueanim=flip-up

Rounded corner spiral

Rounded organic surface with spiral motion.

Configpredef=rounded-corner-spiralheight=340bg=gradientradius=clamp(3rem, 8vw, 6rem)shadow=lightanim=spiral-in

Side capsule right

Wide capsule aligned to the right side.

Configpredef=side-capsule-rightheight=430bg=gradientanim=slide-right

Side capsule left

Wide capsule aligned to the left side.

Configpredef=side-capsule-leftheight=430bg=gradientanim=slide-left

Lateral double waves

Theme accent block with quiet side-wave shading.

Configpredef=lateral-double-wavesheight=360bg=theme primaryradius=1.5remshadow=lightanim=fade-in

Organic relief

Gray dunes above and a gray swell below.

Configpredef=organic-reliefheight=300bg=gradientmask-top=dunes-graymask-bottom=swell-gray mirroir-yshadow=long-dropanim=slide-up

Dunes and wavelets

Dunes above, wavelets below.

Configpredef=dunes-and-waveletsheight=410bg=gradientmask-top=dunes-graymask-bottom=gray-wavelets mirroir-yanim=blur-in

Caves and mountains

Inverted caves-gray motif above and mountain edge below.

Configpredef=caves-and-mountainsheight=420bg=gradientmask-top=caves-gray invertmask-bottom=mountains-gray mirroir-yanim=fold-down

Swell passage

Right-aligned passage with a lower swell.

Configpredef=swell-passageheight=380bg=gradientmask-bottom=swell-gray mirroir-yanim=roll-left

Dune header

Auto-height organic header with mirrored bottom wave.

Configpredef=dune-headerbg=gradientmask-top=dunes-graymask-bottom=wave-gray mirroir-yanim=roll-right

Double waves

Theme block with gray waves and wavelets.

Configpredef=double-wavesheight=300bg=theme primarymask-top=gray-wavesmask-bottom=gray-wavelets mirroir-yanim=slide-down

Cloud drift

Left-aligned passage with cloud and swell masks.

Configpredef=cloud-driftheight=360bg=gradientmask-top=clouds-graymask-bottom=swell-gray mirroir-yanim=slowmotion

Gray current

Broad gray wave rhythm.

Configpredef=gray-currentheight=420bg=gradientmask-top=gray-wavesmask-bottom=swell-gray mirroir-yanim=nervous-in

Center notch accent

Solid accent with an inverted centered upper notch.

Configpredef=center-notch-accentheight=330bg=theme accentmask-top=center-notch-gray invertmask-top-size=clamp(1.75rem, 4vw, 3.25rem)anim=flip-down

Fan gradient

Layered fan background with a curved upper transition and an inverted mirrored fan lower edge.

Configpredef=fan-gradientheight=340bg=fan-gradientmask-top=curve-gray mirroir-ymask-bottom=fan-gray mirroir-y invertshadow=long-dropanim=tilt-in

Solid Background

SyntaxResult

::: container { bg="#2563eb" align=center valign=middle height=260 }
## Solid background

The section uses one flat color.
:::

Solid background

The section uses one flat color.

Gradient Background

SyntaxResult

::: container { bg="linear-gradient(135deg, #0ea5e9 0%, #6366f1 58%, #7c3aed 100%)" align=center valign=middle height=300 }
## Gradient background

Any valid CSS background value can be used.
:::

Gradient background

Any valid CSS background value can be used.

Background With Raccord

SyntaxResult

::: container { bg="#4f46e5" align=right valign=middle height=280 mask-top=triangle mask-bottom=curve }
## Triangle and curve
:::

Triangle and curve

Image Background And Gray Mask

SyntaxResult

::: container { bg="#2563eb" image="/images/parallax/mountains-back.svg" mask="/images/container/mask-radial.svg" align=left valign=middle height=420 mask-bottom=diagonal-wave }
## Masked image

- `image` defines the background layer.
- `mask` applies the image mask.
:::

Masked image

image defines the background layer.
mask applies the image mask.

Lateral Raccords

SyntaxResult

::: container { predef=lateral-double-waves config=true }
## Lateral raccords

The lateral style is handled by the predefined surface.
:::

Lateral raccords

The lateral style is handled by the predefined surface.

Configpredef=lateral-double-wavesheight=360bg=theme primaryradius=1.5remshadow=lightanim=fade-in

Large Lateral Round

SyntaxResult

::: container { predef=side-capsule-right config=true }
## Large lateral round

The wide rounded side is handled by the capsule preset.
:::

Large lateral round

The wide rounded side is handled by the capsule preset.

Configpredef=side-capsule-rightheight=430bg=gradientanim=slide-right

Border And Rounded Corners

SyntaxResult

::: container { bg="linear-gradient(135deg, #1d4ed8 0%, #0f172a 100%)" align=center valign=middle height=280 border-width=4px border-color="rgba(191, 219, 254, 0.82)" radius=2rem }
## Colored border

The transparent outside area remains visible around the rounded edge.
:::

Colored border

The transparent outside area remains visible around the rounded edge.

Content Filters

SyntaxResult

::: container { bg="#334155" align=center valign=middle height=260 filter-sepia=1 filter-opacity=50% }
## Sepia and 50% opacity

Filters affect the inner Markdown content.
:::

Sepia and 50% opacity

Filters affect the inner Markdown content.

Responsive Visibility

SyntaxResult

::: container { bg="#0ea5e9" align=center valign=middle height=180 visible=mobile }
## Smartphone only
:::

::: container { bg="#14b8a6" align=center valign=middle height=180 visible=tablet }
## Tablet only
:::

::: container { bg="#6366f1" align=center valign=middle height=180 visible=desktop }
## Desktop only
:::

Smartphone only

Tablet only

Desktop only

Animated Section

SyntaxResult

::: container { bg="linear-gradient(135deg, #0f766e, #111827)" align=center valign=middle height=300 mask-bottom=gray-wavelets anim=slide-up duration=2s }
## Animated section

Free Markdown content.
:::

Animated section

Free Markdown content.

Complete Section

SyntaxResult

::: container { bg="linear-gradient(135deg, #06b6d4 0%, #3b82f6 48%, #8b5cf6 100%)" align=stretch valign=middle height=360 mask-top=dunes-gray mask-bottom=clouds-gray shadow=light }
### Complete section

| Element | Role |
| --- | --- |
| Background | Color, gradient, image and mask |
| Shadow | Optional depth behind the section |
| Transition | Top and bottom masks |

:::

Complete section

Element	Role
Background	Color, gradient, image and mask
Shadow	Optional depth behind the section
Transition	Top and bottom masks

Raccords

Raccords are now rendered as one CSS mask on the container surface. Use mask-top=<shape> and mask-bottom=<shape>. The top and bottom can be different, and the bottom is mirrored automatically.

SyntaxResultPreview

::: container { bg="linear-gradient(135deg, #0f766e, #1d4ed8)" mask-top=dunes-gray mask-bottom=wave-gray }
## Dunes and wave
:::

::: container { bg="#4f46e5" mask-top=triangle mask-bottom=curve }
## Triangle and curve
:::

Dunes and wave

Triangle and curve

line wave wave-gray tilt tilt-gray triangle triangle-gray triangle-asym triangle-asym-gray curve curve-gray curve-asym curve-asym-gray gray-wavelets gray-waves rounded-corner capsule capsule-round oval clouds clouds-gray drops drops-gray dunes dunes-gray swell swell-gray ribbons-gray caves caves-gray mountains mountains-gray rays diagonal-wave book book-gray ledge ledge-gray split split-gray fan fan-gray pyramids pyramids-gray zigzag zigzag-gray arrow arrow-gray jagged jagged-gray ridge ridge-gray center-ridge center-ridge-gray center-notch center-notch-gray center-fold center-fold-gray

Animations

Use anim=<name>, duration=<time> and delay=<time>. Hover the chips to preview the motion.

PreviewResult

fade-in fade-out blur-in blur-out slide-up slide-down slide-left slide-right zoom-in zoom-out flip-up flip-down fold-up fold-down roll-left roll-right rotate-in rotate-out tilt-in tilt-out slowmotion spiral-in spiral-out nervous-in nervous-out

Spiral in

Animated containers keep the same Markdown content.

Fade in

Motion can be combined with a predefined surface.

Surface Previews

ShadowsBordersFiltersVisibility

shadow=long-drop shadow=hard shadow=halo shadow=light

border-width border-color border-style radius corner

filter-opacity filter-sepia filter-invert filter-brightness filter-saturation filter-hue

hide-mobile hide-tablet hide-desktop visible=mobile visible=tablet visible=desktop

Preset Map

Core

hero-calm, chapter-break, rounded-callout, soft-bordered, cta-halo, wide-table.

Simple surfaces

simple, simple-border, simple-invisible, border-rounded-corners, rounded-corner-spiral.

Lateral accents

side-capsule-right, side-capsule-left, lateral-double-waves.

Organic masks

organic-relief, dunes-and-wavelets, caves-and-mountains, swell-passage, dune-header.

Motion-ready

double-waves, cloud-drift, gray-current, center-notch-accent, fan-gradient.

Reference

Preset	Appearance
`hero-calm`	Centered opener, lower diagonal raccord.
`chapter-break`	Right-aligned transition, triangle top and curve bottom.
`rounded-callout`	Rounded bordered note.
`soft-bordered`	Stretched soft border.
`cta-halo`	Centered call to action with halo.
`wide-table`	Dense-content surface.
`simple`	Flat gradient.
`simple-border`	Flat gradient with border.
`simple-invisible`	Transparent section.
`side-capsule-right`, `side-capsule-left`	Wide side capsule.
`lateral-double-waves`	Simplified lateral accent surface.
`organic-relief`, `dunes-and-wavelets`, `caves-and-mountains`	Organic top and bottom masks.
`rounded-corner-spiral`, `border-rounded-corners`	Rounded surfaces.
`swell-passage`, `dune-header`, `double-waves`, `cloud-drift`, `gray-current`	Organic section transitions.
`center-notch-accent`, `fan-gradient`	Graphic accent sections.