Migration Information

For teams migrating from the V1 to V2 component, please refer to the migration guide for changes to the component.

Component Guide

import { Card } from '@uhg-abyss/web/ui/Card';

Usage

V1 replication

If teams previously used Card.Header and Card.Section, a similar look can be created with css overrides.

Custom examples

Customize a card by adding components inside the base. Any CSS styles can be added using the abyss-card-root class.

Default padding within the Card is 16px. This can be overridden, as can the width, etc.

Card Props

Name	Type	Default	Required	Description
children	React.ReactNode	-	-	Content for the main card component
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.

Below are the link(s) to the relevant GitHub type files:

Abyss.d.ts

Card.types.ts

Card Classes

Class Name	Description
.abyss-card-root	Card root element

Headings are commonly used within the Card. The following examples are accessible and have passed Evinced WFA testing.

Component Tokens

Tip

Click on the token row to copy the token to your clipboard.

Card Tokens

Search tokens

Token Name	Value
card-base.color.border.container	#CBCCCD
card-base.color.surface.container	#FFFFFF
card-base.border-radius.all.container	8px
card-base.border-width.all.container	1px
card-base.spacing.padding.all.container	16px
card-base.elevation.container	0px 2px 4px -2px rgba(0,0,0,0.16)