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

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

</dap-ds-card>

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 image is a simple HTML img tag with a predefined style. It will center and fit the image to the card.

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

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-card>
  <dap-ds-card-image
    src="/img/components/apples.webp"
    alt="alma">
  </dap-ds-card-image>
  <dap-ds-card-title renderAs="h1"> Title as H1 </dap-ds-card-title>
</dap-ds-card>

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

<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="h1"> Title as H1 </dap-ds-card-title>
</dap-ds-card>

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

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

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

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

<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> Subtitle </dap-ds-card-subtitle>
        <dap-ds-card-title renderAs="h1"> title lg </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-card-actions>
      </div>
    </div>
  </dap-ds-card>

#horizontal-image {
  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 dap-ds-card-content::part(base) {
  padding: 0 var(--dds-spacing-400) var(--dds-spacing-400)
  var(--dds-spacing-400);
}

#horizontal-card-image dap-ds-card-title::part(base) {
  padding: 0 var(--dds-spacing-400);
}

#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 dap-ds-card-actions::part(base) {
  padding: 0 var(--dds-spacing-400) var(--dds-spacing-400)
  var(--dds-spacing-400);
}

Card with icon and horizontal alignment.

<dap-ds-card id="simple-card-icon" size="lg">
    <dap-ds-card-content id="simple-card-content">
      <dap-ds-icon id="custom-card-icon" name="checkbox-circle-fill">
      </dap-ds-icon>
      <span>
        <dap-ds-card-title> title sm </dap-ds-card-title>

        <dap-ds-typography variant="description">
          Description
        </dap-ds-typography>
      </span>
    </dap-ds-card-content>
  </dap-ds-card>

#custom-card-icon {
  color: var(--dds-icon-positive-subtle);
  flex-shrink: 0;
}

#simple-card::part(base) {
  background-color: var(--dds-background-neutral-base);
  color: var(--dds-text-neutral-base);
}

#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 dap-ds-card-title::part(base) {
  padding: 0;
}

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

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

No custom events available.

No CSS parts available.