Card

Usage

Cards are composed using <Card>.

Replace Me

import { Card } from "stylus-ui/Card";

export default () => (
  <Card>
    <div className="align-center flex h-24 w-60 items-center justify-center rounded border bg-slate-50 text-sm font-medium text-slate-500">
      Replace Me
    </div>
  </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

import Link from "next/link";
import { Card } from "stylus-ui/Card";

export default () => (
  <Link href="#linked-cards">
    <Card type="linked">This is a clickable card</Card>
  </Link>
);

API Reference

Card

Inherits properties from HTMLElement.

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