Komponen Heading — Judul Seksi di Landing Page

Apa itu: Komponen untuk menampilkan judul atau sub-judul di landing page kamu, mulai dari H1 (judul utama) sampai H6 (sub-judul kecil). Kapan pakai: Setiap kali kamu butuh teks besar sebagai pembuka seksi — nama produk, tagline, judul bagian fitur, dsb.

Apa itu Heading?

Heading adalah komponen teks besar yang berfungsi sebagai judul di setiap bagian landing page kamu. Di balik layar, heading menggunakan tag HTML semantik (<h1> sampai <h6>) yang membantu mesin pencari seperti Google memahami struktur halaman kamu.

Berbeda dengan komponen Text yang cocok untuk paragraf panjang, Heading dirancang khusus untuk teks pendek yang butuh tampil besar dan mencolok. Editor teksnya sengaja dibuat minimal — tidak ada bold, italic, atau list — karena heading memang bukan tempat untuk konten panjang.

Kapan Pakai Heading?

• Headline produk / hero section — "Baju Gamis Premium, Gratis Ongkir Se-Indonesia"
• Judul tiap seksi — "Keunggulan Produk", "Apa Kata Pelanggan Kami", "Cara Pesan"
• Sub-judul — memecah konten panjang menjadi bagian yang mudah dipindai
• Tagline brand — teks singkat yang langsung menarik perhatian

Properties

Property	Tipe	Default	Penjelasan
Text	Rich text (minimal)	"Heading"	Konten judul. Mendukung gradient text via <span> inline.
Level	Pilihan (H1–H6)	H2	Level semantik HTML heading.
Alignment	Pilihan	Left	Rata teks: Left, Center, Right.
Line Height	Angka (0.5–3) atau Default	Default	Jarak antar baris teks.
Letter Spacing	Pilihan	Normal	Jarak antar huruf.

Level: H1 sampai H6

Pilihan level menentukan ukuran visual dan makna semantik heading kamu.

Level	Ukuran	Gunakan untuk
H1	Paling besar	Headline utama halaman — gunakan hanya sekali per halaman (penting untuk SEO)
H2	Besar	Judul tiap seksi utama
H3	Sedang-besar	Sub-judul dalam seksi
H4	Sedang	Sub-sub-judul atau item list yang perlu hierarki
H5	Kecil-sedang	Jarang dipakai; untuk hierarki yang sangat dalam
H6	Paling kecil	Sangat jarang; biasanya lebih baik pakai komponen Text

Letter Spacing

Nilai	Tampilan	Cocok untuk
Tight	Huruf rapat	Judul besar agar tidak terlalu lebar
Normal	Standar	Default yang aman untuk kebanyakan heading
Wide	Sedikit longgar	Teks pendek / brand name yang ingin terlihat elegan
Wider	Lebih longgar	Efek grafis / dekoratif
Widest	Paling longgar	Teks pendek dekoratif, mis. "EKSKLUSIF"

Gradient Text (Fitur Tersembunyi)

Heading mendukung teks bergradasi lewat HTML inline langsung di editor. Caranya: klik ikon </> di toolbar editor, lalu sisipkan snippet ini:

<span style="background-image: linear-gradient(90deg, #f57c00, #e53935); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Teks Gradasi</span>

Ganti kode warna sesuai warna brand kamu. Ini berguna untuk menonjolkan kata kunci di headline, misalnya "Dapatkan Hasil Luar Biasa" di mana "Luar Biasa" bergradasi oranye-merah.

Style Universal

Heading mendukung semua properti style umum (margin, padding, background, border, radius, shadow, hide on mobile/desktop, custom CSS). Lihat panduan lengkapnya di Style Universal.

Contoh Penggunaan

Contoh 1 — Hero Headline (H1, Center)

Heading H1 dengan teks "Sepatu Olahraga Premium, Beli 2 Gratis 1", Alignment Center, dan Letter Spacing Tight. Level H1 membuatnya tampil paling besar di halaman, spacing Tight membuat kata-kata terlihat kompak dan powerful — ideal sebagai kalimat pembuka hero yang langsung menjual.

Contoh 2 — Section Title (H2, Left)

Heading H2 rata kiri dengan teks "Kenapa Pilih Kami?" dan Letter Spacing Normal. Ukurannya lebih kecil dari H1 namun tetap menonjol sebagai pembuka seksi — memberikan hierarki visual yang jelas antara headline halaman dan judul-judul bagian di bawahnya.

Contoh 3 — Sub-Heading dengan Gradient Text (H3)

H3 Alignment Center dengan kata kunci "50%" diberi warna gradient oranye-kuning menggunakan inline HTML <span> dengan background-clip: text. Kata kunci bergradasi langsung menarik perhatian ke angka value proposition utama tanpa harus membuat seluruh teks berwarna mencolok.

Tips & Gotchas