Demo

Esta página muestra diversos componentes de Bootstrap 5 usando un sistema de paletas basado en variables CSS. Usa el widget de abajo a la derecha para cambiar la paleta en tiempo real.

Estado General

Visión rápida de indicadores clave.

Activos Pendientes Hoy
Acciones Rápidas
Progreso Mensual
68%
Objetivo de cumplimiento de tareas este mes.

Botones & Alertas

Variaciones de Botones

Alertas

Info: Esta alerta usa la paleta primaria actual.
Nota: Ideal para mensajes neutrales del sistema.

Formulario de Ejemplo

Estado de Componentes

Tabla de Datos

Proyecto Responsable Estado Progreso Acciones
Portal Intranet Ana García En Curso
Sistema de Tickets Carlos López Pendiente
Integración ERP María Torres Planificado

Notificaciones Recientes

  • Nuevo usuario registrado hace 5 min
  • Reporte mensual generado hace 1 h
  • Integración con API externa fallida hace 3 h

Tipografía

Heading 1 - Display Grande

Heading 2 - Títulos de Sección

Heading 3 - Subtítulos

Heading 4 - Encabezados de Tarjetas

Heading 5 - Títulos Pequeños
Heading 6 - Subtítulos Menores

Este es un párrafo lead - destacado y más grande para introducción de contenido importante.

Este es un párrafo normal con texto de cuerpo estándar. La tipografía está optimizada para legibilidad con line-height adecuado y tamaños responsivos.

Este es texto pequeño y atenuado, ideal para metadata o información secundaria.