Card

3 files changed+14 −3

import { Card, CardHeader, CardMeta, CardRows, ListRow } from "@arcadia/ui";

function Changes() {
  const files = [
    ["settings-dialog.tsx", "src/settings", 9, 2],
    ["settings.css", "src/settings", 4, 1],
    ["index.ts", "src", 1, 0],
  ] as const;
  return (
    <Card>
      <CardHeader>
        3 files changed
        <CardMeta>
          <span {...sx("cmp-add", cmp.add)}>+14</span> <span {...sx("cmp-del", cmp.del)}>−3</span>
        </CardMeta>
      </CardHeader>
      <CardRows>
        {files.map(([name, dir, add, del]) => (
          <ListRow
            key={name}
            leading="file-code"
            label={name}
            description={dir}
            emphasis
            meta={<>
              <span {...sx("cmp-add", cmp.add)}>+{add}</span>
              {del > 0 && <span {...sx("cmp-del", cmp.del)}>−{del}</span>}
            </>}
          />
        ))}
      </CardRows>
    </Card>
  )

TSX

import { Card, CardBody, CardHeader, CardMeta, CardTitle } from "@arcadia/ui";

<Card>
  <CardHeader icon="terminal" divided>
    Ran <CardTitle>bun test</CardTitle>
    <CardMeta>1.2s</CardMeta>
  </CardHeader>
  <CardBody>12 passed, 0 failed</CardBody>
</Card>

A card is a code window: one step off the page on --bg-card, framed by a 7% hairline with continuous corners, and it never casts a shadow: it is part of the page, not floating over it. Put rows in CardRows (ListRows inset 6px), prose in CardBody, a title and meta in CardHeader, and actions in CardFooter.

Examples

Interactive header

With interactive, the whole header is one button: a disclosure, or a way to open the plan. Don't nest other buttons in it; a static header with CardMeta can hold them instead.

Move every preference into one dialog with a sidebar of sections, and keep the shortcut list searchable.

import { useState } from "react";
import {
  Button, Card, CardBody, CardFooter, CardHeader, CardMeta, CardTitle,
} from "@arcadia/ui";

function Plan() {
  const [open, setOpen] = useState(true);
  return (
    <Card>
      <CardHeader
        icon="plan"
        interactive
        divided={open}
        aria-expanded={open}
        onClick={() => setOpen(!open)}
      >
        Plan
        <CardTitle>Settings dialog</CardTitle>
        <CardMeta>plans/settings-dialog.md</CardMeta>
      </CardHeader>
      {open && (
        <CardBody {...sx("cmp-prose", cmp.prose)}>
          Move every preference into one dialog with a sidebar of sections, and keep the
          shortcut list searchable.
        </CardBody>
      )}
      <CardFooter>
        <Button size="sm" shape="rounded">Copy</Button>
        <Button size="sm" shape="rounded" variant="primary">Build</Button>
      </CardFooter>
    </Card>
  );
}

A form

render turns the card into the <form> itself, so the footer's buttons submit and reset it natively.

import {
  Button, Card, CardBody, CardFooter, CardHeader, CardTitle, Field, Input,
} from "@arcadia/ui";

<Card render={<form onSubmit={(e) => e.preventDefault()} />}>
  <CardHeader icon="settings" divided>
    <CardTitle>Profile</CardTitle>
  </CardHeader>
  <CardBody {...sx("cmp-form", cmp.form)}>
    <Field label="Display name" description="Shown on shared links and comments.">
      <Input name="name" defaultValue="Ada Lovelace" autoComplete="name" />
    </Field>
  </CardBody>
  <CardFooter>
    <Button size="sm" shape="rounded" type="reset">Reset</Button>
    <Button size="sm" shape="rounded" variant="primary" type="submit">Save</Button>
  </CardFooter>
</Card>

Window

variant="window" makes the first header a title bar: the file in mono (its name in text-1, the folder in text-3), stats and actions at the end and always shown, and a hairline below.

receipt.tssrc/lib+2 −1

export function receiptFor({ subtotalMinor, feeMinor = 0, currency }: Receipt) {

import { Card, CardBody, CardHeader, CardMeta, CardTitle } from "@arcadia/ui";

<Card variant="window">
  <CardHeader>
    <CardTitle>receipt.ts</CardTitle>
    src/lib
    <CardMeta><span {...sx("cmp-add", cmp.add)}>+2</span> <span {...sx("cmp-del", cmp.del)}>−1</span></CardMeta>
  </CardHeader>
  <CardBody className="cmp-code"><span {...sx(null, cmp.code)}>{"export function receiptFor({ subtotalMinor, feeMinor = 0, currency }: Receipt) {"}</span></CardBody>
</Card>

Levels and variants

stream, the default, is for turn-level cards: radius 15 with continuous corners, 12 where the browser lacks them.

Task WorkingAudit focus order3 steps, 42s

12 passed, 0 failed, 71 expect() calls

import {
  Card, CardBody, CardHeader, CardMeta, CardTitle, Shimmer,
} from "@arcadia/ui";

<Card level="nested">
  <CardHeader icon="task">
    Task <Shimmer>Working</Shimmer>
    <CardTitle>Audit focus order</CardTitle>
    <CardMeta>3 steps, 42s</CardMeta>
  </CardHeader>
</Card>
<Card level="nested" variant="inset">
  <CardBody className="cmp-code"><span {...sx(null, cmp.code)}>12 passed, 0 failed, 71 expect() calls</span></CardBody>
</Card>

rootStyle takes where the card sits and these knobs; the header, body, rows and footer read them too, so --card-px moves every part's padding at once.

Takes	Default	Sets
`Paint`	`var(--bg-card)`	The card's surface.
`Paint`	`HAIRLINE`	The 1px frame.
`Ref<Radius>`	`var(--radius-frame-card)`	Corner radius (the card frame, 15; a nested card takes its rows' corner).
`Ref<"--corner"> \| "round"`	`var(--corner)`	Corner shape: continuous where supported, round on a nested card.
`Ref<Space>`	`var(--space-3)`	Inline padding of the header, body and footer.
`Ref<Control>`	`var(--control-lg)`	A window's title bar height.

Rows inside CardRows subtract their 6px inset and the border from the card radius, keeping the same corner shape.

Usage

Examples

Interactive header

A form

Window

Levels and variants

Customising

Accessibility

API reference

CardHeader3 props

CardFooter1 prop

CardTitleNo own props

CardMetaNo own props

CardBodyNo own props

CardRowsNo own props