Envisioning App Blocks
CardItemBlock
CardItemBlock
CardItemBlock
CardItemBlock
Object containing the following properties:
| Property | Description | Type | Default |
|---|---|---|---|
block (*) | must be CardItemBlock | 'CardItemBlock' | |
id | string | 'CardItemBlock' | |
root | optional path to the data object. If not provided, context or data passed by parent (usually a grid block) will be used. | string | Record<string, string> | 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:
| |
showFavorite | Whether to show the favorite button | boolean | |
highlight | Whether to highlight according to entities criteria | 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' | 'border' | 'tick' | 'disabled' | 'dimmed' | 'foreground' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | 'accent2' | 'accent2-up' | 'accent2-fg' | ... or use a custom template (external:id). Check the Icons page for more information. | |
extraLabelColor | Extra label text color | 'context', 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'border' | 'tick' | 'disabled' | 'dimmed' | 'foreground' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | 'accent2' | 'accent2-up' | 'accent2-fg' | ... or use a custom template (external:id). Check the Icons page for more information. | |
imageColor | Image color | 'context', 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'border' | 'tick' | 'disabled' | 'dimmed' | 'foreground' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | 'accent2' | 'accent2-up' | 'accent2-fg' | ... or use a custom template (external:id). Check the Icons page for more information. | |
bgColor | Background color | 'context', 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'border' | 'tick' | 'disabled' | 'dimmed' | 'foreground' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | 'accent2' | 'accent2-up' | 'accent2-fg' | ... or use a custom template (external:id). Check the Icons page for more information. | |
bgColorHovered | Background color when hovered | 'context', 'current' | 'transparent' | 'black' | 'white' | 'gray' | 'border' | 'tick' | 'disabled' | 'dimmed' | 'foreground' | 'panel-down' | 'panel' | 'panel-up' | 'panel-plus' | 'accent' | 'accent-up' | 'accent-fg' | 'accent2' | 'accent2-up' | 'accent2-fg' | ... or use a custom template (external:id). Check the Icons page for more information. |
(*) Required.