Card

Cards are flexible-size container that display content and actions on a single topic. They can display featured information, related content, or navigational choices.

Import

Default Card

Loading preview
Open in Storybook

With Media Start

Loading preview
Open in Storybook

With Media End

Loading preview
Open in Storybook

With Centered Content

Loading preview
Open in Storybook

Without Media

Loading preview
Open in Storybook

Without Actions

Loading preview
Open in Storybook

Custom Card

Loading preview
Open in Storybook

With Marketing Badge

Loading preview
Open in Storybook

With Overlapping Marketing Badge

Loading preview
Open in Storybook

With Standalone Marketing Badge

Loading preview
Open in Storybook

Props

Card Props

NameDescriptionDefault
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
-

Card Actionable Props

NameDescriptionDefault
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 aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean
-

Card Media Props

NameDescriptionDefault
children*

Media to render.

NonNullable<ReactNode>
-

Card Layout Props

NameDescriptionDefault
children*

Children to render as content or actions in the card. Should not include CardMedia.

NonNullable<ReactNode>
-

Card Content Props

NameDescriptionDefault
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
-

Card Actions Props

NameDescriptionDefault
children*

The actions of the card. Typically either buttons, icon buttons, or links.

NonNullable<ReactNode>
-

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.