Component preview

component-preview frames a working component or shortcode example in documentation. It preserves the embedded markup and behaviour, unlike a screenshot or schematic. Use mode="inline" for a small inline result such as a keycap, badge, or symbol.

Example#

Usage#

{{< component-preview >}}
<nav aria-label="Example navigation">…</nav>
{{< /component-preview >}}

Boundary#

Use this only for a real rendered example that helps readers understand an interface. Do not use it to decorate prose, frame screenshots, or substitute a component’s accessibility guidance.

Options#

mode defaults to block. Set it to inline when the rendered result is small enough to sit within a line.