Components
Card
Play around with props, edit and copy code.
Properties
Card
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| branding | enum | 'neutral' | Set branding |
| disabled | bool | false | If card should be disabled |
| expandable | bool | false | if card is expandable |
| isInitalExpanded | bool | false | if card is expandable, sets the cards initial state to expanded or collapsed. |
| children | node | Content | |
| className | string | Add custom class | |
| expandableList | bool | if card is expandable in a list. Expanded cards will separate from other card like an accordion. | |
| onChange | func | On change handler function called with (event, isExpanded) (For controlled component) |
CardBody
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| center | bool | Use to get center content | |
| children | node | Content | |
| className | string | Add custom class |
CardHeader
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| expandable | bool | false | |
| align | enum | ||
| children | node | ||
| className | string | ||
| expanded | bool | ||
| handleChange | func |
CardFooter
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| align | enum | ||
| children | node | ||
| className | string |
CardImage
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| alt * | string | Alt text for image | |
| children | node | Content | |
| className | string | Custom classname | |
| fontColor | string | Any svs color available in trinidad-ui colors | |
| imageHeight | string | Height of image | |
| position | enum | ||
| src * | string | Src to image |
Accessibility
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.
