Components

Card

A Card component that displays content and actions, typically used to organize related information visually.

Usage

The Card component is used to display content in a card with a title, body, actions, and footer.

The Card component is commonly used to present related information, such as product details or summaries, in a compact and easily digestible format. It is often used inside a MultiColumn component to create a structured and visually balanced layout.

Look at this!

Look at this!

New!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
::card
---
background-color: "#fff"
border: "1px solid #e0e4ea"
border-radius: "10px"
color: "#333"
title: "Look at this!"
title-tag: "h2"
title-color: "#333"
title-font-size: "20px"
title-font-weight: "700"
title-line-height: "28px"
padding: "32px"
width: "500px"
image: "https://i.imgur.com/rU6cP5h.jpeg"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

#actions
  :::badge
  ---
  appearance: "success"
  ---
  New!
  :::

#footer
  :::button
  Read more
  :::
::
Card Component Props

The background color of the component. Accepts string | null.

The border of the element. Accepts string | null.

The border radius of the element. Accepts string | null.

The text color of the element. Accepts string.

Text to display as a card title. Accepts string.

The HTML tag to use for the title.

The title text color. Will utilize the `color` prop value if not set.

Set the font size of the title text.

Set the font weight of the title text.

Set the line-height of the title text.

The padding of the component. Accepts string | null.

The width of the element. Accepts string | null.

Adds image to the card. Accepts string with image source URL.

Props

title

Text to display as the card title, rendered in a heading element. If the title slot is provided, the slot content takes precedence.

  • Type: string
  • Default: ''

titleTag

The HTML tag to use for the title.

  • Type: string
  • Default: h2

titleColor

The title text color.

  • Type: string
  • Default: undefined

titleFontSize

The font size of the title text.

  • Type: string
  • Default: 20px

titleFontWeight

The font weight of the title text.

  • Type: string
  • Default: 700

titleLineHeight

The line-height of the title text.

  • Type: string
  • Default: 28px

truncateTitle

A boolean that determines whether the card title should be truncated.

When set to true, the title will be truncated to 2 lines.

  • Type: boolean
  • Default: true

taglineColor

The tagline text color.

  • Type: string
  • Default: undefined

image

Optionally include an image above or below the card content.

The image prop accepts string set to the URL of the image source.

When passing an image URL string, the imagePosition will default to top and the image's alt attribute will default to the value provided to the card's title prop.

When the image slot is used, the image.src and image.alt attributes are not applied to the slotted image, so you will need to add those manually in the slot content.

Use the image prop if you need to place an image on top, bottom, left or right of the card's content area. Use the backgroundImage prop instead if you need a background image for the entire Card.
  • Type: string
  • Default: undefined

imagePosition

Specifies the positioning of the image within the content area of the card.

  • Type: 'top' | 'bottom' | 'left' | 'right'
  • Default: 'top'
Coffee API

Coffee API

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
::card
---
image: "https://i.imgur.com/rU6cP5h.jpeg"
image-position: "top"
background-color: "#fff"
border: "1px solid #e0e4ea"
border-radius: "10px"
color: "#333"
margin: "0"
padding: "32px"
title: "Coffee API"
title-tag: "h2"
---
::
Card Component Props

Adds image to the card. Accepts string with image source URL.

The image position, one of 'top' | 'bottom' | 'left' | 'right'.

Shared Props

This component also includes the shared props listed below:

  • backgroundColor - default is initial
  • border - default is var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea)
  • borderRadius - default is var(--kui-border-radius-50, 10px)
  • color - default is var(--kui-color-text, initial)
  • margin - default is var(--kui-space-0, 0)
  • padding - default is var(--kui-space-90, 32px)
  • maxWidth - default is auto
  • textAlign - default is left
  • width - default is 100%'
  • styles - default is ''

See here for more information on shared props.

Slots

tagline

Use the tagline slot to add content above the Card title.

title

Use the title slot to add content to the Card title. When the slot content is provided, it takes precedence over the title prop.

default

Use the default slot to add the main content between the title and footer of the card.

actions

Optionally utilize the actions slot to add content to the top-right corner of the card.

Optionally use the footer slot to add content to the bottom of the card, typically for links or buttons.

image

Optionally use the image slot to add image to the Card component.