Skip to main content

CnItemCard

Compact card for displaying an item in a sidebar list. Provides a header (icon + title + optional actions) and a flexible content area. Designed for use in sidebar lists such as schema listings, source listings, etc.

Props

PropTypeDefaultDescription
titleString''Card title
subtitleString''Optional subtitle below the title
iconObject | FunctionnullIcon component (e.g., imported MDI icon)
iconSizeNumber20Icon size in pixels

Events

EventPayloadDescription
clickeventCard clicked

Slots

SlotDescription
#iconCustom icon content (replaces the icon prop)
#actionsAction buttons in the card header (right side)
defaultCard body content below the header

Usage

Basic

<CnItemCard title="My Schema" :icon="FileCodeOutline">
<p>Schema content here</p>
</CnItemCard>

With actions and stats

<CnItemCard title="My Schema" :icon="FileCodeOutline" subtitle="v1.0">
<template #actions>
<NcActions>
<NcActionButton @click="edit">Edit</NcActionButton>
</NcActions>
</template>
<CnKpiGrid :columns="2">
<CnStatsBlock title="Objects" :count="42" />
<CnStatsBlock title="Size" :count="0" :breakdown="{ size: '1.2 MB' }" />
</CnKpiGrid>
</CnItemCard>