Composant de surface

Surface CSS Tailwind uniquement CSS pour appliquer des couleurs d'arrière-plan et de texte thématiques à un conteneur. Toutes les variantes de couleurs. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Les composants de surface sont des primitives de mise en page polyvalentes qui créent des hiérarchies visuelles en couches et des conteneurs de contenu. Construites avec du HTML sémantique, les surfaces offrent des options flexibles de profondeur et de style. Le système de surface Frutjam prend en charge plusieurs tailles, formes et couches, ce qui est idéal pour les alternatives de cartes, les blocs de contenu et les mises en page imbriquées.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Utilisation de base

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>

Surface Layers

Use surface-1 and surface-2 to create depth hierarchy by mixing the base color with the foreground color.

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>

Surface Shapes

1
2

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

Border Styles

Use surface-outline or surface-dashed for transparent containers defined by a border. These work correctly when nested inside colored layers because the background is explicitly transparent.

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>

Surface Sizes

Les utilitaires de taille définissent le remplissage interne via --surface--padding. Ne combinez pas avec les utilitaires Tailwind p-* : ils remplaceront la variable et annuleront la classe de taille.

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>

Nested Surfaces

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>