CSS: hero

div[class~="instui-hero"] — Adran pennawd lled-lawn gyda theitl, is-deitl, a delwedd gefndir dewisol.

✅ Defnyddiwch Hero pan:

• Mae angen pennawd tudalen amlwg gyda hierarchaeth weledol

• Mae'r dudalen yn elwa o adran agoriadol fawr sy'n tynnu sylw

• Rydych eisiau cynnwys delweddau cefndir neu amrywiadau graddiant 🚫 Peidiwch â defnyddio Hero pan:

• Wrth adeiladu pennawd tudalen syml — defnyddiwch Page-Layout yn lle hynny

• Mae'r hero yn cystadlu â chynnwys hanfodol — rhoi blaenoriaeth i ddarllenadwyedd

Hygyrchedd

• Sicrhewch fod y teitl mewn tag <h1> er mwyn strwythur semantig
• Os ydych yn defnyddio delweddau cefndir, darparwch gyswllt lliw digonol ar gyfer y testun
• Osgoi chwarae awtomatig ar fideo neu animeiddiad a all ddisgynnu sylw oddi wrth y cynnwys

Defnydd

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

Enghreifftiau

Slotiau

Slot	Disgrifiad
subtitle	Cynnwys is-deitl Hero
title	Cynnwys teitl Hero

Rhannau

Rhan	Disgrifiad
.instui-actions	Botymau gweithredu neu ddolenni dewisol.
.instui-background	Haen gefndir dewisol (delwedd neu raddiant).
.instui-content	Cynhwysydd ar gyfer testun a gweithredoedd y hero.
.instui-overlay	Gorchudd hanner-dryloyw dewisol i wella cyswllt testun.
.instui-subtitle	Testun neu ddisgrifiad cefnogol dewisol.
.instui-title	Prif deitl y hero (fel arfer <h1>).

Is-elfennau

Is-elfen	Disgrifiad
::before	—

Statwsau

Statws	Disgrifiad
:optional	—

Tocynnau a ddefnyddiwyd

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

Perthnasol

• card