Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Surface Component

CSS-only Tailwind CSS surface for applying themed background and text colors to a container. All color variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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
surfaceBasisWadah permukaan dasar
surface-1GayaKetinggian level 1 (halus)
surface-2GayaKetinggian tingkat 2
surface-outlineGayaIsian transparan dengan batas yang terlihat
surface-dashedGayaGaya perbatasan putus-putus
surface-roundedGayaSudut agak membulat
surface-xsUkuranBantalan ekstra kecil
surface-smUkuranBantalan kecil
surface-mdUkuranBantalan sedang (default)
surface-lgUkuranBantalan besar
surface-xlUkuranBantalan ekstra besar

Penggunaan Dasar

Surface Container

Content displayed on a surface

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.

Base
Surface 1 — subtle lift
Surface 2 — more contrast
html 
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

Default (square)
Rounded
html 
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.

Surface 1 (colored parent)

Outline — transparent fill, solid border
Dashed — transparent fill, dashed border
html 
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 p-* Tailwind—utilitas tersebut akan menggantikan variabel dan mengalahkan kelas ukuran.

Extra small (0.5rem)
Small (1rem)
Medium (1.5rem)
Large (2rem)
Extra large (2.5rem)
html 
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

Outer Surface

Inner Surface

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