# Code block

Code block: a free component, built on your design tokens, to use to show a command, a snippet or an example request the person can copy. A piece of code with its file name and language, a Copy button, and long lines that scroll sideways inside the box.

Prompt: Add the OpenDesigner component code-block to this project: https://opendesigner.dev/library/code-block.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: copied, selected when the clipboard is blocked, hover, focus, long lines scroll, tall code scrolls.

Accessibility: The code box is a named region that Tab reaches, so keyboard users can scroll it with the arrow keys; the Copy button says Copied when it worked.

File: https://opendesigner.dev/library/code-block.html

Catalog entry (parts, data limits, states, tokens): https://opendesigner.dev/library/code-block.json

Download: `curl -fsSLo code-block.html https://opendesigner.dev/library/code-block.html`