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.