Card

🌓Dark Mode Compatible

Overview

Card groups related content with a background, border, and optional shadow. Use it to create visual separation for sections and items.

Live demoInteractive

Card content

Anatomy

• Root: The card container.
• Content: The card body.

Usage

import { Card, Text } from '@grasdouble/lufa_design-system';

export function Example() {
  return (
    <Card>
      <Text as="h2">Profile</Text>
      <Text>User details go here.</Text>
    </Card>
  );
}

Props

Prop	Type	Default	Description
as	ElementType	'div'	Polymorphic prop to render a different element (e.g., section, article).
children	ReactNode	undefined	The content inside the card.
className	string	undefined	Additional CSS classes.

Accessibility

Choose semantic elements with as to improve document structure. Ensure headings inside cards follow a logical order.

Theming & Tokens

Card uses component tokens for background, border, and shadow. These tokens are theme‑aware.

Do / Don’t

Do

Use Card to group related content and actions.

Don’t

Avoid deeply nested cards—they reduce visual clarity.

Related Components

• Box
• Container