Code

Wrap a code block in <figure class="re-code"> with a <figcaption> for the filename. Inline <code> is styled by the base layer with no class needed.

Captioned block

app.css

.re-button { color: var(--re-color-text-on-accent); }

Live example

<figure class="re-code">
  <figcaption>app.css</figcaption>
  <pre><code>.re-button { color: var(--re-color-text-on-accent); }</code></pre>
</figure>

Inline

Import the stylesheet with @relements/core/index.css.

Live example

<p>Import the stylesheet with <code>@relements/core/index.css</code>.</p>

Accessibility

• Semantics — A captioned block uses a native <figure> with a <figcaption> caption (the filename), wrapping <pre><code>. The <figcaption> gives the figure an accessible name, so assistive tech announces the filename alongside the code. Inline snippets use plain <code>, styled by the base layer. No ARIA is needed.
• Notes — Display only: the code block is non-interactive and not in the tab order, so there is no keyboard model or focus styling to document. See the accessibility guide for project-wide conventions.