# Example

A component’s live example, with its title, explanation and code, closed until the person asks.

## Playground

```html
<div class="feitio-example"><div class="live"><button class="feitio-button" type="button" data-variant="primary">Save changes</button></div><div class="about"><h3 id="pg-ex">Primary</h3><p>The action the screen exists for.</p><details><summary><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Show code</summary><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="Copiado">Copiar</button></div><pre tabindex="0"><code>&lt;button class=&quot;feitio-button&quot; type=&quot;button&quot; data-variant=&quot;primary&quot;&gt;Save changes&lt;/button&gt;</code></pre></div></details></div></div>
```

## When to use

-   On every component page: each variation or situation in an Example.

## When not to use

-   **To compare right and wrong:** the "Do / Don’t" pair.

## Examples

### An Example

This very box: the live component on top; below, the title (which goes into the Anchor), the explanation and "Show code".

Show code

```html
<div class="feitio-example">
  <div class="live">…o componente…</div>
  <div class="about">
    <h3 id="ex-salvar">Principal</h3>
    <p>…</p>
    <details><summary>…Mostrar código</summary><div class="feitio-code">…</div></details>
  </div>
</div>
```

## Rules

-   The example is the real component, working, not a picture.
-   The title has an `id`: it enters the Anchor as a subsection of "Examples".
-   The code shown is the minimum to reproduce it, without documentation-only bits.

## Attributes

Attribute

Values

What for

`class="feitio-example"`

required

The example box.

`class="live"`

the top area

The working component.

`class="about"`

the bottom area

The title, the explanation and the code.