Componentes

Todos los componentes de la versión Free viven en components/, dentro del layer components, y se construyen con @apply sobre utilities de Tailwind + tokens propios.

Buttons

El componente .btn expone variantes de color, tamaño y forma. Se configuran desde cuatro CSS variables (--btn-py, --btn-px, --btn-primary-color, --btn-secondary-color).

<button class="btn btn-primary">Acción principal</button>
<button class="btn btn-outline">Secundaria</button>
<a class="btn btn-primary btn-lg btn-rounded" href="#">CTA grande</a>
<button class="btn btn-primary btn-circle" aria-label="Añadir">+</button>

Variantes

Cards

La .card aplica padding: var(--spacing-block) y border-radius: var(--radius-card). Hay cinco anchos máximos (xs, sm, md, lg, xl) y dos variantes de estilo.

<article class="card card-md card-outline">
  <h3 class="subheading">Título</h3>
  <p class="text-medium">Descripción breve.</p>
</article>

<article class="card card-lg card-elevated">...</article>

Tipografía

Ver Tipografía para la tabla completa de .display, .heading, .subheading y .text-*.

Layouts

<section>

FDS aplica estilos directamente al elemento <section>: container con ancho máximo, padding fluido, gap entre bloques hijos. Gestiona además el stacking entre secciones consecutivas con fondo propio (.has-background).

<main>
  <section>
    <div>
      <h1 class="heading">Título</h1>
      <p class="text-large">Intro...</p>
    </div>
  </section>

  <section class="has-background bg-primary-50">
    <div>...</div>
  </section>
</main>

.content-flex

Posiciona contenido en una de nueve casillas dentro de su contenedor. Útil para heroes con overlay de texto.

<div class="content-flex bottom-left">
  <h2 class="display-sm">Abajo a la izquierda</h2>
</div>

Posiciones disponibles: top-left, top, top-right, left, center, right, bottom-left, bottom, bottom-right.

Utilities auxiliares

• .bg-image — Imagen absoluta a pantalla completa detrás del contenido (inset-0 object-cover -z-1).
• .click-parent — Convierte el padre en área clicable vía ::after.
• .focus-from-child — Aplica foco visual al padre cuando un hijo recibe foco (:focus-within).

Grids proporcionales

FDS añade utilities propias vía @utility:

<div class="grid grid-cols-1-2">  <!-- 1fr 2fr -->
<div class="grid grid-cols-2-1">  <!-- 2fr 1fr -->
<div class="grid grid-cols-1-2-1">  <!-- 1fr 2fr 1fr -->
<div class="grid grid-auto-fit-md">  <!-- auto-fit con min del token card-md -->