---
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/tr/components/surface
---

# Surface Component

Yüzey bileşenleri, katmanlı görsel hiyerarşiler ve içerik kapları oluşturan çok yönlü düzen temel öğeleridir. Anlamsal HTML ile oluşturulan yüzeyler esnek derinlik ve stil seçenekleri sunar. Frutjam yüzey sistemi birden fazla boyutu, şekli ve katmanı destekler; kart alternatifleri, içerik blokları ve iç içe yerleşimler için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf           | Tip   | Tanım                               |
| --------------- | ----- | ----------------------------------- |
| surface         | Temel | Taban yüzey kabı                    |
| surface-1       | Stil  | Yükseklik seviyesi 1 (ince)         |
| surface-2       | Stil  | Yükseklik seviyesi 2                |
| surface-outline | Stil  | Görünür kenarlıklı şeffaf dolgu     |
| surface-dashed  | Stil  | Kesikli kenarlık stili              |
| surface-rounded | Stil  | Orta derecede yuvarlatılmış köşeler |
| surface-xs      | Boyut | Ekstra küçük dolgu                  |
| surface-sm      | Boyut | Küçük dolgu                         |
| surface-md      | Boyut | Orta dolgu (varsayılan)             |
| surface-lg      | Boyut | Büyük dolgu                         |
| surface-xl      | Boyut | Ekstra büyük dolgu                  |

## Temel Kullanım

## Yüzey Katmanları

Temel rengi ön plan rengiyle karıştırarak derinlik hiyerarşisi oluşturmak için `surface-1` ve `surface-2`'yi kullanın.

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

## Yüzey Şekilleri

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

## Kenar Stilleri

Kenarlıkla tanımlanan şeffaf kaplar için `surface-outline` veya `surface-dashed` kullanın. Arka plan açıkça şeffaf olduğundan, bunlar renkli katmanların içine yerleştirildiğinde düzgün çalışır.

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

## Yüzey Boyutları

Boyut yardımcı programları dahili dolguyu `--surface--padding` yoluyla ayarlar. Tailwind `p-*` yardımcı programları ile birleştirmeyin; bunlar değişkeni geçersiz kılacak ve boyut sınıfını geçersiz kılacaktır.

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

## İç İçe Yüzeyler

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