Accordion
El accordion o acordeón se utiliza para mostrar gran cantidad de información, menos relevante, en un área pequeña. Su funcionalidad permite que el usuario pueda expandir y contraer la información en función a sus necesidades, evitando que la gran cantidad de contenido le distraiga de sus tareas.
Recomendaciones de uso
¿Qué hacer?
- Los acordeones son muy útiles en algunos patrones de páginas tipo FAQ's o para mostrar horarios, etc.
- Es recomendable usarlos cuando necesitamos ahorrar espacio en la página para que el usuario se enfoque en su tarea.
- Se utilizan mucho en dispositivos con una resolución más pequeña como tablets o móviles.
- Siempre deben de llevar un indicativo de su funcionalidad como el icono "arrow".
- Los textos de los encabezados deben ser breves y concisos.
¿Qué no hacer?
- No se deben usar cuando toda la información que contienen es relevante para el usuario.
Estados
Los diferentes estados se aplican al item individual del acordeón. Existen cuatro estados:
- Stanby: es el acordeón en estado natural, sin ningún tipo de interacción o colapsado.
- Hover: es la interacción al pasar por encima del item del acordeon.
- Focus: te enfoca que elemento del acordeón tienes seleccionado. Este tipo de estado es muy útil para las personas que trabajan con teclado.
- Deployed: es el estado cuando el acordeon está expandido.
Si se van a colocar sobre un fondo oscuro, se utilizarán en el color inverso; si van sobre un fondo claro utilizarán en el color default del theme.
- Modo Default
- Modo Inverse
- Accordion Group
Anatomía
Los acordeones se construyen con un encabezado, un icono y un contenedor de contenido.
| Nombre | Descripción |
|---|---|
| Encabezado | Ofrece un título que resume el contenido |
| Arrow icon | Actúa como un elemento interactivo para expandir o colapsar el acordeón |
| Contenido | Contiene la información que se quiere mostrar, además puedes contener otro tipo de elementos o componentes. Es la parte que se expande o se colapsa al interactuar con el encabezado. |
Estilos
Color
- Modo Default
| Nombre | Propiedad | Color token |
|---|---|---|
| Accordion:title | text color | $text-01 |
| Accordion:content | text color | $text-01 |
| Accordion:Arrow | color | $interactive-04 |
| Accordion:focus | stroke | $focus-01 |
| Accordion:line-down | stroke | $ui-06 |
- Modo Inverse
| Nombre | Propiedad | Color token |
|---|---|---|
| Accordion:title | text color | $inverse-01 |
| Accordion:content | text color | $inverse-01 |
| Accordion:Arrow | color | $inverse-04 |
| Accordion:focus | stroke | $focus-01 |
| Accordion:line-down | stroke | $inverse-01 |
Tipografía
| Nombre | Tamaño fuente (px/rem) | Font weight | Estilo |
|---|---|---|---|
| Accordion:title L | 36 / 2.25 | Extrabold / 800 | Heading L |
| Accordion:title M | 30 / 1.875 | Extrabold / 800 | Heading L |
| Accordion:title S | 18 / 1.125 | Extrabold / 800 | Heading L |
| Accordion:content L | 17 / 1.063 | Regular / 400 | Body Default |
| Accordion:content M | 15 / 0.938 | Regular / 400 | Body Default |
| Accordion:content M | 14 / 0.875 | Regular / 400 | Body Default |
Estructura
Breakpoint Large - 1680 px
Breakpoint Medium - 1216 px
Breakpoint Small - 360 px
