Example
A component’s live example, with its title, explanation and code, closed until the person asks.
On this page
Playground
Primary
The action the screen exists for.
Show code
<button class="feitio-button" type="button" data-variant="primary">Save changes</button>Background
<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><button class="feitio-button" type="button" data-variant="primary">Save changes</button></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
<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. |