CSS: hero

div[class~="instui-hero"] — Başlık, alt başlık ve isteğe bağlı arka plan resmi içeren tam genişlikte üst bilgi bölümü.

✅ Hero'yu kullanın:

• Görsel hiyerarşiye sahip belirgin bir sayfa başlığına ihtiyacınız varsa

• Sayfa, büyük ve dikkat çekici bir açılış bölümüyle fayda sağlıyorsa

• Arka plan görselleri veya gradyan vurguları eklemek istiyorsanız 🚫 Hero'yu kullanmayın:

• Basit bir sayfa başlığı oluşturuyorsanız — bunun yerine Page-Layout kullanın

• Hero kritik içerikle yarışıyorsa — okunabilirliği önceliklendirin

Erişilebilirlik

• Başlığın anlamsal yapı için bir <h1> etiketi içinde olmasına dikkat edin
• Arka plan görselleri kullanılıyorsa, metin için yeterli renk kontrastı sağlayın
• İçerikten dikkat dağıtabilecek video veya animasyonlarda otomatik oynatmayı önleyin

Kullanım

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

Örnekler

Yuvalar

Yuva	Açıklama
subtitle	Hero alt başlık içeriği
title	Hero başlık içeriği

Bölümler

Parça	Açıklama
.instui-actions	İsteğe bağlı eylem düğmeleri veya bağlantılar.
.instui-background	İsteğe bağlı arka plan katmanı (resim veya gradyan).
.instui-content	Hero metni ve eylemleri için konteyner.
.instui-overlay	Metin kontrastı için isteğe bağlı yarı saydam örtü.
.instui-subtitle	İsteğe bağlı destekleyici metin veya açıklama.
.instui-title	Ana hero başlığı (genellikle <h1>).

Sözde elemanlar

Sözde eleman	Açıklama
::before	—

Durumlar

Durum	Açıklama
:optional	—

Tüketilen tokenler

Token	Tür	Değer
--instui-color-primary-background	—	—
--instui-font-size-hero	<length>	—
--instui-font-size-large	<length>	—
--instui-font-weight-bold	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

İlgili

• card