A card component with support for title, content, and footer sections.
Basic Usage
Card Title
This is the main content of the card. It can contain any HTML elements.
Card footer
Code
<m-card>
<div slot="title">Card Title</div>
<p>This is the main content of the card. It can contain any HTML elements.</p>
<div slot="footer">Card footer</div>
</m-card>Outline Variant
Outline Card
This card has an outline variant with a border instead of a background.
Footer information
Code
<m-card data-variant="outline">
<div slot="title">Outline Card</div>
<p>This card has an outline variant with a border instead of a background.</p>
<div slot="footer">Footer information</div>
</m-card>Without Title Or Footer
This card has no title or footer, just content.
Code
<m-card>
<p>This card has no title or footer, just content.</p>
</m-card>Subgrid Layout
Card 1
Short content.
Footer
Card 2 with Longer Title
This card has more content that spans multiple lines to demonstrate how subgrid keeps the footers aligned.
Footer
Card 3
Medium amount of content here.
Footer
Code
<div class="collection">
<m-card data-subgrid="true">
<div slot="title">Card 1</div>
<p>Short content.</p>
<div slot="footer">Footer</div>
</m-card>
<m-card data-subgrid="true">
<div slot="title">Card 2 with Longer Title</div>
<p>This card has more content that spans multiple lines to demonstrate how subgrid keeps the footers aligned.</p>
<div slot="footer">Footer</div>
</m-card>
<m-card data-subgrid="true">
<div slot="title">Card 3</div>
<p>Medium amount of content here.</p>
<div slot="footer">Footer</div>
</m-card>
</div>Custom Styling
Styled Card
This card has custom rounding and padding applied.
Code
<m-card data-rounded="true" data-padded="true">
<div slot="title">Styled Card</div>
<p>This card has custom rounding and padding applied.</p>
</m-card>Clickable Cards
Clickable Card
Click anywhere on this card to navigate to the card component page.
Read more →
Code
<m-card href="/components/card">
<div slot="title">Clickable Card</div>
<p>Click anywhere on this card to navigate to the card component page.</p>
<div slot="footer">Read more →</div>
</m-card>Clickable Card With Target
External Link
This card opens in a new tab when clicked.
Visit site →
Code
<m-card href="https://example.com" target="_blank">
<div slot="title">External Link</div>
<p>This card opens in a new tab when clicked.</p>
<div slot="footer">Visit site →</div>
</m-card>- subgrid boolean false
- Whether the card uses CSS subgrid layout
- href string ""
- URL for clickable card
- target string ""
- Link target attribute
- render void
- (default)
- Default slot for card content
- title
- Optional slot for card title
- footer
- Optional slot for card footer