CSS: hero

div[class~="instui-hero"] — Bagian header selebar penuh dengan judul, subjudul, dan gambar latar opsional.

✅ Gunakan Hero ketika:

• Anda membutuhkan header halaman yang menonjol dengan hierarki visual

• Halaman mendapat manfaat dari bagian pembuka yang besar dan menarik perhatian

• Anda ingin menyertakan gambar latar atau aksen gradasi 🚫 Jangan gunakan Hero ketika:

• Membangun header halaman sederhana — gunakan Page-Layout sebagai gantinya

• Hero bersaing dengan konten kritis — prioritaskan keterbacaan

Aksesibilitas

• Pastikan judul berada dalam tag <h1> untuk struktur semantik
• Jika menggunakan gambar latar, sediakan kontras warna yang cukup untuk teks
• Hindari pemutaran otomatis pada video atau animasi yang dapat mengalihkan perhatian dari konten

Penggunaan

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

Contoh

Slot

Slot	Deskripsi
subtitle	Konten subjudul Hero
title	Konten judul Hero

Bagian

Bagian	Deskripsi
.instui-actions	Tombol aksi atau tautan opsional.
.instui-background	Lapisan latar opsional (gambar atau gradasi).
.instui-content	Kontainer untuk teks dan aksi hero.
.instui-overlay	Overlay semi-transparan opsional untuk kontras teks.
.instui-subtitle	Teks pendukung atau deskripsi opsional.
.instui-title	Judul utama hero (biasanya <h1>).

Pseudo-elemen

Pseudo-elemen	Deskripsi
::before	—

Status

Status	Deskripsi
:optional	—

Token yang digunakan

Token	Tipe	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	—	—

Terkait

• card