Details

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

Nesta página

Playground

O que é o fuso horário?

É a hora local que o produto usa para disparar os lembretes.

Estado

Fundo

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

O que é o fuso horário?

É a hora local que o produto usa para disparar os lembretes.

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

O que é o fuso?

A hora local dos lembretes.

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

Como escrever

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

É 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.