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 | undefined | The path to the image of the card |
headline | string | undefined | undefined | The headline of the card |
subhead | string | undefined | undefined | The subhead of the card |
supportingText | string | undefined | 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. |