Definición
El componente carrusel de cards permite navegar a través de un conjunto de cards mediante un scroll horizontal.
En pantallas anchas, la existencia de un scroll horizontal se hace evidente mediante la inclusión de flechas a ambos lados (desactivadas, no ocultas, si no se puede avanzar en esa dirección). Un clic en la flecha cambia todo el contenido del carrusel, incluso si este se compone de varias tarjetas.
En las versiones responsive orientadas a móviles y tablets, el scroll se realiza mediante el gesto de pulsar y arrastrar (swipe). Además, en lugar de las flechas se muestra bleeding (contenido parcial) en las direcciones en las que se pueda hacer scroll.
Anatomía
Se compone de:
- Card: Cada una de las cards que completan el componente
- Flechas de navegación: botones que solo contienen iconos y que hacen avanzar el carrusel o regresan a la diapositiva anterior.
- Indicador de avance: indica el número de pantallas de scroll disponibles y permite acceder a cada una de ellas. Este elemento se presenta solo en el tipo ancho completo en escritorio.
- Ver más (opcional): Enlace a página con más información o listado de resultados
Tipos
Carrusel con múltiples cards
El carrusel muestra varias cards simultáneamente en pantalla, con un máximo de cuatro si se utiliza el ancho completo del grid. El número de cards que se muestran simultáneamente depende del ancho del componente y de la pantalla, llegando a una sola card en los dispositivos de pantallas más reducidas (p.ej. teléfonos móviles).
Cuando se muestran varias cards, se incluye un indicador de avance bajo el carrusel que indica el número de pantallas de scroll disponibles y permite acceder a cada una de ellas mediante click.
Carrusel con una card
Muestra una sola card en todos los anchos de pantalla y dispositivo. No incluye indicador de avance.
Pautas de uso
No ocultes información esencial
No utilices un carrusel para presentar información esencial, ya que muchos de tus usuarios no interactuarán con él. Si quieres que los usuarios consulten la información de todas las cards, disponlas en una rejilla (grid).
Limita el número de cards
Un número demasiado elevado de diapositivas puede fatigar a los usuarios. No incluyas más de 16 cards en un carrusel.
Componentes relacionados
Formado por:
Similar a:
Forma parte de:
Recursos asociados al componente
Implementación:
Storybook (solo accesible desde la RCJA)
Control de versiones
| Fecha | Versión | Notas |
|---|---|---|
| 20/03/2026 | 1.3 | Se redefinen los tipos y se actualizan pautas de uso. |