Envisioning App Blocks
ListItemBlock
ListItemBlock
ListItemBlock
ListItemBlock
Object containing the following properties:
| Property | Description | Type | Default |
|---|---|---|---|
block (*) | must be ListItemBlock | 'ListItemBlock' | |
id | string | 'ListItemBlock' | |
root | 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 the thumbnail image URL | string | |
size | The size of the card item | 'xl' | 'lg' | 'md' | 'sm' | |
iconName | The name of the icon. Works as fallback if no image is provided | 'arrowLeft' | 'arrowRight' | 'arrowUpRight' | 'arrowDown' | 'blocks' | 'blend' | 'box' | 'cancel' | 'copyMarkdownEv' | 'circleBlocksEv' | 'chevronDown' | 'download' | 'draftingCompass' | 'chevronLeft' | 'chevronRight' | 'chevronsLeftRight' | 'circleCheck' | 'circleHelp' | 'circleX' | 'circleXEv' | ... or use a custom template (external:id). Check the Icons page for more information. | |
iconSize | The size of the icon | number | |
iconColor | The color of the icon | '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. or | |
thumbColor | The thumbnail bg | '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. or | |
highlight | Whether to highlight according to entities criteria | boolean | |
to | Navigation target for the card item | Object with properties:
string | |
favoriteColor | The color of the favorite button | '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. or | |
flagColor | The color of the flag | '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. or | |
showFavorite | Whether to show the favorite button | boolean | |
mainLabelSize | The size of the main label | 'lg' | 'md' | 'sm' | 'xs' | |
mainLabelColor | The color of the main label | '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. or | |
extraLabelSize | The size of the extra label | 'mn' | 'xm' | |
extraLabelColor | The color of the extra label | '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. or | |
bgColor | The color of the background | '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. or | |
bgColorHovered | The color of the background when hovered | '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. or | |
variant | The variant of the item title | 'default' | 'labelTop' | 'labelBottom' |
(*) Required.