Cards

Types

<Card
	type="button"
	variant="elevated"
	headline="Elevated"
	supportingText="Explain more about the topic shown in the headline and subhead through supporting text."
	image="/pollock.avif"
></Card>
<Card
	type="button"
	variant="filled"
	headline="Filled Card"
	supportingText="Explain more about the topic shown in the headline and subhead through supporting text."
	image="/pollock2.avif"
></Card>
<Card
	type="button"
	variant="outlined"
	headline="Outlined Card"
	supportingText="Explain more about the topic shown in the headline and subhead through supporting text."
	image="/pollock3.avif"
></Card>

Elevated card

Elevated Subhead Explain more about the topic shown in the headline and subhead through supporting text.

Elevated Disabled Subhead Explain more about the topic shown in the headline and subhead through supporting text.

{#snippet action()}
	<Button variant="filled">Action</Button>
{/snippet}
<Card
  type="text"
  variant="elevated"
  headline="Elevated"
  subhead="Subhead"
  {action}
  supportingText="Explain more about the topic shown in the headline and subhead through supporting text."
></Card>
<Card
  type="text"
  variant="elevated"
  disabled
  headline="Elevated Disabled"
  subhead="Subhead"
  {action}
  supportingText="Explain more about the topic shown in the headline and subhead through supporting text."
></Card>

Filled card

Filled Subhead Explain more about the topic shown in the headline and subhead through supporting text.

Filled Disabled Subhead Explain more about the topic shown in the headline and subhead through supporting text.

{#snippet action()}
	<Button variant="filled">Action</Button>
{/snippet}
<Card
  type="text"
  variant="filled"
  headline="Filled"
  subhead="Subhead"
  {action}
  supportingText="Explain more about the topic shown in the headline and subhead through supporting text."
></Card>
<Card
  type="text"
  variant="filled"
  disabled
  headline="Filled Disabled"
  subhead="Subhead"
  {action}
  supportingText="Explain more about the topic shown in the headline and subhead through supporting text."
></Card>

Outlined card

Outlined Subhead Explain more about the topic shown in the headline and subhead through supporting text.

Outlined Disabled Subhead Explain more about the topic shown in the headline and subhead through supporting text.

{#snippet action()}
	<Button variant="filled">Action</Button>
{/snippet}
<Card
  type="text"
  variant="outlined"
  headline="Outlined"
  subhead="Subhead"
  {action}
  supportingText="Explain more about the topic shown in the headline and subhead through supporting text."
></Card>
<Card
  type="text"
  variant="outlined"
  disabled
  headline="Outlined Disabled"
  subhead="Subhead"
  {action}
  supportingText="Explain more about the topic shown in the headline and subhead through supporting text."
></Card>

Theming

Elevated card tokens

Token	Default value
`--np-elevated-card-container-shape`	`--np-shape-corner-medium`
`--np-elevated-card-container-color`	`--np-color-surface-container-low`

Filled card tokens

Token	Default value
`--np-filled-card-container-shape`	`--np-shape-corner-medium`
`--np-filled-card-container-color`	`--np-color-surface-container-highest`

Outlined card tokens

Token	Default value
`--np-outlined-card-container-shape`	`--np-shape-corner-medium`
`--np-outlined-card-container-color`	`--np-color-surface`

API

Attribute	Type	Default	Description
`type`	`'text' \| 'link' \| 'button'`		The type of the card
`variant`	`'elevated' \| 'filled' \| 'outlined'`	`'outlined'`	The variant of the card
`disabled`	`boolean`	`false`	Disables the card
`image`	`string \| undefined \| null`	`undefined`	The path to the image of the card
`headline`	`string \| undefined \| null`	`undefined`	The headline of the card
`subhead`	`string \| undefined \| null`	`undefined`	The subhead of the card
`supportingText`	`string \| undefined \| null`	`undefined`	The supporting text of the card
`action`	`Snippet \| undefined`	`undefined`	The action of the card
`...attributes`	`HTMLButtonAttributes \| HTMLAnchorAttributes \| HTMLAttributes<HTMLDivElement>`		`HTMLButtonAttributes` for type = `button`, `HTMLAttributes<HTMLDivElement>` for type = `text`, and `HTMLAnchorAttributes` for type = `link`.

Bindables

Attribute	Type	Description
`element`	`HTMLElement`	A reference to the root DOM element of the component. This variable is bound using `bind:this`, allowing direct access to the underlying HTML element for manipulation or querying within the component's logic.