Componentes del Sistema de Diseño UPN
Biblioteca de componentes construidos con Tailwind CSS para el tema institucional de la Universidad Pedagógica Nacional
Paleta de Colores
UPN Azul (Color institucional)
upn-50
#e6f0f9
upn-100
#cce1f3
upn-300
#66a5db
upn-500
#004991
upn-700
#002c57
Colores Semánticos
Success
Warning
Danger
Tipografía
text-6xl (Display)
Universidad Pedagógica Nacional
text-5xl
Formando educadores
text-4xl
Título principal
text-3xl
Título de sección
text-2xl
Subtítulo
text-xl
Título de tarjeta
text-lg
Texto destacado o lead paragraph
text-base
Texto normal del cuerpo del documento
text-sm
Texto pequeño para metadatos
Pesos de fuente
font-normal - Peso normal (400)
font-medium - Peso medio (500)
font-semibold - Semi negrita (600)
font-bold - Negrita (700)
font-extrabold - Extra negrita (800)
Iconografía - Phosphor Icons
Sistema de iconos basado en Phosphor Icons. Para usar un icono, agrega la clase ph ph-{nombre}.
Iconos Comunes
Tamaños
Con botones
<i class="ph ph-house"></i>
Catálogo completo en: phosphoricons.com
Botones
Variantes
Tamaños
Estados
Con iconos
<button class="btn btn-primary">Texto</button>
Badges
Variantes
Con iconos
<span class="badge badge-primary">Texto</span>
Cards
Card básico
Este es un ejemplo de card básico con imagen, título y descripción.
Card con hover
Pasa el cursor sobre esta tarjeta para ver el efecto de elevación.
Leer más →Card con icono
Tarjeta con icono decorativo en la parte superior.
<div class="card">
<div class="card-body">...</div>
</div>
Formularios
<input type="text" class="input">
Alertas
Información
Este es un mensaje informativo para el usuario.
Éxito
La operación se completó correctamente.
Advertencia
Revisa esta información antes de continuar.
Error
Ocurrió un error al procesar tu solicitud.
Sistema de Grid
2 Columnas
3 Columnas
4 Columnas
Responsive (1 → 2 → 3)
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">...</div>
Utilidades Comunes
Espaciado
p-4- Padding de 1remm-4- Margin de 1remgap-4- Gap de 1remspace-y-4- Espacio vertical
Flexbox
flex- Display flexitems-center- Align items centerjustify-between- Justify space betweenflex-col- Dirección columna
Bordes
rounded- Border radiusrounded-lg- Border radius largeborder- Border 1pxshadow-md- Box shadow medium
Responsive
sm:- ≥640pxmd:- ≥768pxlg:- ≥1024pxxl:- ≥1280px
Modals
<div class="modal" id="modal">
<div class="modal-content">
<div class="modal-header">...</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
</div>
Dropdowns
<div class="dropdown">
<button>Trigger</button>
<div class="dropdown-menu">...</div>
</div>
Tabs
Contenido del Tab 1
Contenido del Tab 2
Contenido del Tab 3
<div class="tabs">
<button class="tab active">Tab 1</button>
</div>
Accordion
Contenido de la sección 1.
Contenido de la sección 2.
<div class="accordion-item">
<button class="accordion-header">...</button>
<div class="accordion-content">...</div>
</div>
Pagination
<nav class="pagination">
<button class="pagination-item active">1</button>
</nav>
Tables
| Programa | Facultad | Modalidad | Duración |
|---|---|---|---|
| Licenciatura en Pedagogía | Educación | Presencial | 8 semestres |
| Licenciatura en Matemáticas | Ciencia y Tecnología | Presencial | 10 semestres |
| Maestría en Educación | Educación | Virtual | 4 semestres |
<table class="table">...</table>
Toast Notifications
<div class="toast toast-success">
<div class="toast-content">...</div>
</div>
Tooltips
<div class="tooltip">
<button>Hover</button>
<span class="tooltip-content">Tooltip</span>
</div>
Progress Bars
Default (75%)
Success (100%)
Warning (50%)
Danger (25%)
<div class="progress">
<div class="progress-bar" style="width: 75%"></div>
</div>
Dividers
Contenido superior
Contenido inferior
<div class="divider"></div>
<div class="divider-text"><span>Text</span></div>
Avatars
<div class="avatar avatar-md">
<img src="..." alt="Avatar">
</div>
List Groups
<div class="list-group">
<div class="list-group-item active">...</div>
</div>
Loading Spinners
Circular (Default)
Dots
Bars
Pulse
Ring
<div class="spinner"></div>
<div class="spinner-dots"><span></span><span></span><span></span></div>
<div class="spinner-bars"><span></span> ... </div>
<div class="spinner-pulse"></div>
<div class="spinner-ring"></div>
Stepper
<div class="stepper">
<div class="step completed">...</div>
</div>
Timeline
1955 - Fundación
Se funda la Universidad Pedagógica Nacional
1980 - Expansión
Apertura de nuevas facultades
2020 - Modernización
Implementación de campus virtual
<div class="timeline">
<div class="timeline-item">...</div>
</div>
Statistics
<div class="stat">
<div class="stat-value">5,000+</div>
<div class="stat-label">Estudiantes</div>
</div>
Skeleton Loaders
<div class="skeleton h-32"></div>
<div class="skeleton-text"></div>
Empty State
No hay resultados
No encontramos ningún programa que coincida con tu búsqueda.
<div class="empty-state">
<i class="ph ph-icon empty-state-icon"></i>
<h3 class="empty-state-title">...</h3>
</div>
File Upload
Arrastra archivos aquí
o haz clic para seleccionar
<div class="file-upload">...</div>
Quotes / Testimonios
"La UPN me dio las herramientas necesarias para convertirme en el educador que siempre quise ser."
Egresada - Licenciatura en Pedagogía
<div class="quote">
<p class="quote-text">...</p>
<p class="quote-author">...</p>
</div>
Rating
<div class="rating">
<i class="ph ph-star rating-star"></i>
</div>
Chips / Tags
<span class="chip">
Texto
<i class="ph ph-x chip-close"></i>
</span>
Back to Top Button
Desplázate hacia abajo para ver el botón
<div class="back-to-top">
<i class="ph ph-arrow-up"></i>
</div>
Search Box
<div class="search-box">
<i class="ph ph-magnifying-glass search-icon"></i>
<input class="search-input">
</div>
Video Player
<div class="video-player">
<div class="video-overlay">
<div class="video-play-btn">...</div>
</div>
</div>
Social Share Buttons
<button class="social-btn social-btn-facebook">
<i class="ph ph-facebook-logo"></i>
</button>