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 | Description |
|---|---|---|---|
children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | Content for the main card component | |
className | string | undefined | CSS class name to apply to each element within the component | |
css | CSSProperties | Partial<Record<"abyss-card-root", CSSProperties>> | undefined | 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 | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | |
disableDefaultProviderProps | boolean | undefined | 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. |
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | |
slotProps | Partial<Record<"card-root", SlotPropsLeafValue>> | undefined | ||
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
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
| 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) |