.list
Elimina bullets, márgenes y padding por defecto para convertir una lista en una base limpia y controlable.
<ul class="list">
...
</ul>Lists
Lists organiza listas estructurales y editoriales del sistema, permitiendo construir menús, grupos inline, listas verticales y listas con bullets.
Qué resuelve lists
El módulo lists define cómo se comportan distintos tipos de listas dentro del framework. Su función es cubrir tanto listas estructurales, como menús o grupos inline, como listas editoriales con bullets o numeración.
Lists no se encarga del contenido visual del proyecto, sino del comportamiento estructural y de la legibilidad de distintos formatos de lista.
Referencia del archivo
.list {
list-style: none;
margin: 0;
padding: 0;
}
ul.list,
ol.list {
list-style: none;
}
.list-inline {
display: flex;
gap: var(--gap, var(--space-2));
}
.list-inline > li {
display: inline-flex;
}
.list-stack {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.list-stack-sm { gap: var(--space-1); }
.list-stack-md { gap: var(--space-3); }
.list-stack-lg { gap: var(--space-4); }
.list-disc {
list-style: disc;
padding-inline-start: 1.25rem;
}
.list-decimal {
list-style: decimal;
padding-inline-start: 1.25rem;
}Reset de listas
Uso estructural
Se utiliza principalmente en navegación, menús, listas de acciones o cualquier grupo donde la semántica de lista debe mantenerse sin estilos nativos.
Listas inline
.list-inline
Convierte una lista en un grupo horizontal basado en flex. Es útil para menús, enlaces sociales, filtros y grupos compactos.
<ul class="list list-inline gap-2">
<li><a href="#">Inicio</a></li>
<li><a href="#">Docs</a></li>
<li><a href="#">Layout</a></li>
</ul>Cuándo usar
- Menús horizontales.
- Enlaces sociales.
- Filtros o tabs simples.
- Grupos de enlaces o acciones breves.
Listas verticales
Base
Organiza la lista en flujo vertical con gap base.
Compacta
Ritmo reducido para listas más cerradas.
Media
Mayor separación entre ítems.
Amplia
Útil para grupos con más aire visual.
<ul class="list list-stack list-stack-md">
<li>Punto uno</li>
<li>Punto dos</li>
<li>Punto tres</li>
</ul>Listas editoriales
.list-disc
Recupera bullets tipo disc con padding inicial controlado.
<ul class="list-disc">
<li>Primer punto</li>
<li>Segundo punto</li>
<li>Tercer punto</li>
</ul>.list-decimal
Activa numeración ordenada con padding inicial consistente.
<ol class="list-decimal">
<li>Paso uno</li>
<li>Paso dos</li>
<li>Paso tres</li>
</ol>Estas listas se usan cuando el contenido necesita retener una lógica editorial tradicional con bullets o numeración visible.
Cuándo usar cada tipo
Listas estructurales
.list.list-inline.list-stack
Se usan en navegación, grupos de acciones, menús, bloques UI y componentes del sistema.
Listas editoriales
.list-disc.list-decimal
Se usan cuando el contenido necesita una lectura editorial clásica con bullets o pasos numerados.
Lists vs stack vs align
Semántica de lista
Se usa cuando el grupo realmente es una lista o navegación.
Flujo vertical
Se usa para separar hijos dentro de un bloque, aunque no sean una lista.
Grupo flex
Se usa cuando la composición depende del eje flex, no de una semántica de lista.
Qué sí y qué no va en lists
Qué sí debe contener
- Reset de listas.
- Listas inline.
- Listas verticales.
- Listas editoriales con bullets o números.
- Espaciado estructural entre ítems.
Qué no debe contener
- Grid.
- Align helpers genéricos.
- Tipografía.
- Botones o estilos visuales del proyecto.
- Decoración no relacionada con listas.
Siguiente paso
Continúa con animations para revisar el sistema de movimiento del framework.