Componente de superficie

Superficie CSS Tailwind solo para CSS para aplicar colores de texto y fondo temáticos a un contenedor. Todas las variantes de color. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes de superficie son primitivos de diseño versátiles que crean jerarquías visuales en capas y contenedores de contenido. Construidas con HTML semántico, las superficies brindan opciones flexibles de profundidad y estilo. El sistema de superficie Frutjam admite múltiples tamaños, formas y capas, ideal para alternativas de tarjetas, bloques de contenido y diseños anidados.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Uso básico

1
2
3
4

<div class="surface p-6">
  <h2>Surface Container</h2>
  <p>Content displayed on a surface</p>
</div>

1
2
3
4

<div className="surface p-6">
  <h2>Surface Container</h2>
  <p>Content displayed on a surface</p>
</div>

Capas superficiales

Utilice surface-1 y surface-2 para crear una jerarquía de profundidad mezclando el color base con el color de primer plano.

1
2
3

<div class="surface p-4">Base</div>
<div class="surface surface-1 p-4">Surface 1 — subtle lift</div>
<div class="surface surface-2 p-4">Surface 2 — more contrast</div>

Formas de superficie

1
2

<div class="surface surface-md">Default (square)</div>
<div class="surface surface-md surface-rounded">Rounded</div>

Estilos de borde

Utilice surface-outline o surface-dasshed para contenedores transparentes definidos por un borde. Funcionan correctamente cuando se anidan dentro de capas coloreadas porque el fondo es explícitamente transparente.

1
2
3
4
5
6
7

<div class="surface surface-1 surface-rounded surface-md">
  <p class="mb-3 font-medium">Surface 1 (colored parent)</p>
  <div class="flex gap-3">
    <div class="surface surface-outline surface-rounded surface-sm grow">Outline — transparent fill, solid border</div>
    <div class="surface surface-dashed surface-rounded surface-sm grow">Dashed — transparent fill, dashed border</div>
  </div>
</div>

Tamaños de superficie

Las utilidades de tamaño configuran el relleno interno mediante --surface--padding. No lo combine con las utilidades Tailwind p-*: anularán la variable y anularán la clase de tamaño.

1
2
3
4
5

<div class="surface surface-xs surface-rounded">Extra small (0.5rem)</div>
<div class="surface surface-sm surface-rounded">Small (1rem)</div>
<div class="surface surface-md surface-rounded">Medium (1.5rem)</div>
<div class="surface surface-lg surface-rounded">Large (2rem)</div>
<div class="surface surface-xl surface-rounded">Extra large (2.5rem)</div>

Superficies anidadas

1
2
3
4
5
6

<div class="surface surface-1 p-6 rounded-lg">
  <h3>Outer Surface</h3>
  <div class="surface surface-2 p-4 rounded mt-4">
    <p>Inner Surface</p>
  </div>
</div>