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

kiris-kap · en çok 75rem

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

HTML kodunu göster

<div class="kiris-kap kiris-izgara-ornek">kiris-kap · en çok 75rem</div>
<div class="kiris-kap kiris-kap--dar kiris-izgara-ornek kiris-u-ust-2">kiris-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.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-container ile başlayan sınıflar