Card Examples
Explore the various card styles, layouts, and use cases available in Heco UI.
Card Variants
Default Card
The standard card style
This is the default card style with a clean background.
Outlined Card
A subtle bordered style
This card has a border but a transparent background.
Elevated Card
With a shadow effect
This card has a shadow to create a raised effect.
Interactive Cards
Hoverable Card
Hover over me
This card has a hover effect that adds a subtle shadow.
Clickable Card
Click me
This entire card is clickable and has active state feedback.
Cards with Media
Media Card
With a 16:9 image
This card includes a media element with a 16:9 aspect ratio.
Overlay Text
With a semi-transparent background
Overlay Card
With text overlay on image
This card has an overlay on top of the image.
Real-world Card Examples
Wireless Headphones
$129.99Premium wireless headphones with noise cancellation and 30-hour battery life.
The Future of Web Development in 2025
Explore the upcoming trends and technologies that will shape web development in the coming year.
Jane Smith
April 7, 2025 ยท 5 min read
Card API
The Card component API reference.
Card Props
| Prop | Description | Type | Default |
|---|---|---|---|
| variant | Visual style variant of the card | "default" | "outlined" | "elevated" | "default" |
| isHoverable | Whether to show hover effects | boolean | false |
| isClickable | Whether the card is clickable | boolean | false |
Card Media Props
| Prop | Description | Type | Default |
|---|---|---|---|
| src | Image source URL | string | Required |
| aspectRatio | Aspect ratio of the media | "auto" | "square" | "video" | "wide" | "auto" |
| overlay | Content to display over the image | React.ReactNode | - |