Card

Status

import { Card, Empty, Pill } from "@hackcove/ui";

<Card title="PixelSlash" status={<Pill tone="amber">Coming soon</Pill>}>
  <Empty>Visual review for every pull request.</Empty>
</Card>

import { Card, Empty, Pill, SubsectionHeading } from "@hackcove/ui";

<Card>
  <SubsectionHeading>PixelSlash</SubsectionHeading>
  <Pill tone="amber">Coming soon</Pill>
  <Empty>Visual review for every pull request.</Empty>
</Card>

Spacing

import { Card, Empty, Stack } from "@hackcove/ui";

<Stack>
  <Card title="Open" count={3}>
    <Empty>Three things to do.</Empty>
  </Card>
  <Card title="Done" count={12}>
    <Empty>Twelve things finished.</Empty>
  </Card>
</Stack>

import { Card, Empty } from "@hackcove/ui";

<>
  <Card title="Open" count={3}>
    <Empty>Three things to do.</Empty>
  </Card>
  <Card title="Done" count={12}>
    <Empty>Twelve things finished.</Empty>
  </Card>
</>

Card

A bordered panel with an optional title, count and status; as picks the element (default section). Three opt-in forms for data views: flush drops the padding and clips the corners, for a table that runs edge to edge; bar puts the title, count and actions in a tinted strip across the top, over the body; dashed is an empty-state shell, a dashed outline with centred muted text. dashed stands alone: it ignores flush and bar; dashed="filled" is the same shell on a surface fill with more padding, for an empty state that must read as a panel. A flush card has no padding for a title, so give it a bar. size="sm" is the dense padding, the same on a ListRow and a FileDrop. tone is the Callout's set, for a data panel that carries a status (a soft fill and border, no shadow); a message is still a Callout, and bar and dashed have no tone. Other props (id, data-*, aria-*) go on the root. The root is relative, so a TextLink stretch inside it covers the card. footer is a tinted strip across the bottom, under a hairline, for the card's own actions or a total; in a CardGrid it stays at the foot of a card that is stretched to the row's height. It suits a panel, not a card that is a link, and dashed has none. href makes the whole card one link: the root is an <a> with a hover border and the focus ring, so it takes no actions and no as. With render it draws the app's own router <Link> (render={(p) => <Link to="/shots/1" {...p} />}). external opens it in a new tab.