Otros componentes

Ademas de botones, tipografia y cards, FDS incluye pequenos componentes auxiliares. Son utilidades semanticas que resuelven patrones repetidos en paginas WordPress: imagenes de fondo, cards clicables, foco desde hijos y etiquetas eyebrow.

Background image

.bg-image coloca una imagen como fondo absoluto del contenedor:

.bg-image {
  @apply absolute inset-0 size-full object-cover -z-1;
}

Patron recomendado:

<div class="relative overflow-hidden rounded-lg">
  <img class="bg-image" src="hero.jpg" alt="" />
  <div class="content-flex center relative z-10 min-h-[30rem] text-white">
    <h2 class="heading">Texto sobre imagen</h2>
  </div>
</div>

El contenedor padre debe ser relative; si no, la imagen absoluta puede posicionarse respecto a otro ancestro.

Click parent

.click-parent amplia la zona clicable de un enlace hasta cubrir su contenedor padre mediante un pseudo-elemento. .focus-from-child se coloca en el padre para que el foco del enlace destaque toda la pieza.

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

<article class="card card-elevated focus-from-child max-w-xl">
  <div class="relative mb-6 aspect-landscape overflow-hidden rounded-lg bg-primary-500">
    <div class="content-flex center h-full text-white">
      <span class="heading-sm">Imagen o media</span>
    </div>
  </div>
  <span class="eyebrow">Componente auxiliar</span>
  <h3 class="subheading">Toda la card se puede clicar</h3>
  <p class="text-medium">
    El enlace mantiene la semantica, pero su pseudo-elemento cubre el padre.
  </p>
  <a class="btn btn-link click-parent" href="#">Leer mas</a>
</article>

Focus from child

.focus-from-child aplica estilos al contenedor cuando algun hijo recibe foco. Es especialmente util con .click-parent, formularios dentro de cards o bloques donde el foco debe ser visible a escala de componente.

<label class="card card-outline focus-from-child">
  <span class="subheading-sm">Email</span>
  <input class="mt-4 w-full rounded-md border px-4 py-3" type="email" />
</label>

Eyebrow

.eyebrow crea una etiqueta pequena en uppercase:

.eyebrow {
  @apply border rounded-md py-1 px-3 text-sm uppercase;
}

Uso habitual:

<span class="eyebrow">Nuevo</span>
<h2 class="heading">Titulo de seccion</h2>

Sirve para categorias, estados, labels de seccion, pequenas llamadas visuales o metadatos. No debe sustituir a un badge funcional si necesitas estados complejos, colores semanticos o iconos.

Casos de uso

Errores comunes