Envisioning App Blocks
CardItemBlock
CardItemBlock
CardItemBlock
CardItemBlock
Object containing the following properties:
| Property | Description | Type | Default |
|---|---|---|---|
block (*) | must be CardItemBlock | 'CardItemBlock' | |
id | string | 'CardItemBlock' | |
objectId | string | ||
mainLabel (*) | The main label of the card item | string | |
extraLabel | The extra label of the card item | Record<string, string> | string | |
imageUrl (*) | The image URL of the card item | string | |
size | The size of the card item | 'xl' | 'lg' | 'md' | 'sm' | |
format | The card format | 'banner' | 'square' | 'horizontal' | 'vertical' | 'responsive' | 'custom' | |
to | Navigation target for the card item | Object with properties:
| |
schemaKey | Schema key for filtering/highlighting logic | string | |
showFavorite | Whether to show the favorite button | boolean | |
contentBlocks | Array of blocks to render in the children slot | Array<string> | |
footerBlocks | Array of blocks to render in the footer slot | Array<string> | |
mainLabelSize | The size of the main label | 'lg' | 'md' | 'sm' | 'xs' | |
extraLabelSize | The size of the extra label | 'mn' | 'xm' | |
variant | The variant of the item title | 'default' | 'labelTop' | 'labelBottom' | |
mainLabelColor | Main label text color | 'context' | 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'background' | 'background-plus' | 'background-dimmed' | 'background-disabled' | 'border' | 'foreground' | 'disabled' | 'dimmed' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | ... | never | |
extraLabelColor | Extra label text color | 'context' | 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'background' | 'background-plus' | 'background-dimmed' | 'background-disabled' | 'border' | 'foreground' | 'disabled' | 'dimmed' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | ... | never | |
imageColor | Image color | 'context' | 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'background' | 'background-plus' | 'background-dimmed' | 'background-disabled' | 'border' | 'foreground' | 'disabled' | 'dimmed' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | ... | never | |
bgColor | Background color | 'context' | 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'background' | 'background-plus' | 'background-dimmed' | 'background-disabled' | 'border' | 'foreground' | 'disabled' | 'dimmed' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | ... | never |
(*) Required.