Card
Cards contain content and actions about a single subject.
Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
<x-mbc::card style="width: 300px; padding: 16px;">
<x-mbc::typography variant="h6">Card Title</x-mbc::typography>
<x-mbc::typography variant="body2">
Card content goes here.
</x-mbc::typography>
</x-mbc::card>Basic
The basic card component can be used with minimal setup. You can add content directly or use the card sub-components like mbc::card-header and mbc::card-content for better structure.
Simple Card
This is a simple card with plain content.
<x-mbc::card style="width: 300px; padding: 16px;">
<x-mbc::typography variant="h6">Simple Card</x-mbc::typography>
<x-mbc::typography variant="body2">
This is a simple card with plain content.
</x-mbc::typography>
</x-mbc::card>
<x-mbc::card style="width: 300px;">
<x-mbc::card-header title="Card with Header" subtitle="With subtitle" />
<x-mbc::card-content>
This card uses the card-header and card-content components.
</x-mbc::card-content>
</x-mbc::card>Variants
Cards support two variants: elevated (default) and outlined. The elevated variant has a shadow, while the outlined variant has a border.
<x-mbc::card style="width: 250px;">
<x-mbc::card-header title="Elevated Card" subtitle="Default variant" />
<x-mbc::card-content>
This is an elevated card with shadow.
</x-mbc::card-content>
</x-mbc::card>
<x-mbc::card variant="outlined" style="width: 250px;">
<x-mbc::card-header title="Outlined Card" subtitle="With border" />
<x-mbc::card-content>
This is an outlined card with border.
</x-mbc::card-content>
</x-mbc::card>Card with Media
You can add images to cards using the mbc::card-media component. It supports different aspect ratios through the variant prop.
<x-mbc::card style="width: 300px;">
<x-mbc::card-media src="https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/2.jpg" />
<x-mbc::card-header title="Wide Media" subtitle="16:9 aspect ratio" />
<x-mbc::card-content>
This card has a wide media image.
</x-mbc::card-content>
</x-mbc::card>
<x-mbc::card style="width: 300px;">
<x-mbc::card-media variant="square" src="https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/2.jpg" />
<x-mbc::card-header title="Square Media" subtitle="1:1 aspect ratio" />
<x-mbc::card-content>
This card has a square media image.
</x-mbc::card-content>
</x-mbc::card>Card with Actions
Cards can include action buttons using the mbc::card-actions component. It supports both regular buttons and icon buttons through named slots.
<x-mbc::card style="width: 350px;">
<x-mbc::card-header title="Actions Example" subtitle="With buttons" />
<x-mbc::card-content>
This card demonstrates various action types.
</x-mbc::card-content>
<x-mbc::card-actions>
</x-mbc::card-actions>
</x-mbc::card>Card Primary Action
Use mbc::card-primary-action to make specific areas of the card clickable. This creates an interactive region with ripple effects and proper accessibility attributes.
<!-- Simple clickable card -->
<x-mbc::card style="width: 350px;">
<x-mbc::card-primary-action>
<x-mbc::card-header title="Clickable Card" subtitle="Click anywhere on this area" />
<x-mbc::card-content>
The entire header and content area is clickable and shows a ripple effect when interacted with.
</x-mbc::card-content>
</x-mbc::card-primary-action>
<x-mbc::card-actions>
</x-mbc::card-actions>
</x-mbc::card>
<!-- Clickable card with media -->
<x-mbc::card style="width: 350px;">
<x-mbc::card-primary-action>
<x-mbc::card-media
src="https://picsum.photos/seed/card1/400/200"
variant="wide"
/>
<x-mbc::card-header
title="Media Card"
subtitle="With clickable area"
/>
<x-mbc::card-content>
Click on the image or content to navigate.
</x-mbc::card-content>
</x-mbc::card-primary-action>
<x-mbc::card-actions>
</x-mbc::card-actions>
</x-mbc::card>
<!-- Outlined card with primary action -->
<x-mbc::card variant="outlined" style="width: 350px;">
<x-mbc::card-primary-action>
<x-mbc::card-header
title="Product Card"
subtitle="$29.99"
/>
<x-mbc::card-media
src="https://picsum.photos/seed/card2/400/200"
variant="wide"
/>
<x-mbc::card-content>
Click to view product details and add to cart.
</x-mbc::card-content>
</x-mbc::card-primary-action>
</x-mbc::card>Use Case: Use primary action for cards that navigate to detail pages, like article previews, product listings, or gallery items. Actions outside the primary action area (like icon buttons) remain independently clickable.
Accessibility: The primary action area is keyboard-accessible (tabindex="0") and shows visual feedback through the ripple effect.
Complete Example
Here's a complete example combining all card features: media, header, content, and actions.
Visit ten places on our planet that are undergoing the biggest changes today. Explore the beauty and challenges of our evolving world.
<x-mbc::card style="width: 350px;">
<x-mbc::card-media
src="https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/2.jpg"
/>
<x-mbc::card-header
title="Our Changing Planet"
subtitle="by Kurt Wagner"
/>
<x-mbc::card-content>
<x-mbc::typography variant="body2">
Visit ten places on our planet that are undergoing the biggest
changes today. Explore the beauty and challenges of our evolving world.
</x-mbc::typography>
</x-mbc::card-content>
<x-mbc::card-actions>
</x-mbc::card-actions>
</x-mbc::card>Properties
mbc::card
| Name | Type | Default | Description |
|---|---|---|---|
children
|
string | html
|
|
Required. The content of the card. |
variant
|
'elevated' | 'outlined'
|
elevated
|
The variant to use. |
mbc::card-header
| Name | Type | Default | Description |
|---|---|---|---|
subtitle
|
string
|
|
The subtitle of the card. |
title
|
string
|
|
Required. The title of the card. |
mbc::card-media
| Name | Type | Default | Description |
|---|---|---|---|
src
|
string
|
|
Required. The image source URL. |
variant
|
'square' | 'wide'
|
wide
|
The aspect ratio variant. |
mbc::card-content
| Name | Type | Default | Description |
|---|---|---|---|
children
|
string | html
|
|
Required. The content of the card body. |
mbc::card-actions
| Name | Type | Default | Description |
|---|---|---|---|
buttons
|
slot
|
|
Slot for button actions. |
iconButtons
|
slot
|
|
Slot for icon button actions. |
mbc::card-primary-action
| Name | Type | Default | Description |
|---|---|---|---|
children
|
string | html
|
|
Required. The clickable content area of the card. |