Action Card
Horizontal announcement and banner card with leading avatar or icon, title + description, and trailing actions, a trailing icon, or a three-dot menu. Four layouts (Default, Simple, Minimal, Action) × three tones (Default, Brand, Warning).
Default Layout — Button Actions
Leading avatar, text block, buttons on a new row, and a three-dot menu in the top-right
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.
<ActionCard Title="We've just released a new update!"
Description="Check out the all new dashboard view."
AvatarInitials="OR">
<Actions>
<Button Variant="primary" Size="sm" Text="Changelog" />
<Button Variant="secondary" Size="sm" Text="Dismiss" />
</Actions>
<MenuContent>
<div class="floating-menu-group">
<button class="floating-menu-item">Archive</button>
</div>
</MenuContent>
</ActionCard>Default Layout — Link Actions
Same structure with text-link buttons instead of solid buttons — use tertiary-color + tertiary variants
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.
<ActionCard Title="We've just released a new update!"
Description="Check out the all new dashboard view."
AvatarInitials="OR">
<Actions>
<Button Variant="tertiary-color" Size="sm" Text="Changelog" />
<Button Variant="tertiary" Size="sm" Text="Dismiss" />
</Actions>
</ActionCard>Simple Layout — Button Actions
No leading avatar — text fills the full width with actions below
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.
<ActionCard Title="We've just released a new update!"
Description="Check out the all new dashboard view."
Layout="ActionCard.CardLayout.Simple">
<Actions>
<Button Variant="primary" Size="sm" Text="Changelog" />
<Button Variant="secondary" Size="sm" Text="Dismiss" />
</Actions>
</ActionCard>Simple Layout — Link Actions
Simple layout with text-link buttons
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.
<ActionCard Title="We've just released a new update!"
Description="Check out the all new dashboard view."
Layout="ActionCard.CardLayout.Simple">
<Actions>
<Button Variant="tertiary-color" Size="sm" Text="Changelog" />
<Button Variant="tertiary" Size="sm" Text="Dismiss" />
</Actions>
</ActionCard>Minimal Layout — Button Actions
Single row — text on the left, actions inline on the right, no avatar, no menu
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.
<ActionCard Title="We've just released a new update!"
Description="Check out the all new dashboard view."
Layout="ActionCard.CardLayout.Minimal">
<Actions>
<Button Variant="primary" Size="sm" Text="Changelog" />
<Button Variant="secondary" Size="sm" Text="Dismiss" />
</Actions>
</ActionCard>Minimal Layout — Link Actions
Minimal layout with inline text links
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.
<ActionCard Title="We've just released a new update!"
Description="Check out the all new dashboard view."
Layout="ActionCard.CardLayout.Minimal">
<Actions>
<Button Variant="tertiary-color" Size="sm" Text="Changelog" />
<Button Variant="tertiary" Size="sm" Text="Dismiss" />
</Actions>
</ActionCard>Action Layout
Leading avatar + text + trailing arrow-circle-right icon, no buttons and no menu. The whole card typically acts as a navigational CTA.
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.
<ActionCard Title="We've just released a new update!"
Description="Check out the all new dashboard view."
Layout="ActionCard.CardLayout.Action"
AvatarInitials="OR" />