Yerleşim · Container

Kap

İçeriği ortalar ve genişliğini sınırlar. Her sayfa bloğu bir kap içinde durur.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Geniş ve dar Canlı örnek

trds-kap · en çok 75rem

trds-kap--dar · en çok 48rem

HTML kodunu göster

<div class="trds-kap trds-izgara-ornek">trds-kap · en çok 75rem</div>
<div class="trds-kap trds-kap--dar trds-izgara-ornek trds-u-ust-2">trds-kap--dar · en çok 48rem</div>

Ne zaman kullanılır

Başlık çubuğu, gövde ve alt bilgi aynı kapı kullanır. Kenarlar hizalanır.
Uzun metin için dar kap kullanın. Satır 75 karakteri geçmez.

Erişilebilirlik

Kap bir anlam taşımaz, yalnız genişlik verir. Bölge rolleri içindeki ögelere aittir.

Karşılanan WCAG 2.2 ölçütleri 1.4.8 1.4.10

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: CA, IE, FI, DE.