# CodeBlock

Code with colors and the Copy button, in its own bar that names the language.

## Playground

```html
<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>&lt;button type=&quot;button&quot; class=&quot;feitio-button&quot; data-variant=&quot;primary&quot;&gt;
  Salvar alterações
&lt;/button&gt;</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

### 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

```html
<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>
```

### With the package manager

For install commands, the bar offers npm, pnpm, yarn and bun; the choice applies site-wide and is remembered.

Show code

```html
<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

1.  **Bar:** the language, or the package manager choice.
2.  **Copy:** small, at the end of the bar; says "Copied" in place.
3.  **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.