Description List

Lista de términos y definiciones para mostrar pares etiqueta–valor en orientación vertical u horizontal.

Estado: review

1. Vertical · SM

Fecha de nacimiento: 12 de marzo de 1985
Municipio: Pamplona / Iruña
Estado: Activo

Mostrar HTML

<dl class="gn-description-list gn-description-list--sm">
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Fecha de nacimiento</dt>
    <dd class="gn-description-list__detail">12 de marzo de 1985</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Municipio</dt>
    <dd class="gn-description-list__detail">Pamplona / Iruña</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Estado</dt>
    <dd class="gn-description-list__detail">Activo</dd>
  </div>
</dl>

2. Vertical · Base

Fecha de nacimiento: 12 de marzo de 1985
Municipio: Pamplona / Iruña
Estado: Activo

Mostrar HTML

<dl class="gn-description-list gn-description-list--base">
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Fecha de nacimiento</dt>
    <dd class="gn-description-list__detail">12 de marzo de 1985</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Municipio</dt>
    <dd class="gn-description-list__detail">Pamplona / Iruña</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Estado</dt>
    <dd class="gn-description-list__detail">Activo</dd>
  </div>
</dl>

3. Vertical · LG

Fecha de nacimiento: 12 de marzo de 1985
Municipio: Pamplona / Iruña
Estado: Activo

Mostrar HTML

<dl class="gn-description-list gn-description-list--lg">
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Fecha de nacimiento</dt>
    <dd class="gn-description-list__detail">12 de marzo de 1985</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Municipio</dt>
    <dd class="gn-description-list__detail">Pamplona / Iruña</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Estado</dt>
    <dd class="gn-description-list__detail">Activo</dd>
  </div>
</dl>

4. Vertical · XL

Fecha de nacimiento: 12 de marzo de 1985
Municipio: Pamplona / Iruña
Estado: Activo

Mostrar HTML

<dl class="gn-description-list gn-description-list--xl">
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Fecha de nacimiento</dt>
    <dd class="gn-description-list__detail">12 de marzo de 1985</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Municipio</dt>
    <dd class="gn-description-list__detail">Pamplona / Iruña</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Estado</dt>
    <dd class="gn-description-list__detail">Activo</dd>
  </div>
</dl>

5. Row · Base

Año: 2026
Período: Febrero
Persona Declarante: 000000A - Nombre Apellido Apellido

Mostrar HTML

<dl class="gn-description-list gn-description-list--row gn-description-list--base">
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Año</dt>
    <dd class="gn-description-list__detail">2026</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Período</dt>
    <dd class="gn-description-list__detail">Febrero</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Persona Declarante</dt>
    <dd class="gn-description-list__detail">000000A - Nombre Apellido Apellido</dd>
  </div>
</dl>

7. Horizontal · SM

Nombre completo: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
NIF: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Municipio: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Estado: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mostrar HTML

<dl class="gn-description-list gn-description-list--horizontal gn-description-list--sm">
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Nombre completo</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">NIF</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Municipio</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Estado</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
</dl>

8. Horizontal · Base

Nombre completo: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
NIF: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Municipio: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Estado: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mostrar HTML

<dl class="gn-description-list gn-description-list--horizontal gn-description-list--base">
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Nombre completo</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">NIF</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Municipio</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Estado</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
</dl>

9. Horizontal · LG

Nombre completo: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
NIF: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Municipio: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Estado: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mostrar HTML

<dl class="gn-description-list gn-description-list--horizontal gn-description-list--lg">
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Nombre completo</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">NIF</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Municipio</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Estado</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
</dl>

10. Horizontal · XL

Nombre completo: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
NIF: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Municipio: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Estado: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mostrar HTML

<dl class="gn-description-list gn-description-list--horizontal gn-description-list--xl">
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Nombre completo</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">NIF</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Municipio</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Estado</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
</dl>

11. Horizontal · Wide · Base

Nombre completo: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
NIF: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Municipio: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Estado: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mostrar HTML

<dl class="gn-description-list gn-description-list--horizontal gn-description-list--wide gn-description-list--base">
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Nombre completo</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">NIF</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Municipio</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
  <div class="gn-description-list__item">
    <dt class="gn-description-list__term">Estado</dt>
    <dd class="gn-description-list__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  </div>
</dl>

Description List

El Description List es un componente para mostrar pares etiqueta–valor (término y descripción). Está construido sobre el elemento semántico nativo <dl> de HTML, con <dt> para la etiqueta y <dd> para el valor.

Cuándo usarlo

Para mostrar los datos de un registro o ficha (nombre, NIF, fecha, estado…).
Cuando la información se organiza en pares clave–valor y se necesita claridad visual entre etiqueta y dato.

Cuándo no usarlo

Para listas de elementos sin relación etiqueta–valor: usa <ul> o el componente Link List.
Dentro de tablas donde la estructura ya proporciona el contexto.

Orientaciones

Vertical (por defecto)

La etiqueta aparece encima del valor, en un apilado compacto. Ideal para fichas de datos en espacios estrechos o columnas de formulario.

Horizontal

La etiqueta ocupa un ancho fijo a la izquierda y el valor ocupa el espacio restante. Cada fila se separa con un borde superior. Ideal para resúmenes de información donde los campos deben estar alineados.

El ancho de la columna de etiquetas puede ajustarse con la variable CSS local --_dl-term-width (por defecto 200px).

Tamaños

El modificador de tamaño controla únicamente el tamaño tipográfico del valor (<dd>). La etiqueta (<dt>) mantiene siempre p-sm en vertical y p-base en horizontal.

| Clase | Token de fuente del valor | |---|---| | gn-description-list--sm | --gn-text-p-sm (16px) | | gn-description-list--base | --gn-text-p-base (18px) | | gn-description-list--lg | --gn-text-p-lg (20px) | | gn-description-list--xl | --gn-text-p-xl (24px) |

Espaciado (horizontal)

En orientación horizontal, el espaciado vertical de cada fila puede ser:

Narrow (por defecto): padding-block: var(--gn-spacing-2) — 8px arriba y abajo.
Wide: añade gn-description-list--wide — padding-block: var(--gn-spacing-3).

Construcción semántica

Etiqueta: Valor

El <div> envolviendo cada <dt>+<dd> es válido en HTML5 dentro de un <dl> y permite aplicar estilos de fila sin romper la semántica.