Lompat ke isi
CirccaHIG

Komponen / Tata letak

Card

Wadah isi berjudul di halaman detail dan dashboard: judul + keterangan, aksi di kanan header, isi bebas, dan footer. Contoh: kartu Item, Termin pembayaran, dan "Perlu tindakan Anda" di detail PO.
React · BetaFigma · siapFigmaSumber

Yang sudah ditangani

  • Dengan `title`, kartu menjadi <section> yang dilabeli judulnya sehingga muncul sebagai region di pembaca layar; atur `headingLevel` agar urutan heading halaman tidak melompat.
  • IconButton di aksi header wajib punya `label` yang menyebut objeknya ("Aksi termin pembayaran"), bukan hanya "Aksi lain".
  • Raised hanya memakai bayangan; batas kartu Flat 0,5 px bersifat dekoratif — isi tidak boleh bergantung pada garis tepi untuk dipahami.

Tanggung jawab Anda

  • Beri label yang bermakna: teks label, atau aria-label untuk kontrol tanpa teks.
  • Uji di mode gelap dan kontras tinggi (pilih lewat menu Tema di kanan atas, atau tombol Terang/Gelap di tiap contoh).
  • Pastikan semua aksi bisa dijalankan dengan keyboard saja.
Esc
↑↓ pilih↵ buka12 hasil