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

TokenDefault value
--np-elevated-card-container-shape--np-shape-corner-medium
--np-elevated-card-container-color--np-color-surface-container-low

Filled card tokens

TokenDefault value
--np-filled-card-container-shape--np-shape-corner-medium
--np-filled-card-container-color--np-color-surface-container-highest

Outlined card tokens

TokenDefault value
--np-outlined-card-container-shape--np-shape-corner-medium
--np-outlined-card-container-color--np-color-surface

API

AttributeTypeDefaultDescription
type'text' | 'link' | 'button'The type of the card
variant'elevated' | 'filled' | 'outlined''outlined'The variant of the card
disabledbooleanfalseDisables the card
imagestring | undefinedundefinedThe path to the image of the card
headlinestring | undefinedundefinedThe headline of the card
subheadstring | undefinedundefinedThe subhead of the card
supportingTextstring | undefinedundefinedThe supporting text of the card
actionSnippet | undefinedundefinedThe action of the card
...attributesHTMLButtonAttributes | HTMLAnchorAttributes | HTMLAttributes<HTMLDivElement>HTMLButtonAttributes for type = button, HTMLAttributes<HTMLDivElement> for type = text, and HTMLAnchorAttributes for type = link.

Bindables

AttributeTypeDescription
elementHTMLElementA 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.