Cards are flexible-size container that display content and actions on a single topic. They can display featured information, related content, or navigational choices.
| Name | Description | Default |
|---|---|---|
| children | Children to render as the contents of the card. NonNullable<ReactNode> & ReactNode | - |
| orientation | Determines the orientation of the card. CardOrientation | vertical |
| innerContainerClassName | Class names to be applied to the div which contains the children. string | - |
| Name | Description | Default |
|---|---|---|
| children | Children to render as the contents of the card. NonNullable<ReactNode> & ReactNode | - |
| orientation | Determines the orientation of the card. CardOrientation | vertical |
| innerContainerClassName | Class names to be applied to the div which contains the children. string | - |
| reactlytics | ReactlyticsProp | - |
| asChild | Component will delegate outermost React element to use first element passed within children boolean | - |
| ref | ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | - |
| disabled | @deprecated use The All DLS components are designed to use the boolean | - |
| Name | Description | Default |
|---|---|---|
| children* | Media to render. NonNullable<ReactNode> | - |
| Name | Description | Default |
|---|---|---|
| children* | Children to render as content or actions in the card. Should not include NonNullable<ReactNode> | - |
| Name | Description | Default |
|---|---|---|
| alignment | The alignment of the card's content. Adjusts the position of the icon, title, subtitle, and body. "center" | "start" | start |
| title | The title of the card. ReactElement<any, string | JSXElementConstructor<any>> | - |
| subtitle | The subtitle of the card. ReactElement<any, string | JSXElementConstructor<any>> | - |
| icon | The icon to render alongside the card. ReactNode | - |
| children | The body of the card, usually text content. ReactNode | - |
| Name | Description | Default |
|---|---|---|
| children* | The actions of the card. Typically either buttons, icon buttons, or links. NonNullable<ReactNode> | - |
Connect with the DLS Team on Slack or by email.
Check out additional resources.