Code | Brio

Examples

Basic usage

const greeting = (name) => `hello, ${name}`;

<pre class="code"><code>const greeting = (name) =&gt; `hello, ${name}`;</code></pre>

With a header

button.css

.button {
        background-color: var(--button-bg);
        padding: var(--button-padding-block) var(--button-padding-inline);
        border-radius: var(--button-radius);
    }

<div>
            <div class="code-header">button.css</div>
            <pre class="code"><code>.button {
        background-color: var(--button-bg);
        padding: var(--button-padding-block) var(--button-padding-inline);
        border-radius: var(--button-radius);
    }</code></pre>
        </div>

Header variants

These classes style the header bar itself, whether the bar is written by hand or built by <brio-code-example> (whose variant attribute applies the same is-* classes). One caveat: the floating overlay anchors to whatever element wraps the header and its block, so a hand-written pair needs a wrapping div; <brio-code-example> supplies its own.

default

button.css

export const version = "0.1.0";

accent

button.css

export const version = "0.1.0";

filled

button.css

export const version = "0.1.0";

merged

button.css

export const version = "0.1.0";

minimal

button.css

export const version = "0.1.0";

floating

export const version = "0.1.0";

<div class="stack is-snug">
            <div>
                <h4>default</h4>
                <div class="code-header">button.css</div>
                <pre class="code"><code>export const version = "0.1.0";</code></pre>
            </div>
            <div>
                <h4>accent</h4>
                <div class="code-header is-accent">button.css</div>
                <pre class="code"><code>export const version = "0.1.0";</code></pre>
            </div>
            <div>
                <h4>filled</h4>
                <div class="code-header is-filled">button.css</div>
                <pre class="code"><code>export const version = "0.1.0";</code></pre>
            </div>
            <div>
                <h4>merged</h4>
                <div class="code-header is-merged">button.css</div>
                <pre class="code"><code>export const version = "0.1.0";</code></pre>
            </div>
            <div>
                <h4>minimal</h4>
                <div class="code-header is-minimal">button.css</div>
                <pre class="code"><code>export const version = "0.1.0";</code></pre>
            </div>
            <div>
                <h4>floating</h4>
                <div>
                    <div class="code-header is-floating">
                        <div class="code-header-actions">
                            <button class="button is-sm is-ghost" type="button" aria-label="Copy">
                                <svg
                                    class="icon is-xs"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    aria-hidden="true"
                                >
                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                    <path
                                        d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
                                    ></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <pre class="code"><code>export const version = "0.1.0";</code></pre>
                </div>
            </div>
        </div>

Header actions

A code header is a plain flex bar: label on one end, .code-header-actions on the other. Anything can ride in that slot: a link to the raw file, a download, or a run button wired to your own JS. The Raw and Copy buttons below are inert placeholders shown to show how they look in the header. This doc site uses the same viewer for the copy and source buttons.

config.yaml

server:
      host: localhost
      port: 8080
    database:
      url: postgres://localhost/brio

<div>
            <div class="code-header">
                <span>config.yaml</span>
                <div class="code-header-actions">
                    <button class="button is-ghost is-sm" type="button">Raw</button>
                    <button class="button is-ghost is-sm" type="button">Copy</button>
                </div>
            </div>
            <pre class="code"><code>server:
      host: localhost
      port: 8080
    database:
      url: postgres://localhost/brio</code></pre>
        </div>

<brio-code-example>

This is a web component that wraps a block of source. It builds the same header as the sections above at runtime: a label, a copy button, and a source toggle, collapsed to a bar until opened. Its variant attribute picks from the same header styles, so variant="merged" and a hand-written class="code-header is-merged" are the same. This is useful for sharing code, such as in this documentation page.

default chrome

<p>Copy, source toggle, collapsed to a bar</p>

floating overlay

<p>Icon-only buttons riding the block itself</p>

copy-only

<p>Source locked open, copy button only</p>

custom chrome template

<p>An authored template replaces the built bar</p>

<div class="stack is-snug">
            <div>
                <h4>default chrome</h4>
                <brio-code-example label="default.html" open>
                    <pre
                        class="code"
                    ><code>&lt;p&gt;Copy, source toggle, collapsed to a bar&lt;/p&gt;</code></pre>
                </brio-code-example>
            </div>
            <div>
                <h4>floating overlay</h4>
                <brio-code-example label="floating.html" variant="floating" open>
                    <pre
                        class="code"
                    ><code>&lt;p&gt;Icon-only buttons riding the block itself&lt;/p&gt;</code></pre>
                </brio-code-example>
            </div>
            <div>
                <h4>copy-only</h4>
                <brio-code-example label="copy-only.html" copy-only>
                    <pre
                        class="code"
                    ><code>&lt;p&gt;Source locked open, copy button only&lt;/p&gt;</code></pre>
                </brio-code-example>
            </div>
            <div>
                <h4>custom chrome template</h4>
                <brio-code-example label="custom.html" open>
                    <template data-header>
                        <div class="code-header is-filled">
                            <span data-label></span>
                            <div class="code-header-actions">
                                <button class="button is-sm is-ghost" type="button" data-copy>
                                    Copy
                                </button>
                                <button class="button is-sm is-ghost" type="button" data-toggle>
                                    Source
                                </button>
                            </div>
                        </div>
                    </template>
                    <pre
                        class="code"
                    ><code>&lt;p&gt;An authored template replaces the built bar&lt;/p&gt;</code></pre>
                </brio-code-example>
            </div>
        </div>

Source comments

Code -- styled code blocks with optional header bar.

.prose pre inherits the same treatment so markdown-rendered code
fences look right without authors adding a class.

Reference

Source: src/css/code.css

Applies to

.code, .prose pre

Tokens

Token	Default	Description
`--code-bg`	`var(--color-fill)`	Background color for the code block
`--code-border-color`	`var(--color-border-subtle)`	Border color for the code block
`--code-border-width`	`var(--border-width-default)`	Border width for the code block
`--code-radius`	`var(--radius-md)`	Border radius for the code block
`--code-padding-block`	`var(--space-md)`	Block-axis inner padding for the code block
`--code-padding-inline`	`var(--space-md)`	Inline-axis inner padding for the code block
`--code-font-size`	`var(--font-size-xs)`	Font size for code text

Related: Code Header

Filename or language bar above a code block

Source: src/css/code.css

Applies to

.code-header

Classes

Class	Kind	Description
`.is-accent`	variant	Primary-tinted header background and border
`.is-filled`	variant	Subtle fill that blends with the code block
`.is-merged`	variant	Filename bar: the header takes a darker fill than the block, so bar and code read as one unit (inverted from the default's surface bar over fill)
`.is-minimal`	variant	Borderless toolbar row; the code block below keeps its full frame. Collapsed, the row is all that remains
`.is-floating`	variant	Icon-only overlay riding the code block's top-right corner; the built chrome's button and header labels hide (aria-label carries the names). Anchors to the direct parent: brio-code-example provides that wrapper by construction, and a bare header + block pair needs an explicit wrapping div. Collapsed, the row drops back in flow as a plain unframed row

Tokens

Token	Default	Description
`--code-header-bg`	`var(--color-surface)`	Background color for the header bar
`--code-header-border-color`	`var(--color-border-subtle)`	Border color for the header bar
`--code-header-border-width`	`var(--border-width-default)`	Border width for the header bar
`--code-header-radius`	`var(--radius-md)`	Border radius for the header bar
`--code-header-font-size`	`var(--ui-font-size-xs)`	Font size for the header label