Cards
To lay cards out side by side, wrap them in a Grid, which arranges its children in columns.
Properties#
| Prop | Type | Default | Description |
|---|---|---|---|
title |
string |
— | Title shown at the top of the card. |
icon |
string |
— | Icon shown alongside the title. Accepts a built-in icon key (Phosphor or Simple Icons) or a custom URL. |
iconPosition |
'title' 'left' 'above' |
title |
Where the icon is placed relative to the card content. |
href |
string |
— | When set, the entire card becomes a link. |
target |
'_blank' '_self' |
— | Where the link opens. _blank adds rel="noopener noreferrer" automatically. |
Examples#
Body Only#
Card with body content.
<scalar-card>
Card with body content.
</scalar-card><Card>
Card with body content.
</Card>Title and Body#
The Title of the Card
Card with title and body.
<scalar-card title="The Title of the Card">
Card with title and body.
</scalar-card><Card title="The Title of the Card">
Card with title and body.
</Card>Title, Icon, and Body#
Getting Started
Learn the basics in five minutes.
<scalar-card
title="Getting Started"
icon="phosphor/regular/rocket-launch">
Learn the basics in five minutes.
</scalar-card><Card
title="Getting Started"
icon="phosphor/regular/rocket-launch">
Learn the basics in five minutes.
</Card>Icon on the Left#
Left Icon
The icon sits to the left of the content.
<scalar-card
title="Left Icon"
icon="phosphor/regular/sparkle"
iconPosition="left">
The icon sits to the left of the content.
</scalar-card><Card
title="Left Icon"
icon="phosphor/regular/sparkle"
iconPosition="left">
The icon sits to the left of the content.
</Card>Clickable Card#
Read the Docs
Full API reference and guides.
<scalar-card
title="Read the Docs"
icon="phosphor/regular/book-open"
href="https://scalar.com">
Full API reference and guides.
</scalar-card><Card
title="Read the Docs"
icon="phosphor/regular/book-open"
href="https://scalar.com">
Full API reference and guides.
</Card>