Cards

A card groups content and actions about one subject. Material 3 gives three styles, elevated, filled and outlined, which differ in how far the card lifts off the background rather than in what it can hold.

Types

<script lang="ts">
	import { Card } from 'noph-ui'
</script>

<div class="cards" style="width:100%;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));">
	<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>
</div>

<style>
	.cards {
		display: grid;
		gap: 0.5rem;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
</style>

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. 
<script lang="ts">
	import { Button, Card } from 'noph-ui'
</script>

{#snippet action()}
	<Button variant="filled">Action</Button>
{/snippet}
<div class="cards">
	<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>
</div>

<style>
	.cards {
		display: grid;
		gap: 0.5rem;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
</style>

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. 
<script lang="ts">
	import { Button, Card } from 'noph-ui'
</script>

{#snippet action()}
	<Button variant="filled">Action</Button>
{/snippet}
<div class="cards">
	<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>
</div>

<style>
	.cards {
		display: grid;
		gap: 0.5rem;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
</style>

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. 
<script lang="ts">
	import { Button, Card } from 'noph-ui'
</script>

{#snippet action()}
	<Button variant="filled">Action</Button>
{/snippet}
<div class="cards">
	<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>
</div>

<style>
	.cards {
		display: grid;
		gap: 0.5rem;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
</style>

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

Accessibility

A plain card is a <div>: it holds content and takes no focus. Give it type="button" or type="link" only when the whole card really is one target, and it renders a <button> or an <a> instead.

A card that only wraps its own buttons and links should stay a plain card. Nesting controls inside a clickable card leaves a screen reader with a target inside a target, and there is no way to reach the inner one. A disabled clickable card keeps aria-disabled and steps out of the tab order.

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 | undefined | nullundefinedThe path to the image of the card
headlinestring | undefined | nullundefinedThe headline of the card
subheadstring | undefined | nullundefinedThe subhead of the card
supportingTextstring | undefined | nullundefinedThe supporting text of the card
actionSnippet | undefinedundefinedThe action of the card
...attributesHTMLButtonAttributes & HTMLAnchorAttributes & HTMLAttributes<HTMLDivElement>A single, unified set of attributes for the element chosen by type (div, button or a). Event handlers such as onclick receive event.currentTarget typed as HTMLDivElement | HTMLButtonElement | HTMLAnchorElement, so you no longer need to set type to get correctly typed events.

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.