DWG · 01.06 · COMPONENT SPEC

Card

Surface wrapper drawn like a drawing sheet: an optional header (title + subtitle) and footer (title + subtitle) around a content body. Corner construction ticks are on by default.

Header and footer

01.06·A
PREVIEWPX · 1:1

North Wing

A-101
Plan view, ground floor.
SCALE 1:50SHEET 01/03
<Card
  title="North Wing"
  subtitle="A-101"
  footerTitle="SCALE 1:50"
  footerSubtitle="SHEET 01/03"
>
  Plan view, ground floor.
</Card>

Header only

01.06·B
PREVIEWPX · 1:1

Site survey

S-002

Field measurements collected on site, awaiting drafting review.

<Card title="Site survey" subtitle="S-002">
  <p className="mb-4">Field measurements collected on site, awaiting drafting review.</p>
  <div className="flex items-end gap-2">
    <Button size="sm">Open</Button>
  </div>
</Card>

Without corner ticks

01.06·C
PREVIEWPX · 1:1

Plain

X-000
Same title block, no construction marks at the corners.
<Card title="Plain" subtitle="X-000" corners={false}>
  Same title block, no construction marks at the corners.
</Card>

Variants

01.06·D
PREVIEWPX · 1:1

Default

Solid body.

Ghost

Transparent body.

Hatch

Hatched body.
<Card variant="default" title="Default">Solid body.</Card>
<Card variant="ghost" title="Ghost">Transparent body.</Card>
<Card variant="hatch" title="Hatch">Hatched body.</Card>

Composition

01.06·F
PREVIEWPX · 1:1

North Wing

APPROVED
Compose the header, body, and footer yourself.
SCALE 1:50
<Card>
  <Card.Header>
    <Card.Title>North Wing</Card.Title>
    <Badge tone="ok" className="ml-auto">APPROVED</Badge>
  </Card.Header>
  <Card.Body>Compose the header, body, and footer yourself.</Card.Body>
  <Card.Footer className="justify-between">
    <Annotation>SCALE 1:50</Annotation>
    <Button size="sm">Open</Button>
  </Card.Footer>
</Card>