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!
::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
:::
::
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.
- 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
::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"
---
::
Shared Props
This component also includes the shared props listed below:
backgroundColor
- default isinitial
border
- default isvar(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea)
borderRadius
- default isvar(--kui-border-radius-50, 10px)
color
- default isvar(--kui-color-text, initial)
margin
- default isvar(--kui-space-0, 0)
padding
- default isvar(--kui-space-90, 32px)
maxWidth
- default isauto
textAlign
- default isleft
width
- default is100%'
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.
footer
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.