Card

Cards contain content and actions about a single subject.

Basic

Lizard

Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica.

Learn More

<me-card> <me-card-content> <me-typography variant="h5">Lizard</me-typography> <me-typography variant="body2">...</me-typography> </me-card-content> <me-card-actions> <me-button>Learn More</me-button> <me-button>Share</me-button> </me-card-actions> </me-card>

With Media

Shiba Inu

The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.

Learn More

With Header

This impressive paella is a perfect party dish and a fun meal to cook together with your guests.

Outlined

Word of the Day

be·nev·o·lent

adjective — well meaning and kindly.

Learn More

API — Card

Attribute	Type	Default	Description
`variant`	elevation \| outlined	elevation	Card visual style. `outlined` replaces shadow with a border.
`raised`	boolean	false	Increased elevation shadow.

API — CardHeader

Attribute / Slot	Type	Description
`title`	string	Primary heading text.
`subheader`	string	Secondary heading text.
`slot="avatar"`	element	Avatar element shown on the left.
`slot="action"`	element	Action element shown on the right.
`slot="title"`	element	Overrides the `title` attribute with custom content.
`slot="subheader"`	element	Overrides the `subheader` attribute with custom content.

API — CardMedia

Attribute	Type	Default	Description
`image`	string	—	URL for the background image.
`height`	number \| string	140	Height in px (number) or any CSS value.
`alt`	string	—	Alt text (used when `component="img"`).
`component`	div \| img	div	Root element type. Use `img` for accessible images.

API — CardActions

Attribute	Type	Default	Description
`disable-spacing`	boolean	false	Removes padding and gap between action buttons.