Card

A container for grouping related content. Supports header, body, and footer sections.

Import

import { Card } from '@kikumi3n/ui';

Usage

<Card>
  <p>Simple card content</p>
</Card>

With Padding

<Card style={{ padding: 'var(--spacing-6)' }}>
  <Heading level={3}>Card Title</Heading>
  <Text>Card content goes here.</Text>
</Card>

Variants

<Card variant="elevated">Elevated card with shadow</Card>
<Card variant="outlined">Outlined card with border</Card>

Variant	Description
elevated	Box shadow, raised appearance (default)
outlined	Border only, flat appearance

Clickable Card

<Card onClick={() => navigate('/detail')} hoverable>
  <Text>Click me to navigate</Text>
</Card>

API

Prop	Type	Default	Description
variant	'elevated' | 'outlined'	'elevated'	Card style variant
hoverable	boolean	false	Show hover effect
onClick	() => void	—	Click handler
className	string	—	Additional CSS class

Also accepts all standard <div> HTML attributes.

Composition Example

import { Card, Heading, Text, Button, Stack, Badge } from '@kikumi3n/ui';

function ProjectCard() {
  return (
    <Card style={{ padding: 'var(--spacing-6)' }}>
      <Stack gap={3}>
        <Stack direction="horizontal" gap={2} style={{ alignItems: 'center' }}>
          <Heading level={3}>My Project</Heading>
          <Badge variant="success">Active</Badge>
        </Stack>
        <Text size="sm">A brief description of the project.</Text>
        <Button size="sm" variant="secondary">View Details</Button>
      </Stack>
    </Card>
  );
}

Related

• StatCard — Metric display card
• Grid — Card grid layout