Cards

Flexible containers for grouping related content and actions

Basic Cards

Simple Card

This is a basic card with just a body. Perfect for simple content.

With Header

Cards can have headers to provide context and separate sections.

Complete Card

This card includes all three sections for maximum flexibility.

Card Variants

Bordered Card

A subtle border defines the card boundaries without a background.

Shadow Card

Elevated appearance with a shadow for depth and hierarchy.

Gradient Card

Custom gradient background for special emphasis.

Accent Border

Colored border to match your brand or indicate status.

Interactive Cards

Hoverable Card

Hover to see the effect

Disabled Card

Interactions are disabled

HeroUI • Build: 2025-08-04T19:49:41.958Z