Cards

A card groups content and actions about one subject. There are three styles: elevated, filled and outlined. They differ in how much the card stands out from the background, not 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
		variant="elevated"
		headline="Elevated"
		subhead="Subhead"
		{action}
		supportingText="Explain more about the topic shown in the headline and subhead through supporting text."
	></Card>
	<Card
		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
		variant="filled"
		headline="Filled"
		subhead="Subhead"
		{action}
		supportingText="Explain more about the topic shown in the headline and subhead through supporting text."
	></Card>
	<Card
		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
		variant="outlined"
		headline="Outlined"
		subhead="Subhead"
		{action}
		supportingText="Explain more about the topic shown in the headline and subhead through supporting text."
	></Card>
	<Card
		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 an href or an onclick only when the whole card is one target. It then renders an <a> or a <button>. A command or popovertarget also makes it a button. Set type to pin the element yourself.

A card that holds its own buttons and links stays a plain card. Inside a clickable card, a screen reader cannot reach those inner controls, so the props type rejects action together with href, onclick or a type other than text. A disabled clickable card keeps aria-disabled and steps out of the tab order.

The image is decorative by default. When it carries meaning, describe it with imageAlt.

API

AttributeTypeDefaultDescription
type'text' | 'link' | 'button' | 'submit' | 'reset' | nullundefinedPins the element. text renders a <div>, link an <a>, and the native button types a <button> of that type. Left out, the card follows href and onclick.
variant'elevated' | 'filled' | 'outlined''outlined'The variant of the card
disabledbooleanfalseDisables the card
imagestring | undefined | nullundefinedThe path to the image of the card
imageAltstring | undefinedundefinedDescribes the image for assistive technology. Leave it out for a decorative image.
headlinestring | undefined | nullundefinedThe headline of the card
subheadstring | undefined | nullundefinedThe subhead of the card
supportingTextstring | undefined | nullundefinedThe supporting text of the card
actionSnippet | undefinedundefinedThe buttons or links of the card. Only on a plain card.
...attributesHTMLButtonAttributes & HTMLAnchorAttributes & HTMLAttributes<HTMLDivElement>A single, unified set of attributes for the rendered element (div, button or a). Event handlers such as onclick receive event.currentTarget typed as HTMLDivElement | HTMLButtonElement | HTMLAnchorElement.

Bindables

AttributeTypeDescription
elementHTMLElementA reference to the root DOM element of the component, bound with bind:this.