Komponen Permukaan

Permukaan CSS Tailwind khusus CSS untuk menerapkan latar belakang bertema dan warna teks ke wadah. Semua varian warna. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

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.

Penggunaan Dasar

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>

Lapisan Permukaan

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

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>

Bentuk Permukaan

1
2

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

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>

Ukuran Permukaan

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

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>

Permukaan Bersarang

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>