Otros componentes

Una colección de piezas que aparecen en casi cualquier proyecto real: preguntas frecuentes, carruseles, galerías de fotos, líneas de tiempo, indicadores de progreso, estados de carga y etiquetas. Todas son HTML, CSS y JavaScript vanilla, sin librerías, y con los colores en variables para que las adaptes a la marca de tu cliente en segundos.

Cómo usar estos demos

Prueba cada demo con el teclado (Tab, Enter, flechas, Esc): todos están pensados para funcionar sin mouse. Luego copia el código o ábrelo en el Playground.

Acordeón / FAQ

Cuándo usarlo: secciones de preguntas frecuentes, especificaciones de producto o cualquier contenido largo que conviene mostrar por partes.

Acordeón FAQ

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Cambia SOLO_UNA a false en el JS si quieres que se puedan abrir varias preguntas a la vez.
• --duracion controla la velocidad de apertura. La animación usa el truco grid-template-rows: 0fr → 1fr, que anima la altura sin calcularla en JS.
• Para agregar preguntas copia un bloque .faq__item y cambia los id (b5/p5) para que aria-controls y aria-labelledby sigan apuntando bien.
• Alternativa sin JS: usa <details> y <summary>; funciona igual de accesible, aunque animarlo es más limitado.

Carrusel / slider

Cuándo usarlo: banners promocionales, destacados de portafolio o testimonios. Úsalo con moderación: el contenido importante no debería quedar escondido en la diapositiva 4.

Carrusel

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• INTERVALO (en ms) define cada cuánto avanza solo. El autoplay se pausa con el mouse encima, con el foco dentro, con el botón de pausa y si el usuario prefiere menos movimiento.
• Agrega diapositivas copiando un <article class="slide">: los puntos se generan solos. Actualiza el aria-label ("5 de 5").
• Para imágenes reales usa background-image en cada .slide o pon un <img> con object-fit: cover.
• Funciona con flechas del teclado (con el carrusel enfocado) y con swipe en pantallas táctiles (umbral de 40px).

Error común

Un carrusel con autoplay sin botón de pausa incumple las pautas de accesibilidad (WCAG 2.2.2). Si algo se mueve solo más de 5 segundos, el usuario debe poder detenerlo.

Galería con lightbox

Cuándo usarlo: portafolios de fotógrafos, menús de restaurantes, catálogos de productos o cualquier sitio donde ver la imagen en grande importa.

Galería con lightbox

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Las "fotos" están hechas con degradados para que el demo no dependa de archivos externos. En tu proyecto reemplaza cada .arte por <img src="foto.jpg" alt="Descripción"> y en el lightbox usa también un <img> al que le cambias el src.
• minmax(150px, 1fr) en .galeria define el ancho mínimo de cada miniatura; súbelo para miniaturas más grandes.
• El lightbox se cierra con Esc, con la × o haciendo clic fuera; se navega con las flechas y mantiene el foco atrapado dentro mientras está abierto.
• Cambia --overlay para un fondo más claro u oscuro.

Timeline

Cuándo usarlo: historia de la empresa, pasos de un proceso, experiencia laboral en un CV o el seguimiento de un pedido.

Timeline

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• En móvil la línea va a la izquierda; desde 700px se centra y los eventos alternan de lado con :nth-child(even).
• --acento colorea los puntos y las fechas; --linea la línea vertical.
• Usa <time datetime="..."> con fechas completas (2024-03-15) si las tienes: ayuda a buscadores y lectores de pantalla.
• Es una lista ordenada <ol>, así que el orden tiene significado. Si es una línea de tiempo inversa (lo más nuevo arriba), simplemente cambia el orden de los <li>.

Barras de progreso

Cuándo usarlo: subida de archivos, formularios de varios pasos (checkout), cursos completados o metas de recaudación.

Barras de progreso

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• La barra lineal usa un degradado entre --acento y --acento-2.
• La circular es un SVG: el truco es stroke-dasharray igual a la circunferencia (2 × π × r) y stroke-dashoffset para "esconder" la parte que falta. Si cambias el radio r, cambia también CIRC en el JS.
• Para la de pasos, cambia los textos de cada .paso; si agregas o quitas pasos, ajusta el 25 (100 / número de tramos) en la función pintar().
• Siempre actualiza aria-valuenow junto con lo visual, como hace pintar(), para que el progreso se anuncie.

Skeleton loading

Cuándo usarlo: mientras se cargan datos de una API (listas de productos, perfiles, feeds). Se siente más rápido que un spinner porque el usuario ya ve la forma del contenido.

Skeleton loading

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --hueso y --brillo son los dos colores del efecto shimmer; --velocidad su duración.
• Diseña el esqueleto con la misma forma y tamaño que el contenido real para que no haya saltos al cargar.
• Reemplaza el setTimeout de cargar() por tu fetch() real y pinta las tarjetas cuando lleguen los datos.
• aria-busy="true" indica a los lectores de pantalla que la región se está cargando; cámbialo a false al terminar.

Chips y badges

Cuándo usarlo: etiquetas en un buscador o formulario (chips eliminables), filtros de catálogo (chips seleccionables), estados de pedidos en tablas (badges) y notificaciones sin leer (contador en icono).

Chips y badges

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Los colores de estado están en --ok, --aviso, --error e --info. El fondo suave se genera solo con color-mix().
• Los filtros usan aria-pressed para indicar si están activos; el estilo cambia con el selector [aria-pressed="true"], así el CSS y la accesibilidad siempre coinciden.
• Al eliminar un chip, el foco pasa al siguiente para que quien usa teclado no se pierda.
• El contador muestra 99+ cuando pasa de 99 y se oculta solo cuando está vacío (:empty).

Buena práctica

No uses sólo el color para comunicar un estado: los badges incluyen texto ("Pagado", "Cancelado"). Así también los entienden personas con daltonismo.

Resumen

• Cada componente usa HTML semántico (ol, time, button, role="progressbar") y atributos ARIA que se actualizan con JS.
• Respeta prefers-reduced-motion: el carrusel no se reproduce solo y el skeleton deja de animarse.
• Personaliza todo desde las variables de :root y los parámetros señalados en los comentarios del JS.