Card

KCard is a styled container that organizes related content and actions.

Card Title

• Props
• Slots

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip excommodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nupariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit aid est laborum.

Published

2 versions

<KCard>
  <template #title>
    Card Title
  </template>
  <template #actions>
    <KDropdown
      :items="[
        { label: 'Props', to: { path: '/components/card#props' } },
        { label: 'Slots', to: { path: '/components/card#slots' } }
      ]"
    >
      <KButton
        appearance="tertiary"
        icon
        size="small"
      >
        <MoreIcon />
      </KButton>
    </KDropdown>
  </template>
  Lorem ipsum dolor sit amet ...
  <template #footer>
    <KBadge appearance="success">
      Published
    </KBadge>
    <KBadge>2 versions</KBadge>
  </template>
</KCard>

Props

title

String to be used as a title. Can also be slotted.

Card Title

<KCard title="Card Title" />

titleTag

HTML element you want title to be rendered as. Defaults to div.

Accepted values are:

• div
• p
• span
• a
• legend
• h1
• h2
• h3
• h4
• h5
• h6

Card Title H4 Heading

<KCard title-tag="h4" title="Card Title H4 Heading" />

Slots

default

Content of the card.

KCard with only default slot content is a container that neatly envelops your content.

<KCard>
  KCard with only default slot content is a container that neatly envelops your content.
</KCard>

title

Content to be rendered in the title of the card.

Card Title

When you include a title and content in a KCard, it takes on the appearance of a presentable container for conveying information.

<KCard>
  <template #title>
    Card Title
  </template>
  When you include a title and content in a KCard, it takes on the appearance of a presentable container for conveying information.
</KCard>

actions

Located to the right of the card title, the actions slot allows for slotting in any action elements. See the example below.

footer

Bottom drawer of the card. Useful for providing contextual information.

Example of very long card title that should not be truncated with ellipsis and should wrap to the next line even if it is too long

• Props
• Slots

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip excommodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nupariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit aid est laborum.

Published

2 versions

<KCard>
  <template #title>
    Example of very long card title that should not be truncated with ellipsis and should wrap to the next line even if it is too long
  </template>
  <template #actions>
    <KDropdown
      :items="[
        { label: 'Props', to: { path: '/components/card#props' } },
        { label: 'Slots', to: { path: '/components/card#slots' } }
      ]"
    >
      <KButton
        appearance="tertiary"
        icon
        size="small"
      >
        <MoreIcon />
      </KButton>
    </KDropdown>
  </template>
  Lorem ipsum dolor sit amet ...
  <template #footer>
    <KBadge appearance="success">
      Published
    </KBadge>
    <KBadge>2 versions</KBadge>
  </template>
</KCard>