Componente de superfície

Superfície Tailwind CSS somente CSS para aplicar cores de fundo e texto temáticas a um contêiner. Todas as variantes de cores. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes de superfície são primitivos de layout versáteis que criam hierarquias visuais em camadas e contêineres de conteúdo. Construídas com HTML semântico, as superfícies oferecem opções flexíveis de profundidade e estilo. O sistema de superfície Frutjam oferece suporte a vários tamanhos, formatos e camadas – ideal para alternativas de cartões, blocos de conteúdo e layouts aninhados.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

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>

Camadas de Superfície

Use surface-1 e surface-2 para criar uma hierarquia de profundidade misturando a cor base com a cor de primeiro 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 superfície

1
2

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

Estilos de borda

Use surface-outline ou surface-dashed para contêineres transparentes definidos por uma borda. Eles funcionam corretamente quando aninhados em camadas coloridas porque o plano de fundo é explicitamente 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>

Tamanhos de superfície

Os utilitários de tamanho definem o preenchimento interno via --surface--padding. Não combine com os utilitários Tailwind p-* - eles substituirão a variável e anularão a classe de tamanho.

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>

Superfícies aninhadas

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>