Advanced · Level 17: Design SystemAdvanced65 menitBahasa Indonesia

Card Variants

Membuat card default, featured, dan muted sebagai product surface yang tetap menjaga hierarchy content serta tidak berubah menjadi container universal.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan card variant berdasarkan peran content, bukan sekadar warna berbeda
Membatasi variant card dengan type yang jelas
Menjaga article, heading, description, dan optional content sebagai structure yang dapat dibaca
Menghindari Card generic dengan banyak mode untuk dialog, table, form, dan dashboard sekaligus

ReactCardVariantsComponent APIDesign Tokens

Isi lesson

5 blok

1.
Card adalah surface product, bukan div dengan nama lebih panjangBelum selesaiWajib
2.
CourseCard dengan surface variant yang terbatasBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Card adalah surface product, bukan div dengan nama lebih panjang

Wajib

Card membantu ketika beberapa content item memiliki surface, padding, border, hierarchy, dan optional emphasis yang sama. Default dapat dipakai untuk daftar course biasa, featured dapat menandai rekomendasi atau course yang sedang dilanjutkan, dan muted dapat memberi context sekunder. Variant perlu menjelaskan peran content sehingga developer tahu kapan memilihnya. Jika featured hanya berarti warna lebih terang tanpa alasan product, variant itu belum memiliki contract yang kuat.

Jaga API Card dekat dengan content yang dibawanya. Card course dapat menerima title, description, variant, dan children opsional untuk detail tambahan. Ia tidak perlu sekaligus menjadi wrapper modal, form field, table row, dan marketing hero. Ketika structure serta interaction berubah jauh, buat primitive atau component domain lain daripada menambah props mode baru.

Bagian ini memengaruhi progres lesson.

CourseCard dengan surface variant yang terbatas

Wajib

tsx

import type { ReactNode } from "react";

type CourseCardVariant = "default" | "featured" | "muted";

type CourseCardProps = {
  title: string;
  description: string;
  variant?: CourseCardVariant;
  children?: ReactNode;
};

export function CourseCard({
  title,
  description,
  variant = "default",
  children,
}: CourseCardProps) {
  return (
    <article className={"course-card course-card--" + variant}>
      <h2>{title}</h2>
      <p>{description}</p>
      {children ? <div className="course-card__content">{children}</div> : null}
    </article>
  );
}

article dan h2 memberi structure content yang dapat dibaca screen reader maupun developer. variant default membuat caller tidak perlu menulis prop untuk card biasa. children memberi area tambahan saat content memang masih bagian dari card course, misalnya progress atau link. Bila children selalu berisi layout besar yang berbeda, itu sinyal Card perlu dipecah atau consumer sebaiknya memakai composition lain.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Build course card variants

Buat CourseCard default, featured, dan muted dengan semantic article, content hierarchy, serta optional content area yang tetap sesuai purpose card.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

7 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kapan CourseCard variant featured paling tepat dipakai?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Card variants menandai peran content seperti default, featured, atau muted.
API card tetap perlu menjaga semantic structure title, description, dan content tambahan.
children berguna untuk detail yang masih sesuai dengan purpose card, bukan untuk menerima seluruh layout bebas.
Jangan mengubah Card menjadi container universal dengan mode untuk product pattern yang berbeda.
Uji Kompetensi berikutnya menggabungkan tokens, Button, Card, focus, disabled, serta contrast review pada satu UI kecil.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Card adalah surface product, bukan div dengan nama lebih panjang.

Memuat progres Review module