Yerleşim · Hero

Karşılama bloğu

Ana sayfanın ilk bloğu. Bir başlık, bir cümle ve bir arama veya düğme. Fotoğraf yok.

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

Örnekler

Aramalı Canlı örnek · tam genişlik

Sosyal Güvenlik Kurumu

Daima Yanınızda

Çalışan, işveren, emekli ve hak sahibi için sosyal güvenlik işlemleri tek adreste.

e-Devlet ile giriş yap Hizmetleri gör

HTML kodunu göster

<section class="kiris-kahraman">
  <div class="kiris-kap">
    <p class="kiris-kahraman__ust">Sosyal Güvenlik Kurumu</p>
    <h1 class="kiris-kahraman__baslik">Daima Yanınızda</h1>
    <p class="kiris-kahraman__metin">Çalışan, işveren, emekli ve hak sahibi için sosyal güvenlik işlemleri tek adreste.</p>
    <div class="kiris-kahraman__eylemler"><a class="kiris-button" href="#">e-Devlet ile giriş yap</a><a class="kiris-button kiris-button--ikincil" href="#">Hizmetleri gör</a></div>
  </div>
</section>

Ne zaman kullanılır

Kurum ana sayfasında ve hizmet giriş sayfasında kullanın.
Kayan pano yerine kullanın. Tek bir mesaj, tek bir eylem.

Erişilebilirlik

Başlık h1 olur.
Zemin düz renktir. Metin fotoğraf üstüne binmez.

Karşılanan WCAG 2.2 ölçütleri 1.4.3 2.4.6

Kaynak

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

Bu bileşenin kodu depoda:

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