import { Card } from '@uhg-abyss/mobile';() => { return ( <Card style={{ height: 100, padding: 12 }}> <Text>Card Sandbox</Text> </Card> );};Basic usage
The Card component is a versatile wrapper used to display content related to a single subject.
One example of Card can be seen in HomeWidget.
Pressable and Animations
The Card component extends the props of Pressableopens in a new window and can be used as a button.
Use the isDisabled prop to disable the pressable responder. In the case where you place something with its own touch responder within the card, like a ScrollView, FlatList, SectionList, etc., you will want to disable the pressable responder.
Animationsopens in a new window can be added via the styles prop targeting abyss-card-root.
A Card that is programmed as a button with a Call To Action (CTA) must use accessibility props like those in Button. This ensures assistive technology can reach, understand, and activate the card.
When building a CTA Card, text content should be short. A Screen Reader will present button content in one full string that cannot be navigated easily by the device. Large CTA Card text will be difficult for screen reader users to understand.
Card.Section
The Card.Section subcomponent provides a card 16px of padding. A use case example is provided in CheckBoxGroup.
Multi Select Card
A Card can be used as a container for selections by combining it with the CheckboxGroup or Checkbox components.
Card Props
| Name | Type | Default | Description |
|---|---|---|---|
children | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined | Set the children of the card | |
color | Color | undefined | '$card.color.surface.container' | Color of the card |
isDisabled | boolean | undefined | false | Toggle the disabled state |
padding | Space | undefined | 0 | Padding of the card |
Card Classes
| Class Name | Description |
|---|---|
| abyss-card-root | Card root element |
Card.Section Classes
| Class Name | Description |
|---|---|
| abyss-card-section-root | Card section root element |
Card Tokens
| Token Name | Value | |
|---|---|---|
| card.color.surface.container | #FFFFFF | |
| card.color.border.container | #CBCCCD | |
| card.color.border.checked | #196ECF | |
| card.border-radius.container | 12 | |
| card.border-width.container | 0.5 | |
| card.border-width.checked | 1 | |
| card.spacing.padding.all.container | 16 | |
| card.box-shadow.container |
|