Kartu

Wadah dasar untuk semua konten. Header, isi, dan footer punya jarak baku 24px.

Kartu penuh

Struktur baku: judul, keterangan, isi, lalu aksi di footer.

Kuis dibuka 13 Oktober pukul 07.00 dan ditutup pukul 09.00. Satu kali percobaan.

Lihat kode

<div class="ck-card" style="max-width:26rem">
  <div class="ck-card__header">
    <div class="ck-card__title">Kuis Matematika — Bab 3</div>
    <div class="ck-card__desc">20 soal pilihan ganda · 45 menit · Kelas X IPA 1</div>
  </div>
  <div class="ck-card__body">
    <p class="ck-text ck-muted">Kuis dibuka 13 Oktober pukul 07.00 dan ditutup pukul 09.00. Satu kali percobaan.</p>
  </div>
  <div class="ck-card__footer">
    <button class="ck-btn ck-btn--default ck-btn--sm">Buka kuis</button>
    <button class="ck-btn ck-btn--ghost ck-btn--sm">Detail</button>
  </div>
</div>

Header sebaris & kartu bisa diklik

ck-card__header--row menaruh judul dan aksi pada satu baris. ck-card--hover memberi umpan balik saat disorot.

Lihat kode

<a class="ck-card ck-card--hover" href="#" style="display:block;max-width:26rem">
  <div class="ck-card__header ck-card__header--row">
    <div>
      <div class="ck-card__title">Bank Soal — Fisika</div>
      <div class="ck-card__desc">128 soal · 6 paket</div>
    </div>
    <span class="ck-badge ck-badge--info">Draft</span>
  </div>
</a>