Componentes

Componentes

Cards, alertas, acordeones, tabs, modales, tooltips y spinners.

Alertas

HTML — Alertas con íconos SVG 
<!-- Los íconos SVG usan currentColor -->
<!-- heredan el color del texto de cada alerta -->

<div class="alert alert-success" role="alert">
  <span class="alert-icon" aria-hidden="true">
    <!-- SVG check-circle con currentColor -->
    <svg viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2"
         width="20" height="20">
      <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
  </span>
  <div class="alert-body">
    <strong>¡Exitoso!</strong>
    <p>Operación completada.</p>
  </div>
</div>

<!-- Variantes de clase: -->
<!-- alert-marca | alert-primary | alert-success -->
<!-- alert-danger | alert-warning | alert-info   -->

Cards

Destacado
Título de la card

Texto de apoyo para la card con contenido de ejemplo.

Actualizado hace 2 días
Marca
Card institucional

Card con el color institucional de la Universidad del Valle.

Éxito
Card de éxito

Indica un estado positivo o completado.

Alerta
Card de error

Indica un estado de error o advertencia crítica.

HTML — Cards 
<div class="card">
  <div class="card-header">Encabezado</div>
  <div class="card-body">
    <div class="card-title">Título</div>
    <p class="card-text">Contenido.</p>
    <button class="btn btn-marca btn-sm">Ver más</button>
  </div>
  <div class="card-footer">Hace 2 días</div>
</div>

<!-- Variantes de color -->
<div class="card card-marca">...</div>
<div class="card card-primary">...</div>
<div class="card card-success">...</div>
<div class="card card-danger">...</div>

Acordeones

Los requisitos varían según el programa. Consulte la página de admisiones.

Ingrese a campusvirtual.univalle.edu.co con sus credenciales institucionales.

La sede principal está en Ciudad Universitaria Meléndez, Cali. Además hay sedes en Palmira, Buga, Tuluá y otras ciudades.
HTML — Acordeón accesible 
<div class="accordion">
  <div class="accordion-item">
    <h3 style="margin:0">
      <button class="accordion-btn"
              aria-expanded="false"
              aria-controls="panel1"
              id="btn1">
        Pregunta frecuente
        <span class="accordion-icon"
               aria-hidden="true">
          <!-- SVG chevron con currentColor -->
        </span>
      </button>
    </h3>
    <div class="accordion-body" id="panel1"
         role="region" aria-labelledby="btn1">
      Respuesta.
    </div>
  </div>
</div>

Tabs

Contenido de la pestaña Descripción.

Contenido de Requisitos.

Contenido de Costos.

Todos los programas disponibles.

Programas de pregrado.

Posgrados, especializaciones y maestrías.

HTML — Tabs con ARIA 
<div class="tab-container">
  <div class="tab-list" role="tablist"
       aria-label="Secciones">
    <button class="tab-btn active" role="tab"
            aria-selected="true"
            aria-controls="panel1"
            id="tab1">Pestaña 1</button>
    <button class="tab-btn" role="tab"
            aria-selected="false"
            aria-controls="panel2"
            id="tab2" tabindex="-1">Pestaña 2</button>
  </div>
  <div class="tab-panel active" id="panel1"
       role="tabpanel" aria-labelledby="tab1">
    Contenido.
  </div>
</div>

Modales

HTML — Modal accesible 
<button class="btn btn-marca"
        data-modal-open="mi-modal">Abrir</button>

<div class="modal-overlay" id="mi-modal"
     role="dialog" aria-modal="true"
     aria-labelledby="modal-titulo">
  <div class="modal">
    <div class="modal-header">
      <h2 class="modal-title" id="modal-titulo">Título</h2>
      <button class="modal-close" aria-label="Cerrar">
        <!-- SVG X con currentColor -->
      </button>
    </div>
    <div class="modal-body">Contenido...</div>
    <div class="modal-footer">
      <button class="btn btn-outline-secondary" data-modal-close>Cancelar</button>
      <button class="btn btn-marca" data-modal-close>Aceptar</button>
    </div>
  </div>
</div>

Tooltips

HTML + CSS — Tooltip accesible 
<div class="tooltip-wrap">
  <button class="btn btn-outline-marca"
          aria-describedby="tip1">
    Ver ayuda
  </button>
  <div class="tooltip-box" id="tip1"
       role="tooltip">
    Texto de ayuda contextual
  </div>
</div>

Spinners

HTML — Spinner de carga 
<div class="spinner" role="status">
  <span class="sr-only">Cargando...</span>
</div>

<!-- Tamaños -->
<div class="spinner spinner-sm" role="status">...</div>
<div class="spinner spinner-lg" role="status">...</div>

<!-- Colores -->
<!-- spinner-primary | spinner-success -->