import { Card } from '@uhg-abyss/mobile';<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 Pressable 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.
Animations 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
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The node to be input into the Card component |
| color | string | $card.color.surface.container | The color of the card |
| isDisabled | boolean | false | Flag to disable the pressable responder |
| padding | number | 0 | Card padding value |
Card Classes
| Class Name | Description |
|---|---|
| abyss-card-root | Card root |
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 |
|