CSS: hero

div[class~="instui-hero"] — Լրիվ-լայնության վերնամաս՝ վերնագրով, ենթավերնագրով և ժամկետային ֆոնային պատկերի հնարավորությամբ.

✅ Օգտագործում՝ Hero այս դեպքում՝

• Ձեզ անհրաժեշտ է աչքի զարուկ էջի վերնագիր՝ տեսողական հիերարխիայով

• Էջին օգտակար է մեծ, ուշադրություն գրավող բացման բաժինը

• Դուք ցանկանում եք ներառել ֆոնային պատկերներ կամ գրաադիենտային շեշտադրում 🚫 Մի օգտագործեք Hero այս դեպքում՝

• Սովորական էջի վերնագիր կառուցելիս — օգտագործեք Page-Layout-ը

• Երբ հերոն յCompetition է կարևոր բովանդակության հետ — առաջնահերթություն տվեք ընթեռնելիությանը

Մուտքականություն

• Համոզվեք, որ վերնագիրը տեղադրված է <h1> տեգում՝ սեմանտիկ կառուցվածքի համար
• Եթե օգտվում եք ֆոնային պատկերներից, ապահովեք տեքստի համար բավարար երանգային համեմատություն
• Խուսափեք վիդեո կամ անիմացիայի ավտոմատ խաղարկումից, որը կարող է շեղել բովանդակությունից

Օգտագործում

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

Նրբեր (Slots)

Նրբասեղան (Slot)	Նկարագիր
subtitle	Hero ենթավերնագրի բովանդակություն
title	Hero վերնագրի բովանդակություն

Մասեր

Մաս	Նկարագիր
.instui-actions	Ընտրովի գործողության կոճակներ կամ հղումներ.
.instui-background	Ընտրովի ֆոնային շերտ (պատկեր կամ գրաադիենտ).
.instui-content	Արմատակի տարա հերո տեքստի և գործողությունների համար.
.instui-overlay	Ընտրովի թափանցիկության սեմի-թափանցիկ ծածկույթ՝ տեքստի համեմատության համար.
.instui-subtitle	Ընտրովի աջակցող տեքստ կամ նկարագրություն.
.instui-title	Հերոյի հիմնական վերնագիր (հաճախ <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	—	—

Ավելին կապված

• card