Card
Material Design 3 card web component (elevated, filled, outlined; optionally interactive).
- 2.4 KB gzipped
- @lit-material/card 0.0.4
- Renders on the server
Example
Card
Elevated, filled, outlined; optionally interactive (renders as a button/link).
Holds its own content and buttons.
Markup
<lit-material-card variant="elevated"> <strong>Card</strong> <p>Holds its own content and buttons.</p> </lit-material-card>
Link / disabled
Renders as a link.
Not clickable.
Install
npm install @lit-material/card @lit-material/tokensimport "@lit-material/card";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-card>
Material Design 3 card.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
variant | variant | CardVariant | "elevated" | |
interactive | interactive | boolean | false | Makes the whole card a single clickable/tappable surface. Implied by setting href. |
disabled | disabled | boolean | false | |
type | type | CardType | "button" | |
name | name | string | "" | |
value | value | string | "" | |
form | form | string | undefined | none | |
href | href | string | "" | If set, renders the card as a link (<a>) instead of a <button>; implies interactive. |
target | target | string | "" |
Slots
| Slot | Description |
|---|---|
| default | The card's content. |
CSS parts
| Part | Description |
|---|---|
card | The <div>, <button>, or <a> surface (background/border/elevation). |
ripple | The state-layer element the hover/press feedback is drawn on. Only rendered when interactive. |
focus-ring | The focus indicator element. Only rendered when interactive. |