Card.

A quiet frame for your content.

In practice

Compose CardHeader, CardTitle, CardDescription, CardContent and CardFooter. Use semantic headings within CardTitle.

Installation

Install Coal once. Components and TypeScript declarations are included. React 19 and React DOM 19 are peer dependencies.

npm install http://localhost:3100/downloads/chlohal-coal-ui-0.5.0.tgz

This installs the local package. It is not yet published on npm. See installation for stylesheet setup and integration.

Usage

"use client";
import * as React from "react";
import "@chlohal/coal-ui/styles.css";
import { ArrowRight } from "lucide-react";
import { Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardFooter } from "@chlohal/coal-ui";
export default function Example() {
    const [saved, setSaved] = React.useState(false);
    return (<Card>
          <CardHeader>
            <div>
              <span />
              <Badge variant="outline">Workspace</Badge>
            </div>
            <CardTitle>Room for your next idea.</CardTitle>
            <CardDescription>
              A space to make something your own.
            </CardDescription>
          </CardHeader>
          <CardFooter>
            <Button size="sm" variant="outline" onClick={() => setSaved(!saved)}>
              {saved ? "Added to your workspace" : "Add to workspace"}
              <ArrowRight />
            </Button>
          </CardFooter>
        </Card>);
}

Source

The original Coal implementation. Use the package export to integrate it.

import * as React from "react";
import { cn } from "./internal.js";
export function Card({
  className,
  ...props
}: React.ComponentPropsWithRef<"div">) {
  return <div className={cn("coal-card", className)} {...props} />;
}
export function CardHeader({
  className,
  ...props
}: React.ComponentPropsWithRef<"div">) {
  return <div className={cn("coal-card-header", className)} {...props} />;
}
export function CardTitle({
  className,
  ...props
}: React.ComponentPropsWithRef<"div">) {
  return <div className={cn("coal-card-title", className)} {...props} />;
}
export function CardDescription({
  className,
  ...props
}: React.ComponentPropsWithRef<"div">) {
  return <div className={cn("coal-card-description", className)} {...props} />;
}
export function CardContent({
  className,
  ...props
}: React.ComponentPropsWithRef<"div">) {
  return <div className={cn("coal-card-content", className)} {...props} />;
}
export function CardFooter({
  className,
  ...props
}: React.ComponentPropsWithRef<"div">) {
  return <div className={cn("coal-card-footer", className)} {...props} />;
}

Accessibility checklist

• Provide an accessible name for controls, including icon-only buttons.
• Check keyboard navigation, visible focus and disabled states in your application.
• Do not rely on color alone to communicate status.