CSS: hero ​

div[class~="instui-hero"] — ส่วนหัวแบบความกว้างเต็ม มีชื่อเรื่อง คำบรรยายย่อย และรูปพื้นหลังตามต้องการ.

✅ ใช้ Hero เมื่อ:

  • คุณต้องการส่วนหัวหน้าเพจที่เด่นชัดและมีลำดับชั้นทางสายตา

  • หน้าเพจได้ประโยชน์จากส่วนเปิดที่ใหญ่และดึงดูดสายตา

  • คุณต้องการใส่ภาพพื้นหลังหรือไฮไลต์ไล่สี 🚫 อย่าใช้ Hero เมื่อ:

  • สร้างส่วนหัวเพจแบบเรียบง่าย — ใช้ Page-Layout แทน

  • Hero แย่งความสนใจกับเนื้อหาสำคัญ — ให้ความสำคัญกับการอ่านได้ชัดเจน

การเข้าถึง ​

  • ตรวจสอบให้ชื่อเรื่องอยู่ในแท็ก <h1> เพื่อโครงสร้างความหมาย
  • หากใช้ภาพพื้นหลัง ให้มีความเปรียบต่างของสีเพียงพอสำหรับข้อความ
  • หลีกเลี่ยงการเล่นอัตโนมัติของวิดีโอหรือแอนิเมชันที่อาจรบกวนเนื้อหา

การใช้งาน ​

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

ตัวอย่าง ​

สล็อต ​

สล็อตคำอธิบาย
subtitleเนื้อหาคำบรรยายย่อยของ Hero
titleเนื้อหาชื่อเรื่องของ Hero

ส่วนประกอบ ​

ส่วนคำอธิบาย
.instui-actionsปุ่มหรือลิงก์การกระทำที่เป็นตัวเลือก.
.instui-backgroundชั้นพื้นหลังเป็นตัวเลือก (ภาพหรือการไล่สี).
.instui-contentคอนเทนเนอร์สำหรับข้อความและการกระทำของ hero.
.instui-overlayเลเยอร์ซ้อนกึ่งโปร่งใสเพื่อเพิ่มความเปรียบต่างของข้อความ.
.instui-subtitleข้อความเสริมหรือคำอธิบาย (เป็นตัวเลือก).
.instui-titleชื่อเรื่องหลักของ hero (โดยปกติ <h1>).

องค์ประกอบเทียม ​

องค์ประกอบเทียมคำอธิบาย
::before—

สถานะ ​

สถานะคำอธิบาย
:optional—

โทเค็นที่ใช้ ​

Tokenชนิดค่า
--instui-color-primary-background——
--instui-font-size-hero<length>—
--instui-font-size-large<length>—
--instui-font-weight-bold——
--instui-space-large——
--instui-space-medium——

ที่เกี่ยวข้อง ​