Card
Mẫu chuẩnMột mặt nội dung: nền, viền, bo góc và đệm. Không bóng. interactive là opt-in — hover, pressed và vòng tiêu điểm. Không có header hay footer riêng.
Playground
Đổi brand, theme và interactive. Tab vào thẻ khi interactive bật để thấy vòng tiêu điểm.
interactive tắt: mặt tĩnh, không đổi nền khi trỏ, không vào thứ tự Tab.
import { Card } from "@nexobox/ui";
<Card>
Hồ sơ Nguyễn Thị Lan — chỉ để đọc.
</Card>Khi nào sử dụng
Nên dùng
Một khối nội dung cần đọc là một mặt riêng. Khi cả khối là một đích, bật interactive và để thẻ gốc là liên kết hoặc nút.
Khi nào không dùng
Tránh dùng
| Không dùng cho | Dùng thay |
|---|---|
| Dữ liệu so theo cột | Table |
| Sắp xếp, chọn hàng, phân trang | DataTable |
| Một con số kèm tone | StatCard |
| Một lựa chọn trong nhóm | ChoiceCardGroup hoặc CheckboxCardGroup |
Anatomy
Một phần tử gốc. Không có header, title, description hay footer — đó là children người gọi đặt vào.
Nguyễn Thị Lan
Khách hàng từ 2024. Cần xác nhận địa chỉ giao hàng trước khi gửi đơn tiếp theo.
Variants
Không có prop variant. Hai cách trình bày: tĩnh, và interactive.
States
Hover và pressed dưới đây bị buộc bằng token để nhìn thấy không cần chuột. Trên card interactive thật, hai nền đó chỉ xuất hiện lúc trỏ và lúc nhấn. Không có disabled, loading, error hay empty.
Bàn phím & trợ năng
Sizes
Không có. Card không nhận prop size và không đổi theo density.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| asChild | false | true: render đúng một phần tử con, thay div |
| interactive | false | Bật hover, pressed và vòng tiêu điểm |
| className | — | Nối thêm. Không thay bốn token mặt |
| children | — | Nội dung bên trong |
Design tokens
--nf-component-card-radius, --nf-component-card-padding, --nf-component-card-background, --nf-component-card-border. Khi interactive: --nf-component-card-hover, --nf-component-card-pressed, --nf-component-focus-width, --nf-component-focus-color, --nf-component-focus-offset. Không token shadow. Đo trên specimen: ….
Do / Don't
Nên dùng
Card tĩnh khi chỉ đọc. interactive asChild với button hoặc liên kết khi cả khối là một đích.
Tránh dùng
Bật interactive trên mặt không dẫn đi đâu. Thêm shadow để làm nổi. Tự xếp một con số có tone thay vì StatCard.