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.
On this page
Card Types
There are 2 types of cards.
1. Card
Card has optional, media, media padding and CTA sections. Cards can stand alone or be grouped together with related content. The card has an option to change from vertical, horizontal or custom layout.
2. Actionable Card
Actionable card allows you to tap anywhere within the card to trigger an action. Let customers know they can take action by using a hover state for this variation. These cards do not contain calls-to-action, as the entire card is actionable. A user has an options for marketing badge, media, media padding and to change between vertical, horizontal or custom layout.
Interactive Demo
This demo lets you preview the card component, its variations, and configuration options.
What’s New
- Cards are more flexible than ever.
- User can make all the changes without detaching symbol.
- User can add images and video.
- Introduced Custom Card where user can swap instances to their local component.
See full release notes
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.