Card

A surface that groups related content, without adding any layout of its own.

Live React portWildCard.vueData Display/CardWCard

Try it

Swap the contents, the padding and the header.

Sign in

Enter your email and password.

sam@example.com

Password

••••••••••

Contents

Padding

Header

Wider

<WildCard title="Sign in" subtitle="Enter your email and password.">
  <WildFormField label="Email"><WildInput v-model="email" /></WildFormField>
  <WildFormField label="Password"><WildInput v-model="password" /></WildFormField>
  <WildButton variant="primary">Sign in</WildButton>
</WildCard>

When to use

Use a card to group content that belongs to one job: a form, a settings panel, a single figure.
Use one card per job, so each surface can be read on its own.
Set its width from the layout. A card fills the width it’s given.

Don’t use it

For a reading on the dashboard. Use a widget.
For content that needs a decision before the user carries on. Use a dialog.
For rows of records. Use a table.

Anatomy

A white surface with a soft shadow. The header and footer are optional, and a rule splits each from the body.

Alarm notifications

Choose how alarms reach you.

Sent to the address on the account.

SMS

Sent to the mobile on the account.

In-app

<WildCard title="Alarm notifications" subtitle="Choose how alarms reach you.">
  <div>Email<WildToggle v-model="email" /></div>
  <div>SMS<WildToggle v-model="sms" /></div>
  <div>In-app<WildToggle v-model="inApp" /></div>
  <template #footer><WildButton>Save</WildButton></template>
</WildCard>

The body adds no layout of its own. Space the contents with their own wrapper.

Actions

Sign in

sam@example.com

Password

••••••••••

no actions

Sites reporting

+12%

1,284

142 more than this time last month.

a status in actions

Put a status or a menu in actions, so it lines up with the title.

Padding

Each label gives the body inset as top and bottom / sides. The header and footer keep theirs.

Sites reporting

1,284

142 more than this time last month.

sm · 16 / 20px

Sites reporting

1,284

142 more than this time last month.

md · 20 / 24px · default

Sites reporting

1,284

142 more than this time last month.

lg · 28 / 32px

Without a header or footer, that edge of the body is 24px, whatever the padding. Use none for edge-to-edge contents between a header and footer.

Content

Name the job in the title, in sentence case: Alarm notifications.
Keep the subtitle to one line saying what to do here.
Keep actions to one or two controls, such as a status or a menu.

Accessibility

A card is a plain container with no role. Its title is a level-3 heading, so screen readers can jump to it.

Key	What it does
Tab	Moves through the controls inside. The card adds no stop.

Props

Prop	Type	Default	Description
title	string	—	Header title, rendered as a level-3 heading.
subtitle	string	—	One line under the title.
actions	ReactNode	—	Controls at the right of the header.
footer	ReactNode	—	Content below the body, after a rule.
padding	'none' \| 'sm' \| 'md' \| 'lg'	'md'	Body inset. See Padding.
children	ReactNode	—	The body. The card never styles it.
style	CSSProperties	—	Merged onto the surface. Set width here.

Tokens

Token	Value	Where it lands
--card-bg	#FFFFFF	The surface.
--radius-2xl	12px	Every corner.
(no token)	0 4px 24px -4px …, 0 0 0 1px …	Elevation, the same shadow widgets use.
--color-border-default	#E6E6E6	Header and footer rules.
--spacing-5 / --spacing-6	20px / 24px	Header: 20px top and bottom, 24px sides.
--spacing-4 / --spacing-6	16px / 24px	Footer: 16px top and bottom, 24px sides.
--font-size-xl	18px	Title, at weight 500.
--color-text-primary	#0A090B	Title colour.
--font-size-md	13px	Subtitle.
--color-text-secondary	#4F4D55	Subtitle colour.