CSS: hero ​

div[class~="instui-hero"] — Full-width header section with title, subtitle, and optional background image.

✅ Use Hero when:

  • You need a prominent page header with visual hierarchy

  • The page benefits from a large, eye-catching opening section

  • You want to include background imagery or gradient accents 🚫 Don't use Hero when:

  • Building a simple page header — use Page-Layout instead

  • The hero competes with critical content — prioritize readability

Accessibility ​

  • Ensure the title is in an <h1> tag for semantic structure
  • If using background images, provide sufficient color contrast for text
  • Avoid autoplay on video or animation that could distract from content

Usage ​

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

Slots ​

SlotDescription
subtitleHero subtitle content
titleHero title content

Parts ​

PartDescription
.instui-actionsOptional action buttons or links.
.instui-backgroundOptional background layer (image or gradient).
.instui-contentContainer for hero text and actions.
.instui-overlayOptional semi-transparent overlay for text contrast.
.instui-subtitleOptional supporting text or description.
.instui-titleMain hero title (typically <h1>).

Pseudo-elements ​

Pseudo-elementDescription
::before—

States ​

StateDescription
:optional—

Tokens consumed ​

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