Flexible card component for content grouping with brutal shadows and borders.
Simple content cards with 4px borders and hard shadows
This card has thick border and hard shadow. Hover to see lift effect.
Card with primary background color.
Shadow expands on hover.
Cards with buttons and action areas
This card includes an action button at the bottom.
Cards can have multiple action buttons.
Visual cards with figure elements
Card with image at the top.
Perfect for portfolios.
Great for showcases.
Side-by-side layout with card-side class
Image on the left, content on the right. Use card-side class.
Perfect for product listings or features with prominent imagery.
Cards work great in responsive grid layouts
Smaller padding for dense grids.
Responsive columns.
Adapts to screen size.
Mobile to desktop.
Responsive 2-column layout for project portfolios with clickable cards
94% REDUCTION IN MANUAL PROCESSING TIME
FASTER AUTHORING, CLEANER ARCHITECTURE
grid-cols-2 to maintain 2 columns from 320px mobile to desktop. Cards scale with responsive sizing (h-32 sm:h-48, text-sm sm:text-lg). Entire card is clickable.hover-lift for interactive feedback on all cards.