Media Card
A general-purpose content card with cover media (full-bleed image, centered block, or avatar), title/description text, optional action buttons in stacked or horizontal layout, and an optional three-dot menu. Three sizes available: Small, Default, and Large.
Default — Full Cover — Stacked Actions
Full-bleed cover image with vertically stacked action buttons
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
New team members added
3 new members have joined your workspace this week.
<MediaCard Title="We've just released a new update!"
Description="Check out the all new dashboard view."
ImageSrc="/images/cover.jpg"
Cover="MediaCard.CardCover.Full"
ActionLayout="MediaCard.CardActionLayout.Stack">
<Actions>
<Button Variant="primary" Size="sm" Text="Changelog" />
<Button Variant="secondary" Size="sm" Text="Dismiss" />
</Actions>
</MediaCard>Default — Full Cover — Horizontal Actions
Same full-bleed cover with side-by-side action buttons
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
<MediaCard Title="We've just released a new update!"
Description="Check out the all new dashboard view."
ImageSrc="/images/cover.jpg"
Cover="MediaCard.CardCover.Full"
ActionLayout="MediaCard.CardActionLayout.Horizontal">
<Actions>
<Button Variant="primary" Size="sm" Text="Changelog" />
<Button Variant="secondary" Size="sm" Text="Dismiss" />
</Actions>
</MediaCard>Default — Center Block Cover
Centered image block within a gray background; image does not bleed edge-to-edge
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
<MediaCard Title="We've just released a new update!"
Description="Check out the all new dashboard view."
ImageSrc="/images/cover.jpg"
Cover="MediaCard.CardCover.Center"
ActionLayout="MediaCard.CardActionLayout.Stack">
<Actions>
<Button Variant="primary" Size="sm" Text="Changelog" />
<Button Variant="secondary" Size="sm" Text="Dismiss" />
</Actions>
</MediaCard>Avatar Style
Circular avatar replaces the cover image; Center cover uses a rounded-square shape
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
<MediaCard Title="We've just released a new update!"
Description="Check out the all new dashboard view."
ImageSrc="/images/avatar.jpg"
Style="MediaCard.CardStyle.Avatar"
Cover="MediaCard.CardCover.Full"
ActionLayout="MediaCard.CardActionLayout.Stack">
<Actions>
<Button Variant="primary" Size="sm" Text="Changelog" />
<Button Variant="secondary" Size="sm" Text="Dismiss" />
</Actions>
</MediaCard>Small Size
Most compact variant for sidebars, dense grids, and secondary content areas
New update released
Check out the all new dashboard view. Pages load faster.
New update released
Check out the all new dashboard view. Pages load faster.
New update released
Check out the all new dashboard view. Pages load faster.
<MediaCard Title="New update released"
Description="Check out the all new dashboard view."
ImageSrc="/images/cover.jpg"
Size="MediaCard.CardSize.Small"
Cover="MediaCard.CardCover.Full"
ActionLayout="MediaCard.CardActionLayout.Stack">
<Actions>
<Button Variant="primary" Size="xs" Text="Changelog" />
<Button Variant="secondary" Size="xs" Text="Dismiss" />
</Actions>
</MediaCard>Large Size
Larger cover, padding, and typography for hero placements and feature highlights
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
<MediaCard Title="We've just released a new update!"
Description="Check out the all new dashboard view."
ImageSrc="/images/cover.jpg"
Size="MediaCard.CardSize.Large"
Cover="MediaCard.CardCover.Full"
ActionLayout="MediaCard.CardActionLayout.Stack">
<Actions>
<Button Variant="primary" Size="sm" Text="Changelog" />
<Button Variant="secondary" Size="sm" Text="Dismiss" />
</Actions>
</MediaCard>With Three-Dot Menu
ShowMenu=true with a MenuContent slot adds a floating menu in the top-right corner
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
<MediaCard Title="We've just released a new update!"
Description="Check out the all new dashboard view."
ImageSrc="/images/cover.jpg"
Cover="MediaCard.CardCover.Full"
ShowMenu="true"
ActionLayout="MediaCard.CardActionLayout.Horizontal">
<MenuContent>
<div class="floating-menu-group">
<button class="floating-menu-item">Edit</button>
<button class="floating-menu-item">Share</button>
</div>
<div class="floating-menu-group">
<button class="floating-menu-item floating-menu-item--danger">Delete</button>
</div>
</MenuContent>
<Actions>
<Button Variant="primary" Size="sm" Text="Changelog" />
<Button Variant="secondary" Size="sm" Text="Dismiss" />
</Actions>
</MediaCard>Without Actions
Actions area hidden when ShowActions is false or no Actions slot is provided
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
We've just released a new update!
Check out the all new dashboard view. Pages now load faster.
<MediaCard Title="We've just released a new update!"
Description="Check out the all new dashboard view."
ImageSrc="/images/cover.jpg"
Cover="MediaCard.CardCover.Full"
ShowActions="false" />