CSS: hero

div[class~="instui-hero"] — Phần đầu tiêu đề toàn chiều rộng với tiêu đề, phụ đề và hình nền tùy chọn.

✅ Sử dụng Hero khi:

• Bạn cần một đầu trang nổi bật với thứ tự trực quan

• Trang hưởng lợi từ một phần mở lớn, ấn tượng

• Bạn muốn bao gồm hình nền hoặc điểm nhấn gradient 🚫 Không dùng Hero khi:

• Đang xây dựng một đầu trang đơn giản — thay vào đó dùng Page-Layout

• Hero cạnh tranh với nội dung quan trọng — ưu tiên khả năng đọc

Khả năng truy cập

• Đảm bảo tiêu đề nằm trong thẻ <h1> để phù hợp ngữ nghĩa
• Nếu sử dụng hình nền, đảm bảo độ tương phản màu đủ cho văn bản
• Tránh phát tự động video hoặc hoạt ảnh có thể làm phân tâm khỏi nội dung

Sử dụng

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

Các ví dụ

Các slot

Slot	Mô tả
subtitle	Nội dung phụ đề Hero
title	Nội dung tiêu đề Hero

Phần

Phần	Mô tả
.instui-actions	Nút hành động hoặc liên kết tùy chọn.
.instui-background	Lớp nền tùy chọn (hình ảnh hoặc gradient).
.instui-content	Khung chứa cho văn bản và hành động của hero.
.instui-overlay	Lớp phủ bán trong suốt tùy chọn để tăng tương phản văn bản.
.instui-subtitle	Văn bản bổ trợ hoặc mô tả tùy chọn.
.instui-title	Tiêu đề chính của hero (thường là <h1>).

Phần tử giả

Phần tử giả	Mô tả
::before	—

Trạng thái

Trạng thái	Mô tả
:optional	—

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-color-primary-background	—	—
--instui-font-size-hero	<length>	—
--instui-font-size-large	<length>	—
--instui-font-weight-bold	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Liên quan

• card