Code

Intent

.code styles a block-level code snippet: the rounded, subtle-background frame you see around every demo's source on this docs site. It's for actual code -- a function body, a selector block, a config fragment -- not for any preformatted text. A bare <pre> inside prose gets lighter, reading-oriented styling from .prose; use .code when the content is code and you want the dedicated monospace frame.

The component is three related pieces. .code is the block itself. .code-header is an optional sibling bar that sits directly above it (filename, language label, copy button). <brio-code-example> is the progressive wrapper the docs use for live demos -- it takes a bare .code and adds a copy button and source toggle on JS upgrade, with a clean fallback render when JS is absent.

Basic usage

<pre class="code"> wraps a <code> element containing the snippet. The block handles overflow internally via overflow-x: auto, so long unbreakable lines scroll horizontally inside the block rather than pushing the surrounding page wider.

With a header

Place a <div class="code-header"> immediately before the <pre class="code">. The CSS adjacency selector merges their borders into one framed unit -- the header keeps its top rounding, loses its bottom rounding, and the code loses its top rounding to match. Drop anything identifying into the header: filename, language label, source URL.

Header variants

Two header variants change the header's tint without affecting the code block below. .is-accent uses primary-subtle tones -- reach for it when the header should read as "called out" (a featured snippet, a recommended config). .is-filled blends the header into the code block's surface-sunken background, minimizing the visual separation for a tighter "one unit" feel.

Header actions

.code-header-actions is a flex row for right-aligned controls inside the header -- copy buttons, language switchers, open-in-new-tab links. Pair with small, ghost-variant buttons so the header's density carries through.

<brio-code-example>

The custom element that wraps every live demo on this docs site. Without JavaScript, it renders as a plain .code block (the child <pre class="code"> is the actual content). On upgrade, the element inserts its own .code-header with two controls: a copy button that writes the source to the clipboard, and a source toggle that collapses and expands the code block's visibility (via [hidden]). The CSS uses :has() to re-round the header's bottom corners when the code is collapsed so the header doesn't look orphaned.

The expected child structure is a single <pre class="code"><code>…</code></pre> -- matching what the / build-time markers emit. Authors rarely write the element by hand; the docs pipeline generates it around every demo, so every code block on every reference page is a live example of the element in the wild.

Attributes: label (language chip, defaults to "HTML"), open (code starts expanded instead of collapsed -- the docs default is collapsed), variant (header style, passed through to the generated .code-header).

Class reference

• .code -- the block. Apply to a <pre> wrapping a <code>. Semantic wrapper -- no child classes; the inner <code> is styled via descendant selector.
• .code-header -- sibling block that sits directly before a .code. Borders merge into a single framed unit via CSS adjacency (P2 test 5).
• .is-accent, .is-filled -- header tint variants.
• .code-header-actions -- flex row for right-aligned controls inside a header.

Inside .prose, bare <pre> elements pick up .code's treatment automatically via a sibling rule, so markdown-rendered code fences look right without adding the class.

Customization

--code-padding uses raw --space-md instead of the ui-pad-square-* grammar because that family doesn't extend to spacious. Override with any --space-* value. Full token list and defaults: src/css/code.css.

Accessibility

• Preformatted semantics stay intact. <pre> preserves whitespace and line breaks; screen readers announce the block as preformatted content. Don't substitute <div> or <p> -- the semantics matter, and the browser's default monospace rendering still applies if CSS fails to load.
• Horizontal scroll stays local. overflow-x: auto on the block keeps long unbreakable lines inside the block's own scrollable area. Keyboard users can focus the block (if it's focusable) and use arrow keys to scroll; consumers concerned about keyboard reachability of overflow content can add tabindex="0" to the <pre>.
• Header actions need visible labels. A copy button inside .code-header-actions that's text-only (as in the demo above) needs no aria-label. An icon-only copy button (common in real docs) needs an aria-label="Copy code" to name the action for assistive tech.

CSS Reference: Code

.code or .prose pre: Block-level code container. Prose pre inherits the same treatment so markdown-rendered code fences look right without authors adding a class

Source: src/css/code.css

Tokens

Classes

CSS Reference: Code Header

Filename or language bar above a code block

Source: src/css/code.css

Tokens

Classes