Librería de Destacados

Un número grande con contexto breve. Ideal para "94% de empleabilidad", número de alumnos, becas concedidas, etc.

<div class="stat-highlight">
  <p class="stat-number">94%</p>
  <p class="stat-label">Empleabilidad al año de graduarse</p>
  <p class="stat-context">Datos del último informe de inserción laboral.</p>
</div>

<style>
.stat-highlight{ text-align:center; }
.stat-highlight .stat-number{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(48px,8vw,72px);
  color:var(--color-primary);
  line-height:1;
  margin:0;
}
.stat-highlight .stat-label{
  font-size:13px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--color-ink-soft); margin-top:10px;
}
.stat-highlight .stat-context{
  font-size:14px; color:var(--color-ink-soft);
  max-width:360px; margin:14px auto 0;
}
</style>

Para citas de rectorado, profesorado o alumnado. El borde rojo y la Playfair Display en cursiva le dan carácter personalidad.

<blockquote class="quote-highlight">
  <p>"La universidad no forma solo profesionales, forma personas
  capaces de transformar su entorno."</p>
  <footer><strong>Dra. Elena Ruiz</strong> — Vicerrectora de Investigación</footer>
</blockquote>

<style>
.quote-highlight{
  position:relative; padding-left:32px;
  border-left:3px solid var(--color-primary);
}
.quote-highlight p{
  font-family:var(--font-display); font-style:italic;
  font-size:22px; font-weight:500; color:var(--color-ink);
  margin:0 0 16px; line-height:1.45;
}
.quote-highlight footer{ font-size:13px; color:var(--color-ink-soft); }
.quote-highlight footer strong{ color:var(--color-ink); font-weight:500; }
</style>

Tarjeta oscura con insignia "Nuevo" y llamada a la acción, pensada para lanzamientos de grados, másteres o cursos de verano.

<div class="course-card">
  <span class="badge">Nuevo · Matrícula abierta</span>
  <h3>Máster en Inteligencia Artificial Aplicada</h3>
  <p class="meta">60 ECTS · Modalidad híbrida · Inicio en octubre</p>
  <a class="cta" href="#">Ver plan de estudios →</a>
</div>

<style>
.course-card{
  display:flex; flex-direction:column;
  background:var(--color-ink); color:var(--color-paper);
  border-radius:8px; overflow:hidden; max-width:420px;
}
.course-card .badge{
  display:inline-block; background:var(--color-primary); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 12px; border-radius:20px; margin:24px 24px 0; width:fit-content;
}
.course-card h3{
  font-family:var(--font-display); font-size:26px; font-weight:600;
  margin:16px 24px 4px; line-height:1.2;
}
.course-card .meta{ margin:0 24px; font-size:13px; color:#B9B6AE; }
.course-card .cta{
  display:inline-flex; align-items:center; gap:8px; margin:22px 24px 24px;
  color:#fff; font-size:14px; font-weight:500; text-decoration:none;
  border-bottom:1px solid var(--color-primary); width:fit-content; padding-bottom:2px;
}
</style>

Franja con fondo suave para avisos de plazos de matrícula, becas o cambios de horario. No es un error, es información relevante, si confunde por estar en color rojo, podemos darle otros colores.

<div class="alert-highlight">
  <span class="icon">!</span>
  <div>
    <strong>El plazo de solicitud de becas cierra el 15 de septiembre</strong>
    <p>Recuerda adjuntar el certificado de renta actualizado.</p>
  </div>
</div>

<style>
.alert-highlight{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--color-primary-soft); border-left:4px solid var(--color-primary);
  padding:18px 20px; border-radius:0 6px 6px 0;
}
.alert-highlight .icon{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--color-primary); color:#fff; display:flex;
  align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:15px;
}
.alert-highlight strong{ display:block; font-size:14px; color:var(--color-primary-dark); margin-bottom:2px; }
.alert-highlight p{ margin:0; font-size:14px; color:var(--color-ink); }
</style>

Varias cifras en línea, separadas por finas divisiones. Útil en páginas "Sobre la universidad" o memorias anuales.

<div class="keyfacts">
  <div class="fact"><div class="n"><span>+</span>12.000</div><div class="l">Estudiantes</div></div>
  <div class="fact"><div class="n">45</div><div class="l">Titulaciones</div></div>
  <div class="fact"><div class="n">1968</div><div class="l">Fundación</div></div>
  <div class="fact"><div class="n">38</div><div class="l">Países de origen</div></div>
</div>

<style>
.keyfacts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); text-align:center; }
.keyfacts .fact{ padding:0 16px; border-right:1px solid var(--color-line); }
.keyfacts .fact:last-child{ border-right:none; }
.keyfacts .fact .n{ font-family:var(--font-display); font-weight:700; font-size:34px; color:var(--color-ink); }
.keyfacts .fact .n span{ color:var(--color-primary); }
.keyfacts .fact .l{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-ink-soft); margin-top:4px; }
</style>

Frase flotante que rompe un bloque de texto largo, típica de entrevistas o noticias. Se apila en móvil.

<div class="editorial-wrap">
  <span class="pull">"El futuro de la universidad se escribe
  en los laboratorios, no en los despachos."</span>
  Durante la última década, la inversión en investigación aplicada
  se ha triplicado... (resto del artículo)
</div>

<style>
.editorial-wrap{ font-size:15px; color:var(--color-ink-soft); }
.editorial-wrap .pull{
  float:right; width:42%; margin:4px 0 12px 24px;
  font-family:var(--font-display); font-size:21px; font-weight:600; font-style:italic;
  color:var(--color-ink); line-height:1.35;
  padding:2px 0 2px 20px; border-left:2px solid var(--color-primary);
}
@media (max-width:520px){
  .editorial-wrap .pull{ float:none; width:100%; margin:16px 0; }
}
</style>

Bloque oscuro con fecha en caja, pensado para campañas de captación de estudiantes con urgencia real (no artificial).

<div class="deadline-highlight">
  <div class="msg">
    <div class="eyebrow">Admisiones 2026/27</div>
    <h4>Cierra el plazo de preinscripción</h4>
  </div>
  <div class="date-box"><div class="d">30</div><div class="m">Sept.</div></div>
</div>

<style>
.deadline-highlight{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--color-ink) 0%, #35302C 100%);
  color:#fff; padding:26px 28px; border-radius:8px;
}
.deadline-highlight .eyebrow{
  font-size:12px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--color-primary); font-weight:700; margin-bottom:6px;
}
.deadline-highlight h4{ font-family:var(--font-display); font-size:21px; margin:0; font-weight:600; }
.deadline-highlight .date-box{
  text-align:center; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); border-radius:6px; padding:10px 18px;
}
.deadline-highlight .date-box .d{ font-family:var(--font-display); font-size:24px; font-weight:700; line-height:1; }
.deadline-highlight .date-box .m{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#C9C5BC; }
</style>

Testimonio breve de un alumno o egresado, con inicial como avatar (fácil de sustituir por una foto real).

<div class="testimonial-highlight">
  <span class="avatar">M</span>
  <div>
    <p>"Los laboratorios me dieron acceso a equipos que nunca
    imaginé usar antes de terminar la carrera."</p>
    <div class="who"><strong>Marta Gil</strong> — Egresada, Grado en Bioingeniería</div>
  </div>
</div>

<style>
.testimonial-highlight{ display:flex; gap:18px; align-items:flex-start; max-width:520px; }
.testimonial-highlight .avatar{
  flex-shrink:0; width:56px; height:56px; border-radius:50%;
  background:var(--color-primary); color:#fff; display:flex;
  align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:20px;
}
.testimonial-highlight p{ font-size:15px; color:var(--color-ink); margin:0 0 10px; }
.testimonial-highlight .who{ font-size:13px; color:var(--color-ink-soft); }
.testimonial-highlight .who strong{ color:var(--color-ink); font-weight:500; }
</style>