Card

Cards display content inside a bordered box, optionally with a title and icon. They are useful for visually grouping related text or UI elements.

Properties Copied

title Copied

string optional
Adds a title to the top of the card.

icon Copied

string optional
Displays an icon in the title area. Uses the Scalar icon format. If both title and icon are provided, the icon appears before the title.

leftIcon Copied

string optional
Displays a large icon to the left of the card content.

Examples Copied

Card with Body Only Copied

<scalar-card>

Card with body.
<scalar-card>

:::scalar-card
card with body.
:::

Card with Title and Body Copied

<scalar-card title="The Title of the Card">

Card with title and body.
</scalar-card>

:::scalar-card{title="The Title of the Card"}
Card with title and body.
:::

Card with Icon and Body Copied

<scalar-card icon="solid/basic-shape-hexagon">

Card with icon and body.
</scalar-card>

:::scalar-card{icon="solid/basic-shape-hexagon"}
Card with icon and body.
:::

Card with Left-Icon, Title and Body Copied

<scalar-card leftIcon="solid/basic-shape-hexagon" title="The Title of the Card">

Card with a `leftIcon`, title, and body
</scalar-card>

:::scalar-card{ leftIcon="solid/basic-shape-hexagon" title="The Title of the Card"}
Card with a `leftIcon`, title, and body
:::

Card with Title Copied

<scalar-card title="Without Body"></scalar-card>

::scalar-card{title="Without Body"}