card
Overview
card
is most typically a stand-alone component that displays content about a single topic.
To link cards to queries and objects, use object-repeat
.
Alternatively, use the list
UI component.
Basic Example
Standard Attributes
content
content
Optional
Type: string
(static text, a format string or the return value of a JS/TS function)
Default: unset
Shorthand supported? true
Text that is displayed in the content position of the card
.
Example: Shorthand syntax
Example: Longhand syntax
footer
footer
Optional
Type: string
(static text, a format string or the return value of a JS/TS function)
Default: unset
Shorthand supported? true
Text that is displayed in the footer position of the card
.
Example: Shorthand syntax
Example: Longhand syntax
header
header
Optional
Type: string
(static text, a format string or the return value of a JS/TS function)
Default: unset
Shorthand supported? true
Text that is displayed in the header position of the list-item
.
Example: Shorthand syntax
Example: Longhand syntax
Advanced Attributes
align-content
align-content
icon
icon
A shorthand attribute. See action
> icon
icon-color
icon-color
Optional
Type: string
- can be a named color or #HEX value
Default: unset
Specify the color of the icon
.
icon-position
icon-position
on-press
on-press
A shorthand attribute. See action
> on-press
show-if
and hide-if
show-if
and hide-if
validate
validate
A shorthand attribute. See action
> validate
Last updated