card

card là container chính cho nội dung. hỗ trợ flat, raised, bordered variants với header/body/footer sub-components.

variants

viền mỏng, background trắng. dùng cho hầu hết nội dung.

không viền, nền mờ. phù hợp cho sections lồng nhau.

có shadow tạo chiều sâu. hover để thấy hiệu ứng nâng.

viền dày hơn. tốt cho phân tách trực quan mạnh.

● card header

card body — nội dung chính của thẻ. có thể chứa text, hình ảnh, hoặc bất kỳ component nào khác. line-height thoải mái cho khả năng đọc.

--card-bg var(--surface-raised)

--card-border var(--border-color)

--card-border-strong var(--border-color-strong)

--card-padding-sm var(--space-md)

--card-padding-md var(--space-lg)

--card-padding-lg var(--space-xl)

component tương tác đầy đủ với docs, variants, và interaction tests.