Cards

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

Properties

Prop	Type	Default	Description
`title`	`string`	—	Title shown at the top of the card.
`description`	`string`	—	Short description shown below the title.
`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 Description

Getting Started

<scalar-card
  title="Getting Started"
  description="Learn the basics in five minutes."
  icon="phosphor/regular/rocket-launch">
</scalar-card>

<Card
  title="Getting Started"
  description="Learn the basics in five minutes."
  icon="phosphor/regular/rocket-launch"
/>

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

<scalar-card
  title="Read the Docs"
  description="Full API reference and guides."
  icon="phosphor/regular/book-open"
  href="https://scalar.com">
</scalar-card>

<Card
  title="Read the Docs"
  description="Full API reference and guides."
  icon="phosphor/regular/book-open"
  href="https://scalar.com"
/>

Steps

Details