Komponen Group — Wadah untuk Kelompok Elemen

Apa itu: Container transparan yang membungkus beberapa komponen menjadi satu kesatuan, sehingga kamu bisa mengatur spacing, background, dan style sekaligus untuk semua elemen di dalamnya. Kapan pakai: Kelompokkan elemen-elemen yang saling berkaitan (misalnya heading + teks + tombol jadi satu blok hero), atur jarak antar mereka secara seragam, atau beri background/border ke seluruh grup sekaligus.

Apa itu Group?

Group adalah komponen wrapper — ia tidak punya konten sendiri, tapi berfungsi sebagai "wadah" yang membungkus komponen-komponen lain. Bayangkan Group seperti sebuah kotak yang kamu bisa isi dengan komponen apa saja, lalu atur tampilan kotak itu sebagai satu unit.

Manfaat utama Group:

• Spacing seragam — atur jarak antar komponen di dalam grup hanya dengan satu setting, bukan satu-satu
• Style grup — beri background color, border, atau padding ke seluruh blok sekaligus
• Organisasi — struktur builder jadi lebih rapi karena elemen terkait "hidup" di dalam satu induk

Kapan Pakai Group?

• Hero text block — heading + teks deskripsi + tombol CTA dibungkus jadi satu grup dengan background card
• Feature card — icon + heading + teks penjelasan dalam satu kotak berulang
• Footer section — logo + social links + teks copyright dalam satu blok bawah
• Highlight box — blok testimoni atau quote yang butuh background berbeda dari sekitarnya
• Konten dalam kolom — isi tiap kolom di komponen Column biasanya adalah sebuah Group

Kalau kamu hanya punya 2 komponen yang tidak butuh style tambahan — Group mungkin tidak perlu. Group paling berguna untuk 3+ komponen yang butuh spacing seragam atau style level-grup.

Properties

Property	Tipe	Default	Penjelasan
Gap Antar Komponen	Pilihan	Medium	Jarak vertikal antara tiap komponen anak di dalam grup.

Nilai Gap

Nilai	Kira-kira	Kapan Pakai
None	0px	Elemen memang harus menempel rapat (divider, gambar berurutan)
Small	~8px	Heading dan sub-heading yang saling terkait erat
Medium	~16px	Default yang nyaman untuk kebanyakan grup
Large	~24px	Grup dengan konten beragam yang butuh napas visual
Extra Large	~40px	Blok besar dengan elemen-elemen yang perlu jarak signifikan

Style Universal

Group mendukung semua properti style umum — dan ini adalah kekuatan utamanya:

• Background — beri warna solid atau gradasi ke seluruh blok grup
• Padding — beri ruang dalam antara border grup dan isinya
• Border — tambahkan border dengan radius untuk tampilan card
• Shadow — efek bayangan di belakang kotak grup
• Hide on Mobile / Desktop — sembunyikan seluruh grup di perangkat tertentu

Lihat panduan lengkap di Style Universal.

Contoh Penggunaan

Contoh 1 — Hero Text Card dengan Background

Tiga komponen (Heading H1, Text deskripsi, dan Button) dibungkus dalam satu Group dengan Gap Medium. Di panel Style: Background diset ke warna card, Padding 24px di semua sisi, Border Radius 16px, dan Shadow Medium. Hasilnya adalah satu blok hero yang terlihat sebagai kartu tunggal yang mengapung di atas background halaman.

Contoh 2 — Feature Card (dalam Column)

Tiga Group identik (masing-masing berisi Image icon 48px + Heading H3 + Text deskripsi) ditempatkan sebagai isi tiap kolom dalam komponen Column 3 kolom. Setiap Group diberi Gap Small, Padding 20px, Border tipis, dan Border Radius 12px — menghasilkan tiga feature card yang seragam dan rapi berdampingan.

Contoh 3 — Highlight Box / Quote Block

Dua komponen Text (kutipan + nama sumber) dalam satu Group dengan Gap Small. Style: Background dengan transparansi warna primary (10%), Padding 24px, Border Left 4px warna primary, Border Radius 8px. Hasilnya adalah highlight box bergaya blockquote yang menonjol dari body teks biasa tanpa tampil terlalu mencolok.

Tips & Gotchas