Bileşenler
Heading
Sayfa ve bölüm başlıklarını yazar; belge düzeyi görsel boyuttan ayrıdır.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”Heading etkileşimli değildir; bir başlık öğesi olarak akışta durur.
| Durum | Destek | Görsel değişiklik |
|---|---|---|
| Varsayılan | Var | Düzeye göre boyut, color-text-default rengi |
| Üzerine gelme, basılı, odak, devre dışı, seçili | Yok | Yok; Heading etkileşimli değildir |
| Uzun metin | Var | Satır kırılır ve text-balance ile dengelenir; kesilmez |
Ölçüler
Bölüm başlığı “Ölçüler”size |
Yazı / satır yüksekliği | Tip stili | Varsayılan düzey |
|---|---|---|---|
xl |
32 px / 40 px | heading-xl |
h1 |
lg |
24 px / 32 px | heading-lg |
h2 |
md |
20 px / 28 px | heading-md |
h3 |
sm |
16 px / 24 px | heading-sm |
h4, h5, h6 |
Tüm boyutlar yarı kalındır. Kenar boşluğu sıfırdır.
Token’lar
Bölüm başlığı “Token’lar”Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Hareket | Azaltılmış hareket |
|---|---|---|
| Giriş, çıkış, durum değişimi | Yok: Heading hareket etmez; yalnızca yerleşim ve tipografi belirler | Azaltılacak bir şey yok |
Hareket ayrıntıları için Hareket sayfasına bakın.