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

# Surface Component

Komponen permukaan adalah tata letak primitif serbaguna yang membuat hierarki visual berlapis dan wadah konten. Dibangun dengan HTML semantik, permukaan memberikan opsi kedalaman dan gaya yang fleksibel. Sistem permukaan Frutjam mendukung berbagai ukuran, bentuk, dan lapisan—ideal untuk alternatif kartu, blok konten, dan tata letak bersarang.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas           | Jenis  | Keterangan                                  |
| --------------- | ------ | ------------------------------------------- |
| surface         | Basis  | Wadah permukaan dasar                       |
| surface-1       | Gaya   | Ketinggian level 1 (halus)                  |
| surface-2       | Gaya   | Ketinggian tingkat 2                        |
| surface-outline | Gaya   | Isian transparan dengan batas yang terlihat |
| surface-dashed  | Gaya   | Gaya perbatasan putus-putus                 |
| surface-rounded | Gaya   | Sudut agak membulat                         |
| surface-xs      | Ukuran | Bantalan ekstra kecil                       |
| surface-sm      | Ukuran | Bantalan kecil                              |
| surface-md      | Ukuran | Bantalan sedang (default)                   |
| surface-lg      | Ukuran | Bantalan besar                              |
| surface-xl      | Ukuran | Bantalan ekstra besar                       |

## Penggunaan Dasar

## Lapisan Permukaan

Gunakan `surface-1` dan `surface-2` untuk membuat hierarki kedalaman dengan mencampurkan warna dasar dengan warna latar depan.

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

## Bentuk Permukaan

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

## Gaya Perbatasan

Gunakan `surface-outline` atau `surface-dash` untuk container transparan yang ditentukan oleh pembatas. Ini berfungsi dengan benar ketika disarangkan di dalam lapisan berwarna karena latar belakangnya transparan secara eksplisit.

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

## Ukuran Permukaan

Utilitas ukuran mengatur padding internal melalui `--surface--padding`. Jangan gabungkan dengan utilitas `p-*` Tailwind—utilitas tersebut akan menggantikan variabel dan mengalahkan kelas ukuran.

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

## Permukaan Bersarang

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