DÁP Design System - Card webcomponent

Card

Card component is a web component that displays a card with the ability to add a title, description, and actions.

Design system docs

Examples

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 the card elements has a predefined spacing, which is basically a margin on the top or the bottom of the element. You can change it with the spacing attribute, which can be none, top, bottom, both.

Also the pure css solution has predefined classes for the spacing. You can use the [card-element-name]-spacing--none, [card-element-name]-spacing--top, [card-element-name]-spacing--bottom, [card-element-name]-spacing--both classes for the spacing.

Example: dds-card-title-spacing--none.

Card Image

Card image is a simple HTML img tag with a predefined style. It will center and fit the image to the card.

<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

Card title is a simple text component, by default a html span tag. It will display the title with a predefined font size and color. This component automatically inherits the size settings of the parent card. This can be changed by the parentSized="false" attribute. This text also can be changed to a different HTML tag by the renderAs attribute.

<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

Card subtitle is very similar to the card title. It is a simple text component, an html span tag.

<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

Card content is a container component that can contain other components, by default it is an HTML div tag. This component automatically inherits the size settings of the parent card. This can be changed by the parentSized="false" attribute. This text also can be changed to a different HTML tag by the renderAs attribute.

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

Actions

That is what i call a card! We added an image, a title, a subtitle, content. Let's add some actions to it. The card actions component is a container component that can contain other components, like buttons.

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

The card component can be interactive also. By setting the interactive attribute to true, the card will have a hover effect. In this way the card will be rendered as an a tag, and you can set the href attribute to navigate to a different page. You can set the target and rel attributes also.

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

Sizing

The card component has a predefined size, but you can change it with the size attribute. The size can be sm, lg. By default all the card elements will inherit the size settings of the parent card. This can be changed by the parentSized="false" attribute.

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

Customizing the card

Horizontal card with image on the left side and content on the right side.

HTML

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

CSS

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

HTML

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

CSS

#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 and vertical alignment.

<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="alma"></dap-ds-avatar>
    <dap-ds-card-title noPadding spacing="none"> Title </dap-ds-card-title>
    Szoveg
  </dap-ds-card-content>
</dap-ds-card>

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