Cards group related content and actions about a single subject. This library ships all
three M3 card types — elevated, filled, and outlined — as one component, switching between
a <div> and an <a> depending on whether href is set.
The Card component implements the Material Design 3 Cards pattern. type selects the visual treatment (elevated /
filled / outlined); everything else about the card's contents — title, media, actions — is
left entirely to whatever you render inside children,
matching M3's guidance that cards are a container, not a fixed template.
Setting href turns the card into a link: it renders an <a> instead of a <div>, and hoverable defaults to true so the click target gets a state-layer/elevation
hover response for free. This library's own docs pages dogfood non-link cards throughout — see
the Accessibility section below on any docs page for an example.
import { Card } from '@noxlovette/material'; See it live, with Controls, in Storybook rather than a hand-rolled preview here.
Playground
Open the Card story — includes Types and Hoverable Link variants.
A static filled card:
<script lang="ts">
import { Card } from '@noxlovette/material';
</script>
<Card type="elevated">
<h3>Card title</h3>
<p>Supporting text.</p>
</Card> A clickable card, rendered as a link:
<Card href="/details" type="outlined"> <h3>Go to details</h3> </Card>
| Prop | Type | Default | Description |
|---|---|---|---|
children required | Snippet | — | The card's content. |
type | "elevated" | "filled" | "outlined" | "filled" | Visual style — elevated uses a shadow, filled a solid surface-container color, outlined a boundary line. |
padding | "none" | "sm" | "md" | "lg" | "md" | Internal padding of the card. |
href | string | — | If provided, the card renders as an <a> instead of a <div>, making the whole card a link. |
hoverable | boolean | !!href | Whether to show a state layer and elevated shadow on hover. Defaults to true whenever href is set, false otherwise. |
Focus ring
Cards receive a visible focus:outline in the secondary color, matching keyboard-navigation expectations for interactive (href) cards.
Native link semantics
Link cards render a real <a href> element rather than a div with a click handler, so they are reachable and operable via keyboard and assistive tech by default.