İçerik · Stat tile

İstatistik kutusu

Bir kurumun büyüklüğünü dört rakamla anlatır. Kayıtlı kullanıcı, hizmet sayısı gibi.

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

Örnekler

Dört sayı Canlı örnek

69.596.229Kayıtlı kullanıcı

9.409Hizmet

6.426Mobil hizmet

1.129Kurum

HTML kodunu göster

<div class="trds-istatistik">
  <div class="trds-istatistik__kutu"><span class="trds-istatistik__deger">69.596.229</span><span class="trds-istatistik__ad">Kayıtlı kullanıcı</span></div>
  <div class="trds-istatistik__kutu"><span class="trds-istatistik__deger">9.409</span><span class="trds-istatistik__ad">Hizmet</span></div>
  <div class="trds-istatistik__kutu"><span class="trds-istatistik__deger">6.426</span><span class="trds-istatistik__ad">Mobil hizmet</span></div>
  <div class="trds-istatistik__kutu"><span class="trds-istatistik__deger">1.129</span><span class="trds-istatistik__ad">Kurum</span></div>
</div>

Ne zaman kullanılır

Ana sayfada, en çok dört sayı ile kullanın.
Sayı ne anlama geliyorsa altına yazın. Tek başına 9.409 anlamsızdır.
Ondalık ve binlik ayracı Türkçe kuralına göre yazılır: 69.596.229.

Erişilebilirlik

Sayı ve adı tek bir okuma sırasında gelir. Sayı önce, ad sonra.
Rakamlar eş genişliktedir, sütunlar hizalanır.

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

Kaynak

Bu bileşenin karşılığı hiçbir yabancı tasarım sisteminde yok.