# Details

Um trecho fechado que a pessoa abre se quiser: explicações e ajustes que a maioria não precisa.

## Playground

```html
<details class="feitio-details"><summary><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>O que é o fuso horário?</summary><div class="content"><p>É a hora local que o produto usa para disparar os lembretes.</p></div></details>
```

## Quando usar

-   Para ajuda que só alguns precisam ("O que é o fuso horário?").
-   Para ajustes avançados que quase ninguém muda.

## Quando não usar

-   **O que todo mundo precisa ler:** deixe aberto.
-   **Para esconder um campo obrigatório.**
-   **Vários seguidos, como sanfona:** se tudo está fechado, nada é lido.

## Exemplos

### Uma pergunta

O conteúdo cresce e a seta gira, na curva de mudança.

Mostrar código

```html
<details class="feitio-details">
  <summary><svg class="feitio-icon" aria-hidden="true">…</svg>O que é o fuso horário?</summary>
  <div class="content"><p>…</p></div>
</details>
```

## Anatomia

1.  **Seta:** gira para baixo quando abre.
2.  **Resumo:** uma pergunta ou um nome, sublinhado como link.
3.  **Conteúdo:** alinhado com o texto do resumo.

## Como escrever

-   O resumo diz o que tem dentro. Nunca "Saiba mais".

## Acessibilidade

-   É o `<details>` do navegador: abre com o teclado e o leitor de tela diz se está aberto.

## Atributos

Atributo

Valores

Para quê

`class="feitio-details"`

no `<details>`

A seta que gira e o resumo sublinhado.

`class="content"`

em volta do conteúdo

Alinhado com o resumo.

`open`

opcional

Começa aberto.