CSS: hero

div[class~="instui-hero"] — Seksyen tajuk lebar-penuh dengan tajuk, tajuk kecil, dan imej latar belakang pilihan.

✅ Gunakan Hero apabila:

• Anda memerlukan pengepala halaman yang menonjol dengan hierarki visual

• Halaman mendapat manfaat daripada seksyen pembukaan yang besar dan menarik perhatian

• Anda mahu menyertakan imej latar atau aksen gradasi 🚫 Jangan gunakan Hero apabila:

• Membangun pengepala halaman yang ringkas — gunakan Page-Layout sebagai gantinya

• Hero bersaing dengan kandungan penting — utamakan keterbacaan

Aksesibiliti

• Pastikan tajuk berada dalam tag <h1> untuk struktur semantik
• Jika menggunakan imej latar, sediakan kontras warna yang mencukupi untuk teks
• Elakkan main automatik video atau animasi yang boleh mengalih perhatian dari kandungan

Penggunaan

@import "@pantoken/plugin-layouts/layouts.css";

Contoh

Slot

Slot	Penerangan
subtitle	Kandungan tajuk kecil Hero
title	Kandungan tajuk Hero

Bahagian

Bahagian	Penerangan
.instui-actions	Butang tindakan atau pautan pilihan.
.instui-background	Lapisan latar pilihan (imej atau gradasi).
.instui-content	Kontena untuk teks dan tindakan hero.
.instui-overlay	Lapisan bertindih separa telus pilihan untuk kontras teks.
.instui-subtitle	Teks sokongan atau keterangan pilihan.
.instui-title	Tajuk utama hero (biasanya <h1>).

Pseudo-elemen

Pseudo-elemen	Penerangan
::before	—

Keadaan

Keadaan	Penerangan
:optional	—

Token digunakan

Token	Jenis	Nilai
--instui-color-primary-background	—	—
--instui-font-size-hero	<length>	—
--instui-font-size-large	<length>	—
--instui-font-weight-bold	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Berkaitan

• card