# Example

Un exemple en direct d'un composant, avec son titre, sa description et son code, fermé jusqu'à ce que la personne le demande.

## Playground

```html
<div class="feitio-example"><div class="live"><button class="feitio-button" type="button" data-variant="primary">Enregistrer</button></div><div class="about"><h3 id="pg-ex">Principal</h3><p>L’action pour laquelle l’écran existe.</p><details><summary><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Afficher le 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;Enregistrer&lt;/button&gt;</code></pre></div></details></div></div>
```

## Quand l'utiliser

-   Sur chaque page de composant : chaque variation ou situation dans un Exemple.

## Quand ne pas l'utiliser

-   **Pour comparer le bien et le mal :** la paire "Faire / Ne pas faire".

## Exemples

### Un exemple

Cette boîte très précise : le composant en direct en haut ; en dessous, le titre (qui entre dans l'ancrage), l'explication et "Montrer le code".

Afficher le 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>
```

## Règles

-   L'exemple est le composant réel, fonctionnel, pas une image.
-   Le titre possède un `id` : il entre dans l'ancrage comme sous-section de "Exemples".
-   Le code affiché est le minimum pour le reproduire, sans les éléments réservés à la documentation.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-example"`

obligatoire

La boîte d'exemple.

`class="live"`

la zone du haut

Le composant fonctionnel.

`class="about"`

la zone du bas

Le titre, l'explication et le code.