Card

A versatile container component for displaying content with support for images, headers, footers, and interactive states.

Import#

import { Card } from "asheeui";

Usage#

import { Card } from "asheeui";

export default function Basic() {
	return (
		<Card
			title="Card Title"
			description="This is a description that provides additional context about the card content."
			body="Main card content goes here. This can be any React node."
			className="max-w-sm"
		/>
	);
}

Examples#

Variant#

Size#

Radius#

With image (top)#

PreviewCode

Image on top

A video-ratio image sits above the card content.

Give the image prop a position of top to place an image above the content.

With image (background)#

PreviewCode

Background image

The image fills the entire card behind the content.

Content sits on top of the image. Use a scrim or semi-transparent panel to keep text readable.

With image (bottom)#

PreviewCode

Image on bottom

A video-ratio image sits below the card content.

Give the image prop a position of bottom to place an image below the content.

With header and footer#

Clickable card#

Disabled state#

With animation#

Custom styling#

With custom image component#

PreviewCode

Next.js Image

Using Next.js Image component for automatic optimization

Props#

* Falls back through Global Configuration if not set. See below.

Global Configuration#

Card reads defaults from four places, in this order of precedence:

1. Instance prop: set directly on <Card />
2. Component config: components.card in your ashee.config
3. Theme default: defaultVariant / defaultRadius in your ashee.config
4. Built-in fallback: component's internal default values

Component config#

// ashee.config.ts
import type { ExternalConfig } from "asheeui";

export const config: ExternalConfig = {
  components: {
    card: {
      variant: "elevated",
      size: "md",
      radius: "md",
      imagePosition: "top",
      imageRatio: "video",
      imageFit: "cover",
      isClickable: false,
      animate: true,
    },
  },
};

Built-in fallbacks#

{
  size: "md",
  variant: "bordered",
  radius: "md",
  imagePosition: "top",
  imageRatio: "video",
  imageFit: "cover",
  isClickable: false,
  animate: true,
}

Accessibility#

• Renders as a <div> element when clickable for proper semantics
• Uses role="link" when href is provided
• Uses aria-disabled for disabled state
• Implements focus-visible rings for keyboard navigation
• Supports keyboard interaction with Enter and Space keys
• Image alt text is required for accessibility

Notes#

• Clickable Cards: When isClickable is true or href/onClick is provided, the card becomes interactive with hover effects and keyboard support.
• Animation: The animate prop adds a subtle scale effect on click. It's enabled by default for clickable cards.
• Children vs Body: Use children for simple content or body for explicit body content. If both are provided, body takes precedence.
• Image Fit: The imageFit prop controls how the image fills its container using CSS object-fit values.
• Variant Styles: elevated includes a shadow, bordered has a border, flat has a subtle background, and ghost has no background or border.
• Custom Image Component: You can replace the native <img> with any custom image component (e.g., Next.js Image) using the imageComponent prop. The component works with all image positions (top, bottom, background) and preserves all styling, ratios, and fit behaviors.