Card

A block element used to group related content.

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 border-dashed border-slate-300 text-sm font-medium text-slate-500 dark:border-slate-600 dark:text-slate-400">
      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"`