Item card

Preview

Basic

Instance A

t3.micro · us-east-1

Card body content

With icon and footer

web-server-01

t3.micro · us-east-1a · Running

View details

Usage

<cs-item-card>
  <div slot="header">Resource name</div>
  <div slot="description">Resource description</div>
  <div slot="footer">Footer content</div>
  Main body content
</cs-item-card>

Properties

disable-content-paddingsboolean default: false: Removes the default padding from the content area.
disable-footer-paddingsboolean default: false: Removes the default padding from the footer area.
disable-header-paddingsboolean default: false: Removes the default padding from the header area.
full-heightboolean default: false: Makes the item card stretch to fill the full height of its container.
highlightedboolean default: false: Specifies whether the item card is in highlighted state.
metadata-attributesRecord<string, string | undefined>: Specifies metadata for analytics in cards
on-clickMouseEventHandler<HTMLElement>: Called when the user clicks on the item card.
variantItemCardProps.Variant default: 'default': Specifies the visual variant of the item card, which controls the border radius and padding.

default - Uses container-level border radius and padding (larger).

embedded - Uses compact border radius and padding (smaller).

Slots

actions: Actions to display in the item card header area, typically buttons or links.
default: Main content of the item card.
description: A description or subtitle displayed below the header.
footer: Footer content displayed at the bottom of the item card.
header: Heading element of the item card. Use this to add a title or header text.
icon: Icon content displayed next to the header.