Yerleşim · Section

Bölüm

Ana sayfayı yatay şeritlere böler. Her şeridin bir başlığı ve isteğe bağlı "Tümü" bağlantısı vardır.

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

Örnekler

Başlık ve bağlantı Canlı örnek · tam genişlik

Duyurular

Tümü: duyurular

Bölümün içeriği burada durur.

HTML kodunu göster

<section class="kiris-bolum kiris-bolum--yumusak" aria-labelledby="b-duyuru">
  <div class="kiris-kap">
    <div class="kiris-bolum__ust"><h2 class="kiris-bolum__baslik" id="b-duyuru">Duyurular</h2><a class="kiris-link" href="#">Tümü<span class="kiris-gorsel-gizli">: duyurular</span></a></div>
    <p class="kiris-govde kiris-u-alt-0">Bölümün içeriği burada durur.</p>
  </div>
</section>

Ne zaman kullanılır

Ana sayfada her konu bir bölümdür: duyurular, hizmetler, haberler.
Ardışık iki bölüm aynı zemini almaz. Açık ve yumuşak sırayla gelir.

Erişilebilirlik

<section> başlık ile etiketlenir: aria-labelledby.
"Tümü" bağlantısı görsel gizli metinle neyin tümü olduğunu söyler.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 2.4.4

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: IT, CH.

Bu bileşenin kodu depoda:

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