Cards

Cards display content in a bordered box, optionally with a title, icon, and link. They're useful for visually grouping related information or creating navigation tiles.

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>

Steps

Details

The API company.