Card

Bordered content surface with header, title, description, content, and footer subcomponents.

moleculesSource

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@elirobinson/react/components/molecules/Card';

Styles: @elirobinson/react/styles/molecules/Card.css — already included when you import @elirobinson/react/styles.css.

Show code

import { Badge } from '@elirobinson/react/components/atoms/Badge';
import { Button } from '@elirobinson/react/components/atoms/Button';
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@elirobinson/react/components/molecules/Card';

export default function Basic() {
  return (
    <div className="demo-col">
      <Card>
        <CardHeader>
          <div className="demo-row">
            <Badge>Food</Badge>
            <Badge>Family</Badge>
          </div>
          <CardTitle>Kids Recipes</CardTitle>
          <CardDescription>Simple, fun recipes designed for kids.</CardDescription>
        </CardHeader>
        <CardFooter>
          <Button variant="ghost" size="sm">
            View project
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}

When to use it

Use Card to group related content into one bordered surface — a portfolio tile, a pricing tier, a contact block. It's a layout primitive, not a status signal: for a message about the state of the page, reach for Alert; for a placeholder where a list of cards would normally go, use EmptyState.

CardHeader, CardTitle, CardDescription, CardContent, and CardFooter are plain layout slots — use the ones you need and skip the rest. A card doesn't require content and a footer both.

With content and actions

Practical AI consulting and tech support, from $150/hr.

Show code

import { Button } from '@elirobinson/react/components/atoms/Button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@elirobinson/react/components/molecules/Card';

export default function WithContent() {
  return (
    <div className="demo-col">
      <Card>
        <CardHeader>
          <CardTitle>Get in touch</CardTitle>
          <CardDescription>Tell me what you need — no contracts required.</CardDescription>
        </CardHeader>
        <CardContent>
          <p>Practical AI consulting and tech support, from $150/hr.</p>
        </CardContent>
        <CardFooter>
          <Button variant="accent">Hire me</Button>
          <Button variant="secondary">Learn more</Button>
        </CardFooter>
      </Card>
    </div>
  );
}