Card

A generic hand-drawn surface container for grouping related content.

Overview

A Card is a generic surface for grouping related content — it isn’t interactive by itself and carries no built-in meaning beyond “these things belong together.”

Anatomy

A sketchy rectangle outline drawn behind plain children. On Web Components, content slotted as <h1>/<h2>/<h3>/[slot="title"] gets special title styling (::slotted CSS); React and React Native have no equivalent title slot — content is just plain children.

Variants & States

Unlike Button and Input, Card is mostly a static container — this section is intentionally thin rather than force-fitting states that don’t exist.

State	Status	Notes
Hover	Not implemented	Card is not interactive.
Focus	Not implemented	Card is not focusable.
Disabled	Not implemented	—
Loading	Not implemented	—
Error	Not implemented	—

The one real variation is a different prop per platform, not a shared state: React’s fill ('solid' | 'hachure') controls the fill pattern; Web Components and React Native instead expose elevated (a boolean drop-shadow effect) — a genuinely different API, not a superset of React’s.

Usage

Supply your own role/aria-label (React) or label (WC/RN) when the card functions as a landmark or region.
Use Card for visual grouping (a settings panel, a list item) rather than as a substitute for semantic HTML.

Don't

Don't expect a role or accessible name automatically on React — the caller is fully responsible for it there.
Don't rely on fill and elevated meaning the same thing across platforms — they're different props with different visual effects.

Accessibility

React: renders a plain <div>. No role or label is set automatically — “any ARIA role/ landmark is the caller’s to set” (per the component’s own doc comment).
Web Components: when a label is supplied, gh-card automatically sets internals.role = 'group' and internals.ariaLabel — a real behavior React does not replicate.
React Native: sets accessibilityRole="summary" only when accessibilityLabel is passed.
See the Accessibility Guide for general conventions.

Content

N/A — Card has no fixed content model. Content is whatever the caller passes as children (React/RN) or slots (Web Components).

Props API

React`@ghds/react`

Prop	Type	Default	Description
`fill`	`'solid' \| 'hachure'`	`'solid'`	Fill style of the card body.
`...rest`	`HTMLAttributes<HTMLDivElement>`	—	Native <div> attributes (e.g. role, aria-label) pass through.

Web Components`@ghds/web-components`

Prop	Type	Default	Description
`elevated`	`boolean`	`false`	Renders a sketch drop-shadow outline. No fill prop exists.
`label`	`string`	—	When set, exposes the card as an ARIA group with this label.

React Native`@ghds/react-native`

Prop	Type	Default	Description
`elevated`	`boolean`	`false`	Same effect as Web Components. No fill prop.
`accessibilityLabel`	`string`	—	When set, accessibilityRole becomes "summary".
`testID`	`string`	—	Test handle for queries.

Code examples

// React — @ghds/react (has `fill`, no `elevated`)
import { Card } from '@ghds/react/card';

<Card fill="hachure">
  <h3>Hachure</h3>
  <p>Sketched, translucent fill.</p>
</Card>;

<!-- Web Components — @ghds/web-components (has `elevated` + `label`, no `fill`) -->
<script type="module">
  import '@ghds/web-components/card';
</script>
<gh-card label="Elevated" elevated>
  <p>Drop-shadow sketch outline suggests elevation.</p>
</gh-card>

// React Native — @ghds/react-native (has `elevated`, no `fill`)
import { Card } from '@ghds/react-native/card';
import { Text } from '@ghds/react-native/theme';

<Card elevated accessibilityLabel="Summary">
  <Text>Elevated card content</Text>
</Card>;

Live Demo

React uses fill; Web Components uses elevated + label — the demo below deliberately shows each platform’s actual prop, not a unified example.

React @ghds/react

Web Components @ghds/web-components

Default sketch outline, no elevation.

Drop-shadow sketch outline suggests elevation.