kit

Code block

Code with a filename, line wrapping off, a copy button and a scroll area that works from the keyboard, light and fast with no highlighter to load.

Tier 2 · behaviour Figure with pre beta

Example

example.js
import { toast } from './components/toast/toast.js';

// A comment explaining the example.
const button = document.querySelector('#save');
button.addEventListener('click', () => toast('Saved', { tone: 'good' }));
Show the markup 
<figure class="kit-code demo-fill">
  <figcaption><span>example.js</span><button class="kit-button" data-size="sm" data-variant="ghost" type="button" data-copy-target="#code-demo" aria-label="Copy example.js"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="5" y="5" width="8" height="8" rx="2"/><path d="M3 11V4a1 1 0 0 1 1-1h7"/></svg>Copy</button></figcaption>
  <pre tabindex="0" id="code-demo"><code>import { toast } from './components/toast/toast.js';

// A comment explaining the example.
const button = document.querySelector('#save');
button.addEventListener('click', () => toast('Saved', { tone: 'good' }));</code></pre>
</figure>

Usage

<figure class="kit-code">
  <figcaption><span>install.sh</span><button class="kit-button" data-size="sm" data-variant="ghost" data-copy-target="#code-1">Copy</button></figcaption>
  <pre tabindex="0" id="code-1"><code>npm install kit</code></pre>
</figure>

The copy button is a copy button pointing at the <pre>. data-wrap on the figure wraps long lines instead of scrolling. There's no syntax highlighting, which keeps it to a few lines of CSS; colour the code on the server if you need it.

Accessibility

  • The <pre> scrolls sideways, so it's focusable (tabindex="0") for keyboard users (WCAG 2.1.1).
  • The caption names the code; the copy button says what it copies when there are several on a page ("Copy install.sh").