---
title: "Surface"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Surface for layered content containers and visual depth hierarchy. Multiple elevation levels and shapes for card alternatives and nested layouts."
url: https://frutjam.com/pl/components/surface
---

# Surface Component

Komponenty powierzchni to wszechstronne prymitywy układu, które tworzą warstwowe hierarchie wizualne i kontenery treści. Powierzchnie zbudowane w semantycznym formacie HTML zapewniają elastyczną głębię i opcje stylizacji. System powierzchni Frutjam obsługuje wiele rozmiarów, kształtów i warstw — idealnie nadaje się do alternatywnych kart, bloków treści i układów zagnieżdżonych.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa           | Typ     | Opis                                           |
| --------------- | ------- | ---------------------------------------------- |
| surface         | Opierać | Pojemnik powierzchniowy bazowy                 |
| surface-1       | Styl    | Poziom uniesienia 1 (subtelny)                 |
| surface-2       | Styl    | Poziom wzniesienia 2                           |
| surface-outline | Styl    | Przezroczyste wypełnienie z widoczną krawędzią |
| surface-dashed  | Styl    | Styl przerywanej granicy                       |
| surface-rounded | Styl    | Umiarkowanie zaokrąglone rogi                  |
| surface-xs      | Rozmiar | Bardzo mała wyściółka                          |
| surface-sm      | Rozmiar | Mała wyściółka                                 |
| surface-md      | Rozmiar | Średnie wypełnienie (domyślne)                 |
| surface-lg      | Rozmiar | Duża wyściółka                                 |
| surface-xl      | Rozmiar | Bardzo duża wyściółka                          |

## Podstawowe użycie

## Warstwy powierzchniowe

Użyj `surface-1` i `surface-2`, aby utworzyć hierarchię głębi poprzez zmieszanie koloru podstawowego z kolorem pierwszego planu.

```html
<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>
```

## Kształty powierzchni

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

## Style graniczne

Użyj `surface-outline` lub `surface-dashed` w przypadku przezroczystych kontenerów zdefiniowanych przez obramowanie. Działają one poprawnie, gdy są zagnieżdżone w kolorowych warstwach, ponieważ tło jest wyraźnie przezroczyste.

```html
<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>
```

## Rozmiary powierzchni

Narzędzia size ustawiają wewnętrzne dopełnienie poprzez `--surface--padding`. Nie łącz z narzędziami Tailwind `p-*` — zastąpią one zmienną i pokonają klasę rozmiaru.

```html
<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>
```

## Zagnieżdżone powierzchnie

```html
<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>
```