CnObjectCard
Schema-driven card for displaying an object's key information. Uses schema configuration to determine which fields to show as title, description, image, and metadata.
Wraps: NcCheckboxRadioSwitch, CnCellRenderer
Try it
Loading CnObjectCard playground…

Props
| Prop | Type | Default | Description |
|---|---|---|---|
object | Object | (required) | Object data |
schema | Object | (required) | Schema with properties and configuration |
selected | Boolean | false | Selection state |
selectable | Boolean | false | Show selection checkbox |
maxMetadata | Number | 4 | Max metadata fields shown |
Schema Configuration Keys
The schema's configuration object controls card layout:
| Key | Description |
|---|---|
objectNameField | Field used as card title |
objectDescriptionField | Field used as description text |
objectImageField | Field containing image URL |
objectSummaryField | Field used as summary |
Events
| Event | Payload | Description |
|---|---|---|
click | object | Card clicked. When selectable is false this is the primary navigation event. When selectable is true a deliberate click emits select (a text-selection drag is not treated as a click); for backwards compatibility click is also emitted (with a console.warn deprecation notice) if a @click listener is present — migrate selectable consumers to @select. |
select | object | Selection toggled — emitted by the checkbox, and (when selectable) by a deliberate click anywhere on the card body. |
Slots
| Slot | Scope | Description |
|---|---|---|
#badges | \{ object \} | Badge section |
#actions | \{ object \} | Actions section |
#metadata | \{ object, fields \} | Metadata section override |
Usage
<CnObjectCard
:object="contact"
:schema="contactSchema"
:selectable="true"
@click="onCardClick"
@select="onSelect" />
Reference (auto-generated)
The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnObjectCard.vue and update automatically whenever the component changes.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
object | object | ✓ | — | The object data |
schema | object | ✓ | — | Schema definition with properties and configuration |
selected | boolean | false | Whether this card is selected | |
selectable | boolean | false | Whether to show selection checkbox | |
maxMetadata | number | 4 | Maximum number of metadata fields to show |
Events
| Name | Payload | Description |
|---|---|---|
select | — | Emitted when the card toggles selection (clicking the body of a selectable card, or its checkbox). |
click | — | Emitted when a non-selectable card is clicked. Selectable cards emit select; they also emit click (deprecated) when a click listener is present, so migrate selectable consumers to @select. |
Slots
| Name | Bindings | Description |
|---|---|---|
badges | object | |
metadata | object, fields | |
actions | object |