Example

Un ejemplo en vivo de un componente, con su título, explicación y código, cerrado hasta que la persona lo pide.

En esta página

Playground

Principal

La acción para la que existe la pantalla.

Mostrar código

HTML

<button class="feitio-button" type="button" data-variant="primary">Guardar cambios</button>

Fondo

HTML

<div class="feitio-example"><div class="live"><button class="feitio-button" type="button" data-variant="primary">Guardar cambios</button></div><div class="about"><h3 id="pg-ex">Principal</h3><p>La acción para la que existe la pantalla.</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;Guardar cambios&lt;/button&gt;</code></pre></div></details></div></div>

Cuándo usarlo

En cada página de componente: cada variación o situación en un Ejemplo.

Cuándo no usarlo

Para comparar lo correcto e incorrecto: el par "Hacer / No hacer".

Ejemplos

Un ejemplo

Esta caja muy: el componente en vivo arriba; abajo, el título (que va al Anclaje), la explicación y "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>

Reglas

El ejemplo es el componente real, funcional, no una imagen.
El título tiene un id: entra como subtítulo en el Anclaje bajo "Ejemplos".
El código mostrado es el mínimo para reproducirlo, sin bits exclusivos de documentación.

Atributos

Atributo	Valores	Para qué sirve
`class="feitio-example"`	obligatorio	La caja del ejemplo.
`class="live"`	el área superior	El componente funcional.
`class="about"`	el área inferior	El título, la explicación y el código.