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="trds-bolum trds-bolum--yumusak" aria-labelledby="b-duyuru">
  <div class="trds-kap">
    <div class="trds-bolum__ust"><h2 class="trds-bolum__baslik" id="b-duyuru">Duyurular</h2><a class="trds-link" href="#">Tümü<span class="trds-gorsel-gizli">: duyurular</span></a></div>
    <p class="trds-govde trds-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.