Content Flex

.content-flex es un helper de posicionamiento para organizar contenido en 9 puntos dentro de un contenedor. Es util en heroes, overlays, cards visuales, bloques con imagen de fondo, CTAs y secciones donde no quieres escribir siempre la misma combinacion de flex, justify-*, items-* y text-*.

Uso basico

Combina .content-flex con una clase de posicion:

<div class="content-flex top-left">
  <span class="eyebrow">Sistema</span>
  <h2 class="heading">Titulo alineado arriba a la izquierda</h2>
  <p class="text-medium">Texto de apoyo.</p>
</div>

Sin clase de posicion, el default visual esperado es centrado.

Posiciones disponibles

<div class="grid grid-cols-3 gap-content">
  <div class="card card-outline min-h-32 content-flex top-left"><span class="text-small">top-left</span></div>
  <div class="card card-outline min-h-32 content-flex top"><span class="text-small">top</span></div>
  <div class="card card-outline min-h-32 content-flex top-right"><span class="text-small">top-right</span></div>
  <div class="card card-outline min-h-32 content-flex left"><span class="text-small">left</span></div>
  <div class="card card-elevated min-h-32 content-flex center"><span class="text-small">center</span></div>
  <div class="card card-outline min-h-32 content-flex right"><span class="text-small">right</span></div>
  <div class="card card-outline min-h-32 content-flex bottom-left"><span class="text-small">bottom-left</span></div>
  <div class="card card-outline min-h-32 content-flex bottom"><span class="text-small">bottom</span></div>
  <div class="card card-outline min-h-32 content-flex bottom-right"><span class="text-small">bottom-right</span></div>
</div>

Casos de uso

Cabecera de seccion

<header class="content-flex top-left max-w-3xl">
  <span class="eyebrow">Servicios</span>
  <h2 class="heading">Soluciones para equipos que publican rapido</h2>
  <p class="text-large">Una descripcion breve antes de un grid de cards.</p>
</header>

Hero centrado

<section>
  <div>
    <div class="content-flex center min-h-[60vh] max-w-4xl">
      <h1 class="display-sm">Una portada equilibrada</h1>
      <p class="text-large">Contenido centrado con gap semantico.</p>
      <a class="btn btn-primary" href="#">Empezar</a>
    </div>
  </div>
</section>

Overlay sobre imagen

<div class="relative min-h-[28rem] overflow-hidden rounded-lg">
  <img class="bg-image" src="..." alt="" />
  <div class="content-flex bottom-left relative z-10 p-block text-white">
    <h2 class="heading-sm">Titulo sobre imagen</h2>
    <p class="text-medium">Texto anclado abajo a la izquierda.</p>
  </div>
</div>

Spacing interno

.content-flex usa gap-content, el token semantico pensado para separar piezas de contenido relacionadas. Tambien resetea patrones tipo space-y para evitar dobles espaciados.

Si necesitas mas aire entre grupos, no cambies .content-flex; anade una estructura interna:

<div class="content-flex top-left">
  <header class="grid gap-content">
    <span class="eyebrow">Guia</span>
    <h2 class="heading">Titulo</h2>
  </header>
  <p class="text-large">Texto de apoyo.</p>
</div>

Configuracion

El gap viene de --ft-gap-content, definido normalmente como var(--spacing-block):

--ft-gap-content: var(--spacing-block);

Errores comunes