Komponen Divider — Garis Pemisah Section

Apa itu: Garis horizontal tipis yang memisahkan satu section dari section lainnya secara visual. Kapan pakai: Saat kamu butuh batas visual yang jelas antara dua blok konten — misalnya antara hero dan konten utama, atau antara dua kelompok teks — tanpa gap kosong yang terlalu besar.

Apa Itu Divider?

Panel properti komponen divider di builder

Divider adalah komponen sederhana: sebuah garis horizontal. Fungsinya murni visual — membantu mata pembaca tahu bahwa ada pergantian topik atau section. Divider tidak menambah padding atau margin otomatis; kalau kamu butuh jarak vertikal, kombinasikan dengan komponen Spacer.

Properties

Property	Tipe	Default	Keterangan
Style	Solid / Dashed / Dotted	Solid	Jenis garis
Thickness	1–10 px	1 px	Ketebalan garis
Width	100% atau nilai custom (px / %)	100%	Lebar garis relatif terhadap container
Color	Color picker	`border-border` (abu-abu)	Warna garis

💡Spacing tidak otomatis

Divider tidak punya margin atas/bawah default. Kalau kamu mau jarak di atas atau bawah garis, tambahkan komponen Spacer di sekitarnya, atau atur Style > Margin di panel Spacing.

Detail Per Property

Style (Jenis Garis)

Solid — garis penuh, paling umum dipakai. Cocok untuk pemisah formal.
Dashed — garis putus-putus sedang. Memberi kesan lebih ringan dan informal.
Dotted — titik-titik. Dekoratif, cocok untuk landing page dengan estetika playful atau artsy.

Width (Lebar Garis)

Default 100% artinya garis memenuhi seluruh lebar container. Kamu bisa mengecilkannya, misalnya 60% atau 200px, lalu gunakan pengaturan alignment (kiri/tengah/kanan) di section Style untuk memposisikannya.

Contoh Penggunaan

1. Pemisah Hero dan Konten Utama

Letakkan Divider langsung di bawah komponen hero (Heading + Button) sebelum section penjelasan produk. Gunakan Solid, ketebalan 1px, lebar 100%, warna abu-abu muda. Ini membantu mata pembaca bergerak ke bawah dengan teratur.

Divider Solid 1px abu-abu di antara dua section konten di builder canvas, memisahkan hero dari body

2. Dekoratif di Tengah Halaman

Divider Dotted dengan lebar 40% dan warna primer (oranye) bisa jadi elemen dekoratif antara dua section teks. Posisikan di tengah agar simetris.

Divider Dotted lebar 40% warna oranye terpusat di antara dua blok teks, tampak sebagai aksesori dekoratif

3. Pemisah Ringkas di Sales Page

Pada sales page panjang, Divider Dashed tipis (1px) antara setiap section (Fitur → Testimoni → FAQ → CTA) membantu struktur halaman terbaca jelas tanpa visual yang terlalu mengganggu.

Divider Dashed 1px tipis di antara section Fitur dan Testimoni di halaman publik — batas halus yang tidak memecah alur baca

Gotchas

Jangan andalkan Divider untuk spacing. Divider = garis visual saja. Untuk jarak vertikal yang konsisten, pakai Spacer.
Warna terlalu kontras bisa memecah alur baca. Warna abu-abu muted (#E5E7EB atau sejenisnya) biasanya lebih aman dari warna terang.
Ketebalan > 3px mulai terasa berat secara visual. Pakai hanya kalau memang ingin efek bold/dekoratif.

Siap buat landing page pertamamu?