CodeBlock
Code with colors and the Copy button, in its own bar that names the language.
On this page
Playground
<button type="button" class="feitio-button" data-variant="primary">
Salvar alterações
</button>Language
Background
<div class="feitio-code" data-lang="html"><div class="bar"><span>HTML</span><button type="button" class="feitio-button copy" data-size="small" data-done-label="Copied">Copy</button></div><pre tabindex="0"><code><button type="button" class="feitio-button" data-variant="primary">
Salvar alterações
</button></code></pre></div>When to use
- For every code snippet the person will read or copy: an example, a command, a configuration.
When not to use
- For a name within a sentence (
data-size): inline code, without a block.
Examples
<button type="submit" class="feitio-button" data-variant="primary">
Salvar alterações
</button>HTML
Colors come from Feitio’s roles: the tag in text orange, the attribute in moss, the value in ink. Copy says "Copied" on the button itself and copies plain text.
Show code
<div class="feitio-code" data-lang="html">
<div class="bar"><span>HTML</span><button type="button" class="feitio-button copy" data-size="small">Copiar</button></div>
<pre><code>…</code></pre>
</div>npm install @made-by-maid/feitiopnpm add @made-by-maid/feitioyarn add @made-by-maid/feitiobun add @made-by-maid/feitioWith the package manager
For install commands, the bar offers npm, pnpm, yarn and bun; the choice applies site-wide and is remembered.
Show code
<div class="feitio-code" data-lang="shell">
<div class="bar"><span class="feitio-segmented" role="group" aria-label="Gerenciador de pacotes">…</span>…</div>
<pre data-pm="npm"><code>npm install @made-by-maid/feitio</code></pre>
<pre data-pm="pnpm" hidden>…</pre>
</div>Anatomy
<a href="/">- Bar: the language, or the package manager choice.
- Copy: small, at the end of the bar; says "Copied" in place.
- The code, in the role colors.
Accessibility
- The block scrolls sideways on its own; the page never does.
- "Copied" appears on the button, where the eye and focus are.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-code" | required | The block. |
data-lang | "html", "jsx", "css", "shell" | Which colors; HTML and JSX get tag colors. |
class="copy" | the button | Copies plain text. |
data-pm | on each <pre> | One command per package manager. |