CSS: hero

div[class~="instui-hero"] — Koptekstsectie over de volledige breedte met titel, subtitel en optionele achtergrondafbeelding.

✅ Gebruik Hero wanneer:

• Je een prominente paginakop met visuele hiërarchie nodig hebt

• De pagina baat bij een groot, opvallend openingsgedeelte

• Je achtergrondbeelden of kleurverlopen wilt toevoegen 🚫 Gebruik Hero niet wanneer:

• Je een eenvoudige paginakop bouwt — gebruik in plaats daarvan Page-Layout

• De hero concurreert met kritieke inhoud — geef prioriteit aan leesbaarheid

Toegankelijkheid

• Zorg dat de titel in een <h1>-tag staat voor semantische structuur
• Als je achtergrondafbeeldingen gebruikt, zorg voor voldoende kleurcontrast voor tekst
• Vermijd automatisch afspelen van video of animatie die kan afleiden van de inhoud

Gebruik

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

Slots

Slot	Beschrijving
subtitle	Inhoud van de hero-subtitel
title	Inhoud van de hero-titel

Onderdelen

Onderdeel	Beschrijving
.instui-actions	Optionele actieknoppen of links.
.instui-background	Optionele achtergrondlaag (afbeelding of kleurverloop).
.instui-content	Container voor hero-tekst en acties.
.instui-overlay	Optionele deels doorzichtige overlay voor tekstcontrast.
.instui-subtitle	Optionele ondersteunende tekst of beschrijving.
.instui-title	Hoofdtitel van de hero (meestal <h1>).

Pseudo-elementen

Pseudo-element	Beschrijving
::before	—

Staten

Toestand	Beschrijving
:optional	—

Gebruikte tokens

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

Gerelateerd

• card