container

name	container
description	Wrap a chunk of Markdown in a `<div>` with custom CSS classes and HTML attributes. Use for layout helpers (center, max-width, background tint) and one-off styling without leaving Markdown.

Container

Generic block wrapper that emits a <div> with custom classes and attributes.

Syntax

:::
Plain container — just a wrapping div.
:::

:::text-center
Centered content.
:::

:::callout-soft { #my-anchor .extra }
Extra classes and an id.
:::

The first token after the opening ::: becomes the primary CSS class. An optional { … } block can add an #id and additional .classes.

Attribute block

Inside { … }:

• #anchor-id — id attribute.
• .foo .bar — extra classes.
• key="value" — arbitrary HTML attributes (use sparingly).

Examples

:::text-center
This text is centered.
:::

:::bg-zinc-100 dark:bg-zinc-900 rounded-lg p-4
A soft panel with Tailwind utilities.
:::

:::grid { #features .gap-4 .grid-cols-3 }
Three columns of children.
:::

When to use

• Quick layout helpers (centering, padding, max-width).
• Wrapping a Tailwind utility chain around several blocks.
• Naming a region with an #id for cross-page anchors.

Avoid containers for things that have a dedicated component — use card, panel, column, tab, or alert instead.