UdeC Frontend Library - Componentes y Patrones

Tarjetas Simples

Clases: .card .card-simple

Tarjeta Simple Default

Esta es una tarjeta simple con hover completo. Al pasar el mouse, toda la tarjeta cambia de color.

Tarjeta Light

Variante clara de la tarjeta con fondo blanco.

Tarjeta Dark

Variante oscura de la tarjeta con fondo azul y texto claro.

Descubrir

Tarjetas de Noticias

Clases: .card .card-news

Cultura

Universidad de Concepción inaugura nueva biblioteca

La nueva biblioteca cuenta con espacios modernos para el estudio y tecnología de punta.

18 de diciembre, 2024

Ciencia y Tecnología

Investigadores UdeC desarrollan nuevo material sustentable

El innovador material podría revolucionar la industria de la construcción.

15 de diciembre, 2024

Deporte

Equipo UdeC clasifica a la final nacional

Gran desempeño del equipo universitario en el campeonato regional.

12 de diciembre, 2024

Investigación Destacada

Descubrimiento científico importante para la región.

Nuevo Convenio Internacional

Alianza estratégica con universidad europea.

Conocer más

Premio Nacional

Profesora UdeC recibe reconocimiento nacional.

Ver detalles

Actividad Cultural

Festival de arte y música en el campus.

Participar

Universidad

Admisión 2025: Todo lo que necesitas saber

Guía completa del proceso de admisión para el próximo año académico.

Humanidades

Seminario sobre historia regional

Expertos analizan el desarrollo histórico de la región del Biobío.

Salud

Campaña de salud preventiva en el campus

Actividades gratuitas para promover estilos de vida saludables.

Académicas

Charlas magistrales de expertos internacionales

Ciclo de conferencias sobre innovación y tecnología.

Cultura

Exposición de arte contemporáneo

Obras de artistas locales y nacionales en la galería universitaria.

Tecnología

Hackathon estudiantil 2024

Competencia de programación con premios y reconocimientos.

Flow Utilities en Componentes

Ejemplos de uso de .flow en contenido real de componentes y artículos.

Artículo con Flow

Ciencia y Tecnología

Avances en Investigación Científica

La Universidad de Concepción continúa destacándose en el ámbito de la investigación científica, con proyectos innovadores que buscan solucionar problemas complejos de nuestra sociedad.

Este año, nuestros investigadores han logrado importantes avances en áreas como la biotecnología, la física de materiales y las ciencias ambientales.

Proyectos Destacados

Desarrollo de biomateriales para medicina regenerativa
Estudio de energías renovables en la región
Investigación en conservación de ecosistemas marinos

Los resultados de estas investigaciones han sido publicados en revistas científicas de alto impacto internacional.

"La investigación es fundamental para el desarrollo de la sociedad y la formación de profesionales de excelencia."

La universidad continuará impulsando la investigación como uno de sus pilares fundamentales.

Leer artículo completo

Content Flow para Lectura

¿Qué es el Sistema Flow?

El sistema flow utiliza el selector CSS > * + * (lobotomized owl) para crear espaciado vertical automático entre elementos hermanos.

Esto significa que no necesitas agregar márgenes manualmente a cada elemento. El espaciado se aplica automáticamente basándose en el tipo de elemento.

Ventajas del Sistema Flow

Espaciado consistente y predecible
Menos código CSS necesario
Fácil de mantener y actualizar
Espaciado contextual según el tipo de elemento

Las clases flow son especialmente útiles para contenido editorial donde el flujo de lectura es importante.

El espaciado apropiado mejora significativamente la legibilidad y la experiencia del usuario.

Puedes usar diferentes variantes de flow según tus necesidades: desde .flow-xs para espaciado mínimo hasta .flow-2xl para espaciado amplio.

Estructura de Clases (OOP)

Botones (Nomenclatura BEM)

Padding base: var(--spacing-4) arriba/abajo, var(--spacing-12) izquierda/derecha

<!-- Botón base -->
<button class="button">Button Primary</button>

<!-- Tamaños -->
<button class="button button--small">Small</button>
<button class="button button--large">Large</button>

<!-- Variantes de estilo -->
<button class="button button--outline">Outline</button>
<button class="button button--secondary">Secondary</button>
<button class="button button--text">Text</button>
<button class="button button--rounded">Rounded</button>

<!-- Combinaciones -->
<button class="button button--rounded button--secondary">
  Rounded Secondary
</button>

<!-- Con ícono (elemento button__icon) -->
<button class="button button--icon">
  <span>Con ícono</span>
  <span class="button__icon">
    <svg>...</svg>
  </span>
</button>

Tarjetas

<!-- Clase base + modificador -->
<article class="card card-simple">
  <img class="card__image" src="..." alt="...">
  <div class="card__content">
    <h3><a href="#">Título</a></h3>
    <p>Contenido...</p>
  </div>
  <div class="card__actions">
    <a href="#" class="button button--text">Leer más</a>
  </div>
</article>

Tarjeta de Noticias

<!-- Clase base + tipo específico -->
<article class="card card-news">
  <img class="card-news__image" src="..." alt="...">
  <div class="card-news__content">
    <span class="category-tag" data-category="culture">Cultura</span>
    <h3 class="card-news__title">
      <a href="#" class="card-news__link">Título</a>
    </h3>
    <p class="card-news__excerpt">Descripción...</p>
  </div>
</article>

Patrones

<!-- Pattern Banner Card -->
<section class="banner-card">
  <div class="banner-card__cover">
    <div class="banner-card__cover-content">
      <h2 class="banner-card__title">Título Hero</h2>
    </div>
  </div>
  <div class="banner-card__grid">
    <!-- Cards aquí -->
  </div>
</section>

<!-- Pattern Cards Grid -->
<section class="pattern-cards">
  <div class="pattern-cards__header">
    <h2 class="pattern-cards__title">Título</h2>
  </div>
  <div class="pattern-cards__grid">
    <!-- Cards aquí -->
  </div>
</section>

UdeC Frontend Library - Universidad de Concepción