Example

O exemplo ao vivo de um componente, com o título, a explicação e o código dele, fechado até a pessoa pedir.

Nesta página

Playground

Principal

A ação que a tela existe para fazer.

Mostrar código

HTML

<button class="feitio-button" type="button" data-variant="primary">Salvar alterações</button>

Fundo

HTML

<div class="feitio-example"><div class="live"><button class="feitio-button" type="button" data-variant="primary">Salvar alterações</button></div><div class="about"><h3 id="pg-ex">Principal</h3><p>A ação que a tela existe para fazer.</p><details><summary><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Mostrar código</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;Salvar alterações&lt;/button&gt;</code></pre></div></details></div></div>

Quando usar

Em toda página de componente: cada variação ou situação num Example.

Quando não usar

Para comparar certo e errado: o par "Faça assim / Não faça".

Exemplos

Um Example

Esta própria caixa: o componente ao vivo em cima; embaixo, o título (que entra na Anchor), a explicação e o "Mostrar código".

Mostrar código

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>

Regras

O exemplo é o componente de verdade, funcionando, não uma imagem.
O título tem id: entra na Anchor como subtrecho de "Exemplos".
O código mostrado é o mínimo para reproduzir, sem o que é só da documentação.

Atributos

Atributo	Valores	Para quê
`class="feitio-example"`	obrigatório	A caixa do exemplo.
`class="live"`	a área de cima	O componente funcionando.
`class="about"`	a área de baixo	O título, a explicação e o código.