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

</dap-ds-card>

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.

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-card>
<dap-ds-card-image
  src="/img/components/apples.webp"
  alt="alma">
</dap-ds-card-image>
</dap-ds-card>

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

Card Subtitle

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

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

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

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

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

CSS

#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 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>
</dap-ds-stack>

CSS

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

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.
`disabled`	`boolean`	`false`	Whether the card is disabled.
`noBorder`	`boolean`	`false`	Removes the border 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'`, `'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.

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

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

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.

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.

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