The card component is a versatile container that organizes related content, actions, and media in a consistent, visually appealing format. Cards provide a foundation for building information hierarchies and can be used for everything from simple content displays to complex interactive elements.
✅ Use cards when:
- Displaying content previews or summaries
- Creating product listings or catalogs
- Building dashboard widgets or tiles
- Organizing related information in digestible chunks
- Creating navigational elements with rich content
- Presenting user profiles or contact information
❌ Don't use cards for:
- Single lines of text (use list items instead)
- Full-page content layouts (use sections)
- Simple buttons or links (use button/link components)
- Data tables (use table components)
The card component uses a modular approach with building blocks that can be combined to create various layouts. Each sub-component has consistent spacing and sizing options.
The card component is a container component that can contain other components. The card component has a predefined style, but you can customize it with css variables. Card without any content only displays an empty div with a default background color. As you can see it is not very useful in this state.
The library contains predefined building blocks for the card component. You can use these blocks, or you can use whatever you want to build your card.
All card elements include intelligent spacing that automatically adjusts based on their position within the card. You can control spacing behavior with the spacing attribute:
none: No additional spacingtop: Add spacing only above the elementbottom: Add spacing only below the elementboth: Add spacing above and below the element
For pure CSS implementations, use spacing classes like dds-card-title-spacing--none, dds-card-content-spacing--both, etc.
The card image component automatically handles image sizing, aspect ratios, and positioning within the card. It provides consistent visual treatment across different card layouts.
The card title provides primary heading text with automatic size inheritance from the parent card. Use the renderAs attribute to change the semantic HTML element (h1, h2, etc.) for proper document structure.
The card subtitle provides secondary heading text, typically used for categories, dates, or supplementary information. It automatically coordinates with the title for proper visual hierarchy.
The card content component serves as the main content area, automatically handling text flow, spacing, and typography. It can contain any content including text, lists, forms, or other components.
The card actions component provides a dedicated area for interactive elements like buttons, links, or controls. It automatically handles button spacing and alignment within the card layout.
Cards can be made interactive for navigation or actions. Interactive cards provide visual feedback on hover and can function as large clickable areas. They automatically handle keyboard navigation and screen reader accessibility.
The card component supports three sizes (sm, md, lg) that affect internal spacing, typography, and overall proportions. Child elements automatically inherit the parent card's size unless overridden with parentSized="false".
Create horizontal card layouts by combining flexbox with card components. This pattern works well for larger cards with substantial content.
#horizontal-image {
margin-left: var(--dds-spacing-400);
padding: var(--dds-spacing-400) 0 var(--dds-spacing-400)
var(--dds-spacing-400);
}
#horizontal-image::part(base) {
border-radius: var(--dds-radius-base);
}
#horizontal-card-image .dds-card-content,
#horizontal-card-image dap-ds-card-content::part(base) {
padding: 0 var(--dds-spacing-400) var(--dds-spacing-400)
var(--dds-spacing-400);
}
#horizontal-card-image .dds-card-title,
#horizontal-card-image dap-ds-card-title::part(base) {
padding: 0 var(--dds-spacing-400);
}
#horizontal-card-image .dds-card-subtitle,
#horizontal-card-image dap-ds-card-subtitle::part(base) {
padding: var(--dds-spacing-400) var(--dds-spacing-400) 0
var(--dds-spacing-400);
}
#horizontal-card-image .dds-card-actions,
#horizontal-card-image dap-ds-card-actions::part(base) {
padding: 0 var(--dds-spacing-400) var(--dds-spacing-400)
var(--dds-spacing-400);
}
.row {
display: flex;
flex-direction: row;
}
#custom-card-icon {
flex-shrink: 0;
color: var(--dds-icon-positive-subtle);
}
#simple-card::part(base) {
background-color: var(--dds-background-neutral-base);
color: var(--dds-text-neutral-base);
}
#simple-card-content-native,
#simple-card-content::part(base) {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: var(--dds-spacing-200);
padding: var(--dds-spacing-300);
}
#simple-card-icon .dds-card-title,
#simple-card-icon dap-ds-card-title::part(base) {
padding: 0;
}
- Semantic Structure: Proper HTML hierarchy with customizable heading elements
- Keyboard Navigation: Full keyboard support for interactive cards
- Screen Reader Support: Descriptive labels and ARIA attributes
- Focus Management: Clear focus indicators and logical tab order
- Color Contrast: Meets WCAG accessibility standards
- Alternative Text: Required alt attributes for images
- Use semantic headings: Always use proper heading hierarchy with
renderAs - Provide meaningful alt text: Essential for card images
- Keep content scannable: Use clear titles and concise descriptions
- Limit actions: Maximum 2-3 primary actions per card
- Consistent spacing: Use the built-in spacing system
- Appropriate sizing: Choose card size based on content importance
- Visual hierarchy: Use subtitle, title, and content strategically
- Interactive feedback: Always provide hover states for clickable cards
- Lazy load images: Use native lazy loading for card images
- Optimize image sizes: Provide appropriately sized images
- Progressive enhancement: Ensure cards work without JavaScript
- Use CSS over JS: Leverage CSS custom properties for styling
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--dds-spacing-400);
padding: var(--dds-spacing-400);
}
.responsive-card {
--dds-card-padding: var(--dds-spacing-300);
}
@media (min-width: 768px) {
.responsive-card {
--dds-card-padding: var(--dds-spacing-400);
}
}
@media (min-width: 1024px) {
.responsive-card {
--dds-card-padding: var(--dds-spacing-500);
}
}
.card-status-success::part(base) {
border-left: var(--dds-spacing-100) solid var(--dds-positive-600);
}
.card-status-warning::part(base) {
border-left: var(--dds-spacing-100) solid var(--dds-warning-600);
}
.card-status-error::part(base) {
border-left: var(--dds-spacing-100) solid var(--dds-negative-600);
}
.card-elevated {
--dds-card-shadow: 0 var(--dds-spacing-100) var(--dds-spacing-300) rgba(0, 0, 0, 0.1);
--dds-card-hover-shadow: 0 var(--dds-spacing-200) var(--dds-spacing-600) rgba(0, 0, 0, 0.15);
}
import { DapDSCard } from 'dap-design-system'
import { DapDSCardReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSCard } from 'dap-design-system/components'
| Property | Type | Default | Description |
|---|---|---|---|
interactive | boolean | false | Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element. |
renderAs | 'a', 'button' | 'a' | The render as type of the card, only applicable when interactive. |
disabled | boolean | false | Whether the card is disabled. |
noBorder | boolean | false | Removes the border around the card |
noPadding | boolean | false | Removes the padding around the card |
targetBlankText | string | The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text | |
target | '_blank', '_self' , '_parent' , '_top' | '_self' | The link target of the card |
href | string | The URL of the card. | |
rel | string | 'noreferrer noopener' | The rel of the card link. |
size | 'sm', 'md' , 'lg' | The size of the card title. Default is sm. |
| Name | Description |
|---|---|
(default) | The content of the card. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main card container. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-card::part(base) {
/* Your custom styles */
}
Example usage:
<dap-ds-card class="my-custom-dap-ds-card">
Card
</dap-ds-card>
.my-custom-dap-ds-card::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| Property Name | Description |
|---|---|
--dds-card-padding | The padding of the card. Default is `var(--dds-spacing-400)`. |
--dds-card-border-radius | The border radius of the card. Default is `var(--dds-radius-large)`. |
--dds-card-border-width | The border width of the card. Default is `var(--dds-border-width-base)`. |
--dds-card-border-color | The border color of the card. Default is `var(--dds-border-neutral-divider)`. |
--dds-card-background | The background color of the card. Default is `var(--dds-background-neutral-base)`. |
--dds-card-hover-border-color | The border color when hovering over the card. Default is `var(--dds-border-brand-base)`. |
--dds-card-active-border-color | The border color when the card is active. Default is `var(--dds-border-brand-medium)`. |
--dds-card-shadow | The box shadow of the card. Default is `none`. |
--dds-card-hover-shadow | The box shadow when hovering over the card. Default is `none`. |
--dds-card-transition-duration | The duration of the card's transitions. Default is `var(--dds-transition-medium)`. |
--dds-card-transition-timing | The timing function of the card's transitions. Default is `var(--dds-easing-ease-in-out)`. |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-card
style="--dds-card-padding: value; --dds-card-border-radius: value;">
Card
</dap-ds-card>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-card {
--dds-card-padding: value;
--dds-card-border-radius: value;
--dds-card-border-width: value;
}
<dap-ds-card class="my-custom-dap-ds-card">
Card
</dap-ds-card>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-card {
--dds-card-padding: value;
--dds-card-border-radius: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
| Property | Type | Default | Description |
|---|---|---|---|
parentSized | string | 'true' | Whether the card actions should be sized from the parent. |
spacing | 'top', 'bottom' , 'both' , 'none' | 'bottom' | The spacing of the card actions. This adds a margin to the card actions. Default is bottom. |
size | 'sm', 'md' , 'lg' | The size of the card actions. Default is sm. |
| Name | Description |
|---|---|
(default) | The content of the card actions. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main card actions container. |
| Property Name | Description |
|---|---|
--dds-card-actions-gap | The gap between items in the card actions. Default is `var(--dds-spacing-200)`. |
--dds-card-actions-padding-lg | The padding for large size card actions. Default is `var(--dds-spacing-600)`. |
--dds-card-actions-padding-md | The padding for medium size card actions. Default is `var(--dds-spacing-400)`. |
--dds-card-actions-padding-sm | The padding for small size card actions. Default is `var(--dds-spacing-400)`. |
--dds-card-actions-margin-lg | The margin for large size card actions spacing. Default is `var(--dds-spacing-600)`. |
--dds-card-actions-margin-md | The margin for medium size card actions spacing. Default is `var(--dds-spacing-400)`. |
--dds-card-actions-margin-sm | The margin for small size card actions spacing. Default is `var(--dds-spacing-400)`. |
| Property | Type | Default | Description |
|---|---|---|---|
renderAs | string | 'div' | The base rendered root tag of the card content. |
parentSized | string | 'true' | Whether the card content should be sized from the parent. |
spacing | 'top', 'bottom' , 'both' , 'none' | 'bottom' | The spacing of the card content. This adds a margin to the card subtitle. Default is bottom. |
size | 'sm', 'md' , 'lg' | The size of the card subtitle. Default is sm. |
| Name | Description |
|---|---|
(default) | The content of the card-content. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main card content container. |
| Property Name | Description |
|---|---|
--dds-card-content-padding | The padding of the card content. Default is `0`. |
--dds-card-content-margin | The margin of the card content. Default is `0`. |
--dds-card-content-font-size | The font size of the card content. Default is `var(--dds-font-base)`. |
--dds-card-content-line-height | The line height of the card content. Default is `var(--dds-font-line-height-xlarge)`. |
--dds-card-content-spacing-lg | The large spacing value. Default is `var(--dds-spacing-600)`. |
--dds-card-content-spacing-md | The medium spacing value. Default is `var(--dds-spacing-400)`. |
--dds-card-content-spacing-sm | The small spacing value. Default is `var(--dds-spacing-400)`. |
--dds-card-content-spacing-top | The top spacing value. Default is `0`. |
--dds-card-content-spacing-bottom | The bottom spacing value. Default is `0`. |
| Property | Type | Default | Description |
|---|---|---|---|
src | string | The source of the image. | |
alt | string | The alt text of the image. | |
width | number | The width of the image. | |
height | number | The height of the image. |
| Name | Description |
|---|---|
(default) | The default slot for the image. The slot can accept any element, for example a video. If nothing is added to the slot, the image will be rendered. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main card image container. |
| Property Name | Description |
|---|---|
--dds-card-image-width | The width of the image. Default is `100%`. |
--dds-card-image-height | The height of the image. Default is `auto`. |
--dds-card-image-object-fit | How the image fits within its container. Default is `cover`. |
--dds-card-image-background-position | The background position of the image. Default is `center`. |
--dds-card-image-background-size | How the background image is sized. Default is `cover`. |
--dds-card-image-background-repeat | How the background image repeats. Default is `no-repeat`. |
| Property | Type | Default | Description |
|---|---|---|---|
renderAs | string | 'span' | The base rendered root tag of the card subtitle. |
parentSized | string | 'true' | Whether the card subtitle should be sized from the parent. |
spacing | 'top', 'bottom' , 'both' , 'none' | 'top' | The spacing of the card subtitle. This adds a margin to the card subtitle. Default is top. |
size | 'sm', 'lg' | The size of the card subtitle. Default is sm. |
| Name | Description |
|---|---|
(default) | The content of the subtitle. |
No custom events available.
| Part Name | Description |
|---|---|
base | The subtitle container. |
| Property Name | Description |
|---|---|
--dds-card-subtitle-color | The color of the subtitle text. Default is `var(--dds-text-neutral-subtle)`. |
--dds-card-subtitle-font-size | The font size of the subtitle. Default is `var(--dds-font-xs)`. |
--dds-card-subtitle-font-weight | The font weight of the subtitle. Default is `var(--dds-font-weight-bold)`. |
--dds-card-subtitle-line-height | The line height of the subtitle. Default is `var(--dds-font-line-height-large)`. |
--dds-card-subtitle-padding-sm | The padding for small size. Default is `0 var(--dds-spacing-400)`. |
--dds-card-subtitle-padding-md | The padding for medium size. Default is `0 var(--dds-spacing-400)`. |
--dds-card-subtitle-padding-lg | The padding for large size. Default is `0 var(--dds-spacing-600)`. |
--dds-card-subtitle-margin-sm | The base margin for small size. Default is `var(--dds-spacing-400)`. |
--dds-card-subtitle-margin-md | The base margin for medium size. Default is `var(--dds-spacing-400)`. |
--dds-card-subtitle-margin-lg | The base margin for large size. Default is `var(--dds-spacing-600)`. |
--dds-card-subtitle-spacing-top-sm | The top spacing for small size. Default is `var(--dds-spacing-400)`. |
--dds-card-subtitle-spacing-top-md | The top spacing for medium size. Default is `var(--dds-spacing-400)`. |
--dds-card-subtitle-spacing-top-lg | The top spacing for large size. Default is `var(--dds-spacing-600)`. |
--dds-card-subtitle-spacing-bottom-sm | The bottom spacing for small size. Default is `var(--dds-spacing-400)`. |
--dds-card-subtitle-spacing-bottom-md | The bottom spacing for medium size. Default is `var(--dds-spacing-400)`. |
--dds-card-subtitle-spacing-bottom-lg | The bottom spacing for large size. Default is `var(--dds-spacing-600)`. |
--dds-card-subtitle-spacing-both-sm | The both (top and bottom) spacing for small size. Default is `var(--dds-spacing-400)`. |
--dds-card-subtitle-spacing-both-md | The both (top and bottom) spacing for medium size. Default is `var(--dds-spacing-400)`. |
--dds-card-subtitle-spacing-both-lg | The both (top and bottom) spacing for large size. Default is `var(--dds-spacing-600)`. |
| Property | Type | Default | Description |
|---|---|---|---|
renderAs | string | 'span' | The base rendered root tag of the card title. |
parentSized | string | 'true' | Whether the card title should be sized from the parent. |
noPadding | boolean | Whether the card title should have no padding. | |
spacing | 'top', 'bottom' , 'both' , 'none' | 'top' | The spacing of the card title. This adds a margin to the card title. Default is top. |
size | 'sm', 'md', 'lg' | The size of the card title. Default is sm. |
| Name | Description |
|---|---|
(default) | The content of the title. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main card title container. |
| Property Name | Description |
|---|---|
--dds-card-title-color | The text color of the card title. Default is `var(--dds-color-text-primary)`. |
--dds-card-title-font-family | The font family of the card title. Default is `var(--dds-font-family-base)`. |
--dds-card-title-font-weight | The font weight of the card title. Default is `var(--dds-font-weight-bold)`. |
--dds-card-title-line-height | The line height of the card title. Default is `var(--dds-font-line-height-large)`. |
--dds-card-title-margin-bottom | The bottom margin of the card title. Default is `var(--dds-spacing-100)`. |
--dds-card-title-sm-padding-x | The horizontal padding for small size. Default is `var(--dds-spacing-400)`. |
--dds-card-title-sm-padding-bottom | The bottom padding for small size. Default is `var(--dds-spacing-100)`. |
--dds-card-title-sm-spacing-top | The top spacing for small size. Default is `var(--dds-spacing-400)`. |
--dds-card-title-sm-spacing-bottom | The bottom spacing for small size. Default is `var(--dds-spacing-400)`. |
--dds-card-title-md-padding-x | The horizontal padding for medium size. Default is `var(--dds-spacing-400)`. |
--dds-card-title-md-padding-bottom | The bottom padding for medium size. Default is `var(--dds-spacing-100)`. |
--dds-card-title-md-spacing-top | The top spacing for medium size. Default is `var(--dds-spacing-400)`. |
--dds-card-title-md-spacing-bottom | The bottom spacing for medium size. Default is `var(--dds-spacing-400)`. |
--dds-card-title-lg-padding-x | The horizontal padding for large size. Default is `var(--dds-spacing-600)`. |
--dds-card-title-lg-padding-bottom | The bottom padding for large size. Default is `var(--dds-spacing-100)`. |
--dds-card-title-lg-spacing-top | The top spacing for large size. Default is `var(--dds-spacing-600)`. |
--dds-card-title-lg-spacing-bottom | The bottom spacing for large size. Default is `var(--dds-spacing-600)`. |
