Cards

Las cards de FDS son contenedores de contenido con padding, radio y ancho maximo opcional. Estan pensadas para features, pricing, entradas, servicios, metricas, testimonios o cualquier bloque repetible que deba convivir bien con grids.

El componente es deliberadamente pequeno: FDS no impone estructura interna. La jerarquia la construyes combinando .card con clases tipograficas, botones, grids y utilidades de spacing.

Anatomia

<article class="card card-elevated">
  <span class="eyebrow">Feature</span>
  <h3 class="subheading-sm">Tokens fluidos</h3>
  <p class="text-medium">Descripcion breve del beneficio.</p>
</article>

.card {
  padding: var(--spacing-block);
  border-radius: var(--radius-card);
  background-color: var(--ft-color-background);
  width: 100%;
}

La card usa --spacing-block, por eso su aire interno sigue la escala semantica del sistema. Si compactas o abres el spacing global, las cards acompanaran el cambio.

Variantes

<div class="grid grid-auto-fit-md gap-columns">
  <article class="card">
    <span class="eyebrow">Base</span>
    <h3 class="subheading-sm">Card simple</h3>
    <p class="text-medium">
      Usa el padding semantico del sistema y ocupa todo el ancho disponible.
    </p>
  </article>

  <article class="card card-outline">
    <span class="eyebrow">Outline</span>
    <h3 class="subheading-sm">Menor peso visual</h3>
    <p class="text-medium">
      Buena para listados densos, comparativas y bloques secundarios.
    </p>
  </article>

  <article class="card card-elevated">
    <span class="eyebrow">Elevated</span>
    <h3 class="subheading-sm">Mas presencia</h3>
    <p class="text-medium">
      Util para destacar una opcion, un feature o una pieza interactiva.
    </p>
  </article>
</div>

Tamanos

Los tamanos de card controlan max-width, no el ancho obligatorio. Esto permite que la card ocupe el espacio disponible en mobile y quede limitada en layouts mas amplios.

Las mismas variables se usan como minimos de grid-auto-fill-* y grid-auto-fit-*. Esa relacion hace que card y grid hablen el mismo idioma.

--ft-card-xs: 12rem;
--ft-card-sm: 14rem;
--ft-card-md: 18rem;
--ft-card-lg: 24rem;
--ft-card-xl: 36rem;

Cards en grid

Para listados de servicios, features o entradas, usa .card dentro de grid-auto-fill-* o grid-auto-fit-*:

<div class="grid grid-auto-fill-md gap-columns">
  <article class="card card-elevated">...</article>
  <article class="card card-elevated">...</article>
  <article class="card card-elevated">...</article>
</div>

grid-auto-fill-md usa --ft-card-md como minimo de columna y lo limita al 100% del contenedor. Si el minimo de card es mayor que el viewport movil, no deberia aparecer scroll horizontal.

<div class="grid grid-auto-fill-md gap-columns">
  <article class="card card-elevated focus-from-child">
    <span class="eyebrow">Feature</span>
    <h3 class="subheading-sm">Tokens fluidos</h3>
    <p class="text-medium">
      Tipografia y spacing escalan desde los knobs sin media queries manuales.
    </p>
    <a class="btn btn-link click-parent" href="#">Leer mas</a>
  </article>

  <article class="card card-outline focus-from-child">
    <span class="eyebrow">Layout</span>
    <h3 class="subheading-sm">Secciones inteligentes</h3>
    <p class="text-medium">
      El padding vertical se ajusta al contexto: inicio, cierre y fondos.
    </p>
    <a class="btn btn-link click-parent" href="#">Leer mas</a>
  </article>

  <article class="card card-elevated focus-from-child">
    <span class="eyebrow">Grids</span>
    <h3 class="subheading-sm">Auto-fill seguro</h3>
    <p class="text-medium">
      Los minimos de card se limitan al 100% para evitar overflow en mobile.
    </p>
    <a class="btn btn-link click-parent" href="#">Leer mas</a>
  </article>
</div>

Card clicable

Cuando toda la card debe ser clicable, conserva un enlace real y aplica .click-parent al enlace. Aplica .focus-from-child al contenedor para que el focus del enlace pueda destacar la card completa.

<article class="card card-elevated focus-from-child">
  <h3 class="subheading-sm">Titulo de la card</h3>
  <p class="text-medium">Descripcion breve.</p>
  <a class="btn btn-link click-parent" href="/servicio/">Leer mas</a>
</article>

Este patron mantiene la semantica: no convierte todo el <article> en enlace, pero amplia la zona clicable mediante el pseudo-elemento del enlace.

Casos de uso

Configuracion

Si quieres hacer las cards mas compactas en todo el sistema, normalmente es mejor ajustar --ft-space-factor-block que cambiar .card directamente. Asi otros componentes que dependen del mismo espacio siguen en proporcion.

Errores comunes