Layout

Card

The Alea panel: a rounded surface with a soft ring. Deep, outline and interactive versions.

Ant Design: Card

import { Card, CardTitle, CardDescription, CardLink } from '@alea/ui';

Examples

Variants

Default with the soft ring, deep for inset areas, outline for quiet grouping.

Default

The Alea panel.

Deep

An inset area.

Outline

Just a border.

Interactive card

Lifts and glows on hover. One CardLink makes the whole card clickable with one tab stop.

New

Mode Matrix

Every mode of a screen side by side, each copy checked for contrast.

Padding

tight, normal (default) and loose.

Tight

Normal

Loose

Props

`Card` props

Show 10 React Aria props

The Alea panel: rounded surface with the soft inner ring.

Prop	Type	Default	Description
`as`	`ElementType`	`'div'`	The element to render. Default div; use article or section when it fits.
`interactive`	`boolean`	-	Lifts and glows on hover; use when the whole card is a link (put the link inside with CardLink).
`padding`	`"none" \| "tight" \| "normal" \| "loose"`	`'normal'`	tight uses less padding and a smaller radius.
`variant`	`"default" \| "deep" \| "outline"`	`'default'`	default: the surface with the soft ring; deep: a darker inset panel; outline: border only.

`CardTitle` props

Show 10 React Aria props

Card title in Crimson Pro.

Prop	Type	Default	Description
`as`	`ElementType`	`'h3'`	The heading element. Default h3; match the page outline.

`CardDescription` props

Card body text, muted.

Prop	Type	Default	Description
`aria-label`	`string`	-	Defines a string value that labels the current element. @see aria-labelledby. (React Aria)
`autoFocus`	`boolean`	-	(React Aria)
`className`	`string`	-	(React Aria)
`defaultValue`	`string \| number \| readonly string[]`	-	(React Aria)
`id`	`string`	-	(React Aria)
`inputMode`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-	Hints at the type of data that might be entered by the user while editing the element or its contents @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} (React Aria)
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	-	(React Aria)
`onSubmit`	`SubmitEventHandler<HTMLElement>`	-	(React Aria)
`role`	`AriaRole`	-	(React Aria)
`style`	`CSSProperties`	-	(React Aria)

`CardLink` props

Makes the whole card clickable through one real link (keeps one tab stop and the link text as the name).

Prop	Type	Default	Description
`aria-label`	`string`	-	Defines a string value that labels the current element. @see aria-labelledby. (React Aria)
`autoFocus`	`boolean`	-	(React Aria)
`className`	`string`	-	(React Aria)
`defaultValue`	`string \| number \| readonly string[]`	-	(React Aria)
`href`	`string`	-	(React Aria)
`id`	`string`	-	(React Aria)
`inputMode`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-	Hints at the type of data that might be entered by the user while editing the element or its contents @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} (React Aria)
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	-	(React Aria)
`onSubmit`	`SubmitEventHandler<HTMLElement>`	-	(React Aria)
`role`	`AriaRole`	-	(React Aria)
`style`	`CSSProperties`	-	(React Aria)
`target`	`HTMLAttributeAnchorTarget`	-	(React Aria)
`type`	`string`	-	(React Aria)

An interactive card is made clickable by one real link inside (CardLink), so there is one tab stop and a clear name.

Do and don't

Group one topic per card.
Use CardLink for cards that go somewhere.

Don't

Don't nest cards in cards; use deep for an inset area.
Don't put several links in an interactive card.

In Figma

Card with Variant (Default, Deep, Outline) and Padding (Tight, Normal, Loose).