Card

Anatomy

<Card>
  <CardHeader>
    <CardTitle />
    <CardDescription />
  </CardHeader>
  <CardContent />
  <CardFooter />
</Card>

Usage

Cards are composed using <Card>, <CardHeader>, <CardTitle>, <CardDescription>, <CardContent>, and <CardFooter>.

This is a card title

A brief description of the card.

Replace Me

Replace Me

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "stylus-ui/Card";

const placeholderStyles =
  "align-center flex w-60 items-center justify-center rounded border text-sm font-medium text-slate-500";

export default () => (
  <Card>
    <CardHeader>
      <CardTitle>This is a card title</CardTitle>
      <CardDescription>A brief description of the card.</CardDescription>
    </CardHeader>
    <CardContent>
      <div className={`${placeholderStyles} h-24`}>Replace Me</div>
    </CardContent>
    <CardFooter>
      <div className={`${placeholderStyles} h-12`}>Replace Me</div>
    </CardFooter>
  </Card>
);

Linked cards

To display hover styles, change the card type to linked. You will still need to wrap the card in <Link> from next/link, or a plain <a> tag.

This is a clickable card

A brief description of the card.

import Link from "next/link";
import { Card, CardHeader, CardTitle, CardDescription } from "stylus-ui/Card";

export default () => (
  <Link href="#linked-cards">
    <Card type="linked">
      <CardHeader>
        <CardTitle>This is a clickable card</CardTitle>
        <CardDescription>A brief description of the card.</CardDescription>
      </CardHeader>
    </Card>
  </Link>
);

API Reference

Card

Inherits properties from HTMLElement.

Prop	Type	Default
children	ReactNode
type	"default""linked"	"default"

CardHeader

Inherits properties from HTMLElement.

Prop	Type	Default
children	ReactNode

CardTitle

Inherits properties from HTMLElement.

Prop	Type	Default
children	ReactNode

CardDescription

Inherits properties from HTMLElement.

Prop	Type	Default
children	ReactNode

CardContent

Inherits properties from HTMLElement.

Prop	Type	Default
children	ReactNode

CardFooter

Inherits properties from HTMLElement.

Prop	Type	Default
children	ReactNode