Card

Displays content on a raised surface with an optional header, body, and footer.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { Card, CardHeader, CardBody, CardFooter, Button } from "@aile.sh/elia";

export function Example() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader title="Restock queue" />
      <CardBody>
        <p className="text-[12.5px] leading-relaxed text-ink-2">
          Seven SKUs fall below their reorder point this week. Waffle cones lead
          with a two-day runway.
        </p>
      </CardBody>
      <CardFooter className="justify-between">
        <span className="text-[12px] text-ink-3">Updated 4m ago</span>
        <Button variant="secondary" size="sm">
          Review
        </Button>
      </CardFooter>
    </Card>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia