Contenidos · Listas
Lists (listas y marcadores)
Normaliza listas semánticas y controla marcadores, posición y separación vertical con utilidades pequeñas y predecibles.
Nueve marcadores
Viñetas, números, letras y romanos en variantes minúsculas y mayúsculas.
Cinco separaciones
.list-gap-1 a .list-gap-5 controlan el ritmo vertical.
Anidación automática
Las sublistas heredan sangría y reciben un marcador apropiado para su nivel.
Código + resultado
Compara listas reales
Selecciona una variante para ver su marcado y el resultado aplicado sobre el mismo contenido.
- Instalación del sistema
- Configuración inicial
- Uso de componentes
- Buenas prácticas
<ul class="list list-disc list-gap-2">
<li>Instalación del sistema</li>
<li>Configuración inicial</li>
<li>Uso de componentes</li>
</ul>
<ul class="list list-square list-gap-2">
<li>Instalación del sistema</li>
<li>Configuración inicial</li>
<li>Uso de componentes</li>
</ul>
<ol class="list list-decimal list-gap-2">
<li>Instalación del sistema</li>
<li>Configuración inicial</li>
<li>Uso de componentes</li>
</ol>
<ol class="list list-roman list-gap-2">
<li>Instalación del sistema</li>
<li>Configuración inicial</li>
<li>Uso de componentes</li>
</ol>
<ul class="list list-none list-gap-2">
<li>Instalación del sistema</li>
<li>Configuración inicial</li>
<li>Uso de componentes</li>
</ul>
Escala disponible
Nueve tipos de marcador
Usa ul para viñetas y ol cuando el orden de los elementos tenga significado.
- Primer elemento
- Segundo elemento
- Tercer elemento
.list-discdisc- Primer elemento
- Segundo elemento
- Tercer elemento
.list-circlecircle- Primer elemento
- Segundo elemento
- Tercer elemento
.list-squaresquare- Primer elemento
- Segundo elemento
- Tercer elemento
.list-decimaldecimal- Primer elemento
- Segundo elemento
- Tercer elemento
.list-leading-zerodecimal-leading-zero- Primer elemento
- Segundo elemento
- Tercer elemento
.list-alphalower-alpha- Primer elemento
- Segundo elemento
- Tercer elemento
.list-alpha-upupper-alpha- Primer elemento
- Segundo elemento
- Tercer elemento
.list-romanlower-roman- Primer elemento
- Segundo elemento
- Tercer elemento
.list-roman-upupper-romanRitmo vertical
Cinco niveles de separación
El margen se aplica a cada hijo directo li; no requiere convertir la lista en flex.
- Elemento
- Elemento
- Elemento
.list-gap-10.25rem- Elemento
- Elemento
- Elemento
.list-gap-20.5rem- Elemento
- Elemento
- Elemento
.list-gap-30.75rem- Elemento
- Elemento
- Elemento
.list-gap-41rem- Elemento
- Elemento
- Elemento
.list-gap-51.25remReferencia
Clases disponibles
La referencia corresponde a las utilidades presentes actualmente en lists.css.
| Clase | Rango o valor | Resultado | Uso recomendado |
|---|---|---|---|
.list | Base | Normaliza margen, sangría, posición y altura de línea. | Aplicar a listas de contenido. |
.list-none | list-style: none | Elimina marcador y sangría. | Navegación y listas de interfaz. |
.list-{marcador} | 9 variantes | Cambia list-style-type. | Definir viñeta o numeración. |
.list-gap-{1…5} | 0.25rem…1.25rem | Añade margen inferior a cada hijo directo. | Controlar ritmo vertical. |
.list-inside | inside | Incluye el marcador dentro de la caja de contenido. | Bloques estrechos o alineaciones especiales. |
.list-outside | outside | Sitúa el marcador fuera de la caja de contenido. | Lectura editorial; valor base recomendado. |
.list-reset | Reset total | Elimina margen, padding, marcador y espaciado de hijos. | Base neutral para componentes propios. |
.list, las sublistas reciben sangría automática; los ul usan circle y los ol, lower-alpha.Recomendaciones
Buenas prácticas con listas
Semántica primero
Usa ol si el orden importa y ul cuando los elementos sean equivalentes.
Marcadores visibles
No elimines viñetas en contenido editorial si son necesarias para comprender la estructura.
Separación moderada
Elige un único nivel de gap por lista para conservar un ritmo visual consistente.
Reset intencional
Usa .list-reset sólo cuando un componente vaya a definir toda su presentación.