# Details

Un pasaje cerrado que la persona abre si lo desea: explicaciones y configuraciones que la mayoría de las personas no necesita.

## 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>¿Qué es la zona horaria?</summary><div class="content"><p>Es la hora local que el producto usa para disparar los recordatorios.</p></div></details>
```

## Cuándo usarlo

-   Para ayuda, solo algunos lo necesitan ("¿Cuál es la zona horaria?").
-   Para configuraciones avanzadas, casi nadie las cambia.

## Cuándo no usarlo

-   **Lo que todo el mundo necesita leer:** déjalo abierto.
-   **Ocultar un campo obligatorio.**
-   **Varios en fila, como acordeón:** si todo está cerrado, nada se lee.

## Ejemplos

### Una pregunta

El contenido crece y la flecha gira, en la curva de cambio.

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>
```

## Anatomía

1.  **Flecha:** gira hacia abajo cuando se abre.
2.  **Resumen:** una pregunta o un nombre, subrayado como un enlace.
3.  **Contenido:** alineado con el texto del resumen.

## Escritura

-   El resumen indica qué hay dentro. Nunca "Más información".

## Accesibilidad

-   Es el `<details>` del navegador: se abre con el teclado y los lectores de pantalla indican si está abierto.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-details"`

sobre el `<details>`

La flecha giratoria y el resumen subrayado.

`class="content"`

alreda del contenido

Alineado con el resumen.

`open`

opcional

Empieza abierto.