Componentes · Ola 4 · Editorial

Description list

Pares de término y descripción: el colofón de un post, el aside de un autor, la grilla de un manifiesto o unas cifras. El término va en la letra de las etiquetas, en text-subtle; la descripción, a 8 px, en la voz que elige variant. Sin líneas entre los pares.

import { DescriptionList, DescriptionListItem } from '@archeblack/ui';

Ejemplos

Colofón de un post

layout="grid": cuándo se publicó y los temas del post, como chips que llevan a su archivo, en Hermes.

Publicado: 27 jul 2026
Temas: Filosofía
Cultura

Svelte

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { ChipGroup, DescriptionList, DescriptionListItem } from '@archeblack/ui';
</script>

<!-- El colofón de «El Alma Pide Locura», al pie del post: cuándo se publicó y sus temas, como
     links a su archivo. La grilla pone tantas columnas de 16rem o más como entren. -->
<DescriptionList layout="grid" data-product="hermes" style="width: 100%">
	<DescriptionListItem term="Publicado">
		<time datetime="2026-07-27T21:45:16Z">27 jul 2026</time>
	</DescriptionListItem>
	<DescriptionListItem term="Temas">
		<ChipGroup
			aria-label="Temas del artículo"
			items={[
				{ label: 'Filosofía', href: '#filosofia' },
				{ label: 'Cultura', href: '#cultura' }
			]}
		/>
	</DescriptionListItem>
</DescriptionList>

Aside de un autor

Apilado, a 20 px entre pares. Un par con variant="stat" muestra la cifra en la voz display.

Svelte

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { ChipGroup, DescriptionList, DescriptionListItem } from '@archeblack/ui';

	const topics = ['Filosofía', 'Cultura', 'Videojuegos', 'Tecnología'];
</script>

<!-- El aside de la página de un autor: los pares apilados, a 20 px. «Artículos publicados» pide la
     voz de las cifras con su propio variant; el resto queda en la de la lista. -->
<aside data-product="hermes" aria-label="Sobre Jimmy Mora Vinces" style="width: min(100%, 20rem)">
	<DescriptionList>
		<DescriptionListItem term="En Hermes desde" description="Enero de 2026" />
		<DescriptionListItem term="Artículos publicados" description={5} variant="stat" />
		<DescriptionListItem term="Temas">
			<ChipGroup
				aria-label="Temas de Jimmy Mora Vinces"
				items={topics.map((topic) => ({ label: topic }))}
			/>
		</DescriptionListItem>
	</DescriptionList>
</aside>

Grilla de un manifiesto

variant="reading": las descripciones en Piazzolla de 17 px, con el interlineado de lectura.

Editado por: Jimmy Mora Vinces, desde Buenos Aires.
Tipografías: Archivo en los titulares, Piazzolla en la lectura e IBM Plex Mono en los datos.
Cadencia: Un artículo nuevo por semana. Lectores lentos, lecturas largas.
Idiomas: Español e inglés.

Svelte

<script lang="ts">
	import { DescriptionList, DescriptionListItem } from '@archeblack/ui';
</script>

<!-- La grilla del manifiesto de Hermes, con las descripciones en la voz de lectura (Piazzolla de
     17 px). Columnas de 16rem o más: cuatro en una página de 1200 px, tres en esta muestra de
     894 px (a 1280 de ventana), dos a 720 y una en el teléfono. -->
<DescriptionList layout="grid" variant="reading" style="width: 100%">
	<DescriptionListItem term="Editado por" description="Jimmy Mora Vinces, desde Buenos Aires." />
	<DescriptionListItem
		term="Tipografías"
		description="Archivo en los titulares, Piazzolla en la lectura e IBM Plex Mono en los datos."
	/>
	<DescriptionListItem
		term="Cadencia"
		description="Un artículo nuevo por semana. Lectores lentos, lecturas largas."
	/>
	<DescriptionListItem term="Idiomas" description="Español e inglés." />
</DescriptionList>

Cifras

variant="stat": la cifra en la voz display a 28 px debajo de su etiqueta, sin cifras gigantes (D2).

Artículos publicados: 5
Temas: 4
Minutos de lectura: 60 min
Autores: 1

Svelte

<script lang="ts">
	import { DescriptionList, DescriptionListItem } from '@archeblack/ui';
</script>

<!-- Las cifras de Hermes: variant="stat" pone la cifra en la voz display a 28 px (la de Heading
     xl), con cifras tabulares, debajo de su etiqueta. Sin cifras gigantes (D2). Una cifra con
     unidad («60 min») no se parte. -->
<DescriptionList layout="grid" variant="stat" style="width: 100%">
	<DescriptionListItem term="Artículos publicados" description={5} />
	<DescriptionListItem term="Temas" description={4} />
	<DescriptionListItem term="Minutos de lectura" description="60 min" />
	<DescriptionListItem term="Autores" description={1} />
</DescriptionList>

Lado a lado

layout="inline": el término en una columna de 9rem y la descripción al lado. En el teléfono, apilados.

Publicado: 27 jul 2026
Autor: Jimmy Mora Vinces
Lectura: 15 min
Temas: Filosofía, Cultura

Svelte

<script lang="ts">
	import { DescriptionList, DescriptionListItem } from '@archeblack/ui';
</script>

<!-- layout="inline": el término y la descripción lado a lado, alineados en la línea de base. Por
     debajo de 24rem de lista se apilan. Los datos de «El Alma Pide Locura». -->
<DescriptionList layout="inline" style="width: 100%">
	<DescriptionListItem term="Publicado">
		<time datetime="2026-07-27T21:45:16Z">27 jul 2026</time>
	</DescriptionListItem>
	<DescriptionListItem term="Autor">
		<a href="#jimmy-mora-vinces">Jimmy Mora Vinces</a>
	</DescriptionListItem>
	<DescriptionListItem term="Lectura" description="15 min" />
	<DescriptionListItem term="Temas" description="Filosofía, Cultura" />
</DescriptionList>

Props

DescriptionList

Props de DescriptionList
Prop	Descripción
`layout?` `'stack' \| 'grid' \| 'inline'` Por defecto `'stack'`	`stack`: un par debajo del otro, a 20 px. `grid`: columnas de 16rem o más, con 24 px entre filas y 32 entre columnas. `inline`: término y descripción lado a lado (9rem y el resto); apilados por debajo de 24rem de lista.
`variant?` `'body' \| 'reading' \| 'stat'` Por defecto `'body'`	La voz de las descripciones. `body`: Archivo de 15 px. `reading`: Piazzolla de 17 px. `stat`: una cifra en la voz display a 28 px, con cifras tabulares.
`children?` `Snippet`	Los pares: un `DescriptionListItem` cada uno.
`class?` `ClassValue`	Se suma a `arche-description-list`.
`...rest` `HTMLAttributes`	Van al `<dl>`.

DescriptionListItem

Props de DescriptionListItem
Prop	Descripción
`term` `string \| Snippet`	El término (`<dt>`), en la letra de las etiquetas.
`description?` `string \| number`	La descripción (`<dd>`) como texto o cifra, a 8 px del término.
`children?` `Snippet`	Contenido propio de la descripción en lugar de `description`: un `<time>`, links o un `ChipGroup`.
`variant?` `'body' \| 'reading' \| 'stat'`	La voz de este par, si es otra que la de la lista. Por defecto, la de la lista.
`class?` `ClassValue`	Se suma a `arche-description-list__item`.
`...rest` `HTMLAttributes`	Van al `<div>` que agrupa el par.

Accesibilidad

Es un <dl> real, con un <div> por par (válido en HTML): el lector de pantalla anuncia la lista de descripciones y lee cada término con su descripción.
El orden en el código es el que se ve: el término y después la descripción, también en las cifras.
Las mayúsculas del término son de CSS: el lector lee el texto como está escrito.
Una fecha va en un <time datetime> dentro de la descripción, con children.
Los links propios de una descripción llevan subrayado, no solo el color.
En colores forzados, el término toma el color del texto del sistema: GrayText se leería como deshabilitado.

Qué evitar

Una cifra de 88 px o más. variant="stat", a 28 px, la voz de los títulos de tarjeta (D2).
Pares sueltos con <div> y <span> en lugar de una lista de descripciones. DescriptionList con un DescriptionListItem por par.
Una grilla con un par solo en la última fila. Una cantidad de pares que llene las filas, o stack.
Líneas entre los pares. El espacio: 20 px apilados, 24 × 32 en la grilla.