Heading

Merid'in başlık stilinde semantik h1–h6: 600 kalınlık, negatif harf aralığı ve text-wrap: balance. Görsel boyut seviyeden bağımsızdır; böylece başlık hiyerarşisi doğru kalırken tasarım da tutarlı kalır.

<Heading level={2}>Daha sakin arayüzler yayınla</Heading>

Import

import { Heading } from "@merid/react";

Örnekler

Varsayılan boyutlar

Her seviyenin varsayılan bir boyutu vardır: 1. seviye display, 2. seviye h2, 3. seviye h3; 4–6 ise sırasıyla lg, md ve sm'ye karşılık gelir.

<Heading level={1}>Display</Heading>
<Heading level={2}>Başlık h2</Heading>
<Heading level={3}>Başlık h3</Heading>
<Heading level={4}>Başlık lg</Heading>
<Heading level={5}>Başlık md</Heading>
<Heading level={6}>Başlık sm</Heading>

Seviyeden bağımsız boyut

level'ı belgenin başlık hiyerarşisine, size'ı tasarıma göre seç. Bir ayarlar panelinin başlığı küçük bir başlık gibi görünen bir h2 olabilir.

<Heading level={2} size="lg">Fatura geçmişi</Heading>
<Heading level={3} size="sm">Faturalar</Heading>

API referansı

Heading ref'ini başlık elemanına iletir ve diğer HTML attribute'larını olduğu gibi geçirir.

Stil verme

Boyutlar tipografi token'larını okur (bkz. Tipografi); başlığa özel değişken yoktur.

Erişilebilirlik

• Sayfa başına tek bir h1 kullan ve aşağı inerken seviye atlama. Görünümü ayarlamak için level'ı değil size'ı değiştir.
• Başlığı yalnızca büyük metin için kullanma; bunun için size="lg" ile Text kullan.

Kullanım ilkeleri

İlgili sayfalar

• Text: gövde metni ve açıklamalar.
• VisuallyHidden: yalnızca yardımcı teknolojinin ihtiyaç duyduğu başlıklar.