Card webcomponent - DÁP Szolgáltatások

Card

Overview

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.

When to Use

✅ 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)

Examples

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.

Default Card

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.

<dap-ds-stack>
<dap-ds-card>

</dap-ds-card>

Pure CSS solution:
<div className="dds-card">
</div>
</dap-ds-stack>

Card building blocks

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.

Card Elements Spacing

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 spacing
top: Add spacing only above the element
bottom: Add spacing only below the element
both: 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.

Card Image

The card image component automatically handles image sizing, aspect ratios, and positioning within the card. It provides consistent visual treatment across different card layouts.

<dap-ds-stack>
<dap-ds-card>
  <dap-ds-card-image
    src="/img/components/apples.webp"
    alt="alma">
  </dap-ds-card-image>
</dap-ds-card>

Pure CSS solution:
<div className="dds-card">
  <img className="dds-card-image" src="/img/components/apples.webp" alt="alma" />
</div>
</dap-ds-stack>

Card Title

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.

<dap-ds-stack>
<dap-ds-card>
  <dap-ds-card-image
    src="/img/components/apples.webp"
    alt="alma">
  </dap-ds-card-image>
  <dap-ds-card-title renderAs="h2" spacing="both"> Title as H2 </dap-ds-card-title>
</dap-ds-card>

Pure CSS solution:
<div className="dds-card">
  <img className="dds-card-image" src="/img/components/apples.webp" alt="alma" />
  <h2 className="dds-card-title dds-card-title--sm dds-card-title-spacing--both"> Title as H2 </h2>
</div>
</dap-ds-stack>

Card Subtitle

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.

<dap-ds-stack>
<dap-ds-card>
  <dap-ds-card-image
    src="/img/components/apples.webp"
    alt="alma">
  </dap-ds-card-image>
  <dap-ds-card-subtitle>Subtitle</dap-ds-card-subtitle>
  <dap-ds-card-title renderAs="h2" spacing="bottom"> Title as H2 </dap-ds-card-title>
</dap-ds-card>

Pure CSS solution:
<div className="dds-card">
  <img className="dds-card-image" src="/img/components/apples.webp" alt="alma" />
  <span className="dds-card-subtitle dds-card-subtitle--sm dds-card-subtitle-spacing--top">Subtitle</span>
  <h2 className="dds-card-title dds-card-title--sm dds-card-title-spacing--bottom"> Title as H2 </h2>
</div>
</dap-ds-stack>

Card Content

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.

<dap-ds-stack>
<dap-ds-card>
  <dap-ds-card-image
    src="/img/components/apples.webp"
    alt="alma"></dap-ds-card-image>
  <dap-ds-card-subtitle>Subtitle</dap-ds-card-subtitle>
  <dap-ds-card-title spacing="none">Title</dap-ds-card-title>
  <dap-ds-card-content>
    Content
  </dap-ds-card-content>
</dap-ds-card>

Pure CSS solution:
<div className="dds-card">
  <img className="dds-card-image" src="/img/components/apples.webp" alt="alma" />
  <span className="dds-card-subtitle dds-card-subtitle--sm dds-card-subtitle-spacing--top">Subtitle</span>
  <h2 className="dds-card-title dds-card-title--sm dds-card-title-spacing--none"> Title as H2 </h2>
  <span
    className="dds-card-content dds-card-content--sm dds-card-content-spacing--bottom">
    Content
  </span>
</div>
</dap-ds-stack>

Card Actions

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.

<dap-ds-stack>
<dap-ds-card>
  <dap-ds-card-image
    src="/img/components/apples.webp"
    alt="alma"></dap-ds-card-image>
  <dap-ds-card-subtitle>Subtitle</dap-ds-card-subtitle>
  <dap-ds-card-title>Title</dap-ds-card-title>
  <dap-ds-card-content>
    Content
  </dap-ds-card-content>
  <dap-ds-card-actions>
    <dap-ds-button>Action 1</dap-ds-button>
    <dap-ds-button>Action 2</dap-ds-button>
  </dap-ds-card-actions>
</dap-ds-card>

Pure CSS solution:
<div className="dds-card">
  <img className="dds-card-image" src="/img/components/apples.webp" alt="alma" />
  <span className="dds-card-subtitle dds-card-subtitle--sm dds-card-subtitle-spacing--top">Subtitle</span>
  <h2 className="dds-card-title dds-card-title--sm dds-card-title-spacing--top"> Title </h2>
  <span
    className="dds-card-content dds-card-content--sm dds-card-content-spacing--bottom">
    Content
  </span>
  <div className="dds-card-actions dds-card-actions--sm dds-card-actions-spacing--bottom">
    <button className="dds-button dds-button--primary dds-button--md">Action 1</button>
    <button className="dds-button dds-button--primary dds-button--md">Action 2</button>
  </div>
</div>
</dap-ds-stack>

Interactive Cards

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.

<dap-ds-stack>
<dap-ds-card
  interactive
  href="https://www.google.com"
  target="_blank"
>
  <dap-ds-card-image
    src="/img/components/apples.webp"
    alt="alma"></dap-ds-card-image>
  <dap-ds-card-subtitle>Subtitle</dap-ds-card-subtitle>
  <dap-ds-card-title>Title</dap-ds-card-title>
  <dap-ds-card-content>
    Content
  </dap-ds-card-content>
  <dap-ds-card-actions>
    <dap-ds-button>Action 1</dap-ds-button>
    <dap-ds-button>Action 2</dap-ds-button>
  </dap-ds-card-actions>
</dap-ds-card>

Pure CSS solution:
<a className="dds-card dds-card--interactive dds-card-clear" href="#">
  <img className="dds-card-image" src="/img/components/apples.webp" alt="alma" />
  <span className="dds-card-subtitle dds-card-subtitle--sm dds-card-subtitle-spacing--top">Subtitle</span>
  <h2 className="dds-card-title dds-card-title--sm dds-card-title-spacing--top"> Title </h2>
  <span
    className="dds-card-content dds-card-content--sm dds-card-content-spacing--bottom">
    Interactive clickable as link
  </span>
  <div className="dds-card-actions dds-card-actions--sm dds-card-actions-spacing--bottom">
    <button className="dds-button dds-button--primary dds-button--md">Action 1</button>
    <button className="dds-button dds-button--primary dds-button--md">Action 2</button>
  </div>
</a>
</dap-ds-stack>

Card Sizing

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".

<>
<dap-ds-card size="sm">
  <dap-ds-card-subtitle>Subtitle sm</dap-ds-card-subtitle>
  <dap-ds-card-title>Title sm</dap-ds-card-title>
  <dap-ds-card-content>
    Content sm
  </dap-ds-card-content>
  <dap-ds-card-actions>
    <dap-ds-button>Action 1</dap-ds-button>
    <dap-ds-button>Action 2</dap-ds-button>
  </dap-ds-card-actions>
</dap-ds-card>

<dap-ds-card size="lg">
  <dap-ds-card-subtitle>Subtitle lg</dap-ds-card-subtitle>
  <dap-ds-card-title>Title lg</dap-ds-card-title>
  <dap-ds-card-content>
    Content lg
  </dap-ds-card-content>
  <dap-ds-card-actions>
    <dap-ds-button>Action 1</dap-ds-button>
    <dap-ds-button>Action 2</dap-ds-button>
  </dap-ds-card-actions>
</dap-ds-card>

/* parentSized="false" on the title */

<dap-ds-card size="lg">
  <dap-ds-card-subtitle>Subtitle lg</dap-ds-card-subtitle>
  <dap-ds-card-title parentSized="false" size="sm">Title sm, parentSized="false"</dap-ds-card-title>
  <dap-ds-card-content>
    Content lg
  </dap-ds-card-content>
  <dap-ds-card-actions>
    <dap-ds-button>Action 1</dap-ds-button>
    <dap-ds-button>Action 2</dap-ds-button>
  </dap-ds-card-actions>
</dap-ds-card>
</>

Advanced Layouts

Horizontal Card Layout

Create horizontal card layouts by combining flexbox with card components. This pattern works well for larger cards with substantial content.

<dap-ds-stack>
<dap-ds-card size="lg" id="horizontal-card-image">
  <div className="row">
    <dap-ds-card-image
      height="260"
      width="260"
      id="horizontal-image"
      src="/img/components/apples.webp"
      alt="alma"></dap-ds-card-image>
    <div className="column">
      <dap-ds-card-subtitle spacing="none"> Subtitle </dap-ds-card-subtitle>
      <dap-ds-card-title renderAs="h1" spacing="none"> title lg </dap-ds-card-title>
      <dap-ds-card-content spacing="none"> Content </dap-ds-card-content>
      <dap-ds-card-actions>
        <dap-ds-button>Action 1</dap-ds-button>
      </dap-ds-card-actions>
    </div>
  </div>
</dap-ds-card>

Pure Css solution:
<div id="horizontal-card-image" className="dds-card dds-card--lg">
  <div className="row">
    <img id="horizontal-image" className="dds-card-image" src="/img/components/apples.webp" style={{width: 260, height: 260}} alt="alma" />
    <div className="column">
      <span
        className="dds-card-subtitle dds-card-subtitle--lg dds-card-subtitle-spacing--none"
        >Subtitle</span
      >
      <span className="dds-card-title dds-card-title--lg"> title lg </span>
      <span
        className="dds-card-content dds-card-content--lg dds-card-content-spacing--none">
        Large text
      </span>
      <div
        className="dds-card-actions dds-card-actions--lg card-actions-spacing--bottom">
        <dap-ds-button>Action 1</dap-ds-button>
      </div>
    </div>
  </div>
</div>
</dap-ds-stack>

#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;
}

Card with icon or avatar and horizontal alignment.

<dap-ds-stack>
  <dap-ds-card id="simple-card-icon" size="lg">
    <dap-ds-card-content id="simple-card-content" spacing="none">
      <dap-ds-icon id="custom-card-icon" name="checkbox-circle-fill">
      </dap-ds-icon>
      <span>
        <dap-ds-card-title spacing="none"> Icon </dap-ds-card-title>
        <dap-ds-typography variant="description">
          This is an icon with horizontal alignment.
        </dap-ds-typography>
      </span>
    </dap-ds-card-content>
  </dap-ds-card>

  <dap-ds-card id="simple-card-icon" size="lg">
    <dap-ds-card-content id="simple-card-content" spacing="none">
      <dap-ds-avatar size="sm" src="/img/components/apples.webp"></dap-ds-avatar>
      <span>
        <dap-ds-card-title spacing="none"> Avatar </dap-ds-card-title>
        <dap-ds-typography variant="description">
          This is an avatar with horizontal alignment.
        </dap-ds-typography>
      </span>
    </dap-ds-card-content>
  </dap-ds-card>

  <div id="simple-card-icon" className="dds-card dds-card--sm">
    <span
      id="simple-card-content-native"
      className="dds-card-content dds-card-content--lg dds-card-content-spacing--none">
      <dap-ds-icon id="custom-card-icon" name="checkbox-circle-fill">
      </dap-ds-icon>
      <span>
        <span
          className="dds-card-title dds-card-title--lg dds-card-title-spacing--none">
          Icon
        </span>
        <span className="dds-typography dds-typography-description">
           This is an icon with horizontal alignment.
        </span>
      </span>
    </span>
  </div>
  <div id="simple-card-icon" className="dds-card dds-card--sm">
    <span
      id="simple-card-content-native"
      className="dds-card-content dds-card-content--lg dds-card-content-spacing--none">
      <dap-ds-avatar size="sm" src="/img/components/apples.webp"></dap-ds-avatar>
      <span>
        <span
          className="dds-card-title dds-card-title--lg dds-card-title-spacing--none">
          Icon
        </span>
        <span className="dds-typography dds-typography-description">
           This is an icon with horizontal alignment.
        </span>
      </span>
    </span>
  </div>
</dap-ds-stack>

#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;
}

Card with Icon or Avatar (Vertical)

<dap-ds-card size="lg">
  <dap-ds-card-content>
    <dap-ds-avatar
      style={{margin: 'var(--dds-spacing-400) 0'}}
      src="/img/components/apples.webp"
      size="lg"
      alt="Profile image">
    </dap-ds-avatar>
    <dap-ds-card-title spacing="none" noPadding>User Profile</dap-ds-card-title>
    <dap-ds-typography variant="body">
      Additional profile information or description text can be placed here.
    </dap-ds-typography>
  </dap-ds-card-content>
</dap-ds-card>

Real-World Patterns

Product Card

<dap-ds-card size="md" style={{maxWidth: '320px'}}>
<dap-ds-card-image
  src="/img/components/apples.webp"
  alt="Fresh Red Apples">
</dap-ds-card-image>
<dap-ds-card-subtitle spacing="both">Organic Produce</dap-ds-card-subtitle>
<dap-ds-card-title renderAs="h3" spacing="none">
  Fresh Red Apples
</dap-ds-card-title>
<dap-ds-card-content spacing="both">
  <dap-ds-typography variant="body">
    Crisp, sweet apples perfect for snacking or baking. Locally sourced and organic certified.
  </dap-ds-typography>
  <dap-ds-typography variant="h4" style={{color: 'var(--dds-positive-600)', marginTop: 'var(--dds-spacing-200)'}}>
    $4.99/lb
  </dap-ds-typography>
</dap-ds-card-content>
<dap-ds-card-actions>
  <dap-ds-button variant="primary" size="sm">Add to Cart</dap-ds-button>
  <dap-ds-button variant="outline" size="sm">View Details</dap-ds-button>
</dap-ds-card-actions>
</dap-ds-card>

Dashboard Widget

<dap-ds-card interactive href="#analytics" size="lg" style={{maxWidth: '280px'}}>
<dap-ds-card-content spacing="none">
  <dap-ds-stack direction="row" align="center" justify="space-between">
    <dap-ds-icon name="bar-chart-2-line" size="24" style={{color: 'var(--dds-brand-600)'}}></dap-ds-icon>
    <dap-ds-typography variant="caption" style={{color: 'var(--dds-positive-600)'}}>
      +12.5%
    </dap-ds-typography>
  </dap-ds-stack>
  <dap-ds-card-title renderAs="h3" spacing="both" noPadding>
    Monthly Revenue
  </dap-ds-card-title>
  <dap-ds-typography variant="h2" style={{color: 'var(--dds-text-neutral-strong)'}}>
    $24,580
  </dap-ds-typography>
  <dap-ds-typography variant="body" style={{color: 'var(--dds-text-neutral-subtle)', marginTop: 'var(--dds-spacing-200)'}}>
    Compared to last month
  </dap-ds-typography>
</dap-ds-card-content>
</dap-ds-card>

Accessibility Features

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

Best Practices

Content Organization

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

Design Guidelines

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

Performance Optimization

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

Common Patterns

Grid Layout

.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 Sizing

.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);
  }
}

Status Indicators

.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);
}

Custom Shadows

.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);
}

Importing

import { DapDSCard } from 'dap-design-system/dist/dds'

Importing React

import { DapDSCardReact } from 'dap-design-system/dist/react'

Attributes

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
`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`.

Slots

Name	Description
`(default)`	The content of the card.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main card container.

CSS Custom Properties

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)`.

Components

Card actions

<dap-ds-card-actions/>

Attributes

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`.

Slots

Name	Description
`(default)`	The content of the card actions.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main card actions container.

CSS Custom Properties

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)`.

Card content

<dap-ds-card-content/>

Attributes

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`.

Slots

Name	Description
`(default)`	The content of the card-content.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main card content container.

CSS Custom Properties

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`.

Card image

<dap-ds-card-image/>

Attributes

Property	Type	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.

Slots

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.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main card image container.

CSS Custom Properties

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`.

Card subtitle

<dap-ds-card-subtitle/>

Attributes

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`.

Slots

Name	Description
`(default)`	The content of the subtitle.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The subtitle container.

CSS Custom Properties

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)`.

Card title

<dap-ds-card-title/>

Attributes

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`.

Slots

Name	Description
`(default)`	The content of the title.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main card title container.

CSS Custom Properties

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)`.