cmlabsBase GuidelinecmlabsBase GuidelineEvery card component on the source platform — 26 in total. Reference only; most are one-off patterns, not built as live components here (see the 4 recurring patterns for those).
Summary tile with a colored strip along the bottom, color varies by category.
Order history row — near-identical to PurchaseCard/RefundCard.
Purchase history row — near-identical to OrderCard/RefundCard.
Refund history row — near-identical to OrderCard/PurchaseCard.
Uses the base shadcn Card directly, no border/shadow, gray-30 background.
Square tile, hover border, has a skeleton loading variant.
Left border color rotates per index (primary/success/yellow/purple/danger).
Simple flex row, gray-20 background.
Image + body, shadow-smooth.
Uses the brand gradient classes (background-gradient-blue, etc.) per item.
Selectable tile, primary-70 border + tint when active.
Legacy "card/card-header/card-body" class names with no CSS rules behind them — pure Tailwind.
No box/background — plain flex layout, color changes by variant.
Ribbon badge on the "populer" variant.
Featured variant swaps the icon container to white-on-primary.
No box/background — plain flex layout, vertical/horizontal variants.
Has an animate-pulse loading state.
Stacked avatars with a "+N" popover.
Fixed-height image (280px), CTA pinned to bottom via mt-auto.
Visual duplicate of BookCard (ebook) — different data shape only.
Status label color differs (purple = upcoming, yellow = completed).
Has a loading variant.
Visual duplicate of ReferencesCard.
Responsive: an Accordion on mobile, a bordered card on desktop.
Uses the base shadcn Card, fixed-positioned via Popper.js relative to the navbar.
Overlay close/pin buttons in the top-right corner.