DIANA

Diseño Aplicaciones Navarra

Details

Componente de expansión/colapso de contenido con tamaños base y large.

Estado: review

1. Base · cerrado

Mostrar descripción
Contenido desplegado de ejemplo.
Mostrar HTML 
<details class="gn-details">
  <summary class="gn-details__summary">
    <svg class="gn-details__icon" xmlns="http://www.w3.org/2000/svg" width="7" height="13" viewBox="0 0 7 13" fill="none" aria-hidden="true" focusable="false">
      <path d="M0 13V0L6.5 6.5L0 13Z" fill="currentColor"/>
    </svg>
    <span class="gn-details__label">Mostrar descripción</span>
  </summary>
  <div class="gn-details__content">Contenido desplegado de ejemplo.</div>
</details>

2. Large · cerrado

Mostrar descripción
Contenido desplegado de ejemplo.
Mostrar HTML 
<details class="gn-details gn-details--lg">
  <summary class="gn-details__summary">
    <svg class="gn-details__icon" xmlns="http://www.w3.org/2000/svg" width="7" height="13" viewBox="0 0 7 13" fill="none" aria-hidden="true" focusable="false">
      <path d="M0 13V0L6.5 6.5L0 13Z" fill="currentColor"/>
    </svg>
    <span class="gn-details__label">Mostrar descripción</span>
  </summary>
  <div class="gn-details__content">Contenido desplegado de ejemplo.</div>
</details>