Usage
A promo card promotes a Firefox feature. It sits inline in the flow of content and asks for attention without taking over the screen. Use it to introduce something new, or to point people to a feature they haven’t tried yet.
- Use to introduce a feature after it ships, when the person can act on it right away.
- Pair one clear benefit with one link that goes straight to the feature.
- Drop the link when the person is already where the feature lives.
- Give the card a close control, unless the surface removes it another way.
Usage comparison
|
Component |
Interruption |
Blocking |
Placement |
Best for… |
|---|---|---|---|---|
|
Snackbar |
Low |
No |
Floating: Bottom of screen, floating over content |
Lightweight, transient feedback after an action (save, undo, upload started, error retry, etc) |
|
Info card |
Low-medium |
No |
Inline: adjacent to the content it describes |
Persistent explanation of a state, scoped to a section or a screen |
|
Promo card |
Low-medium |
No |
Inline: in the content flow |
Promoting a Firefox feature someone hasn’t tried yet; optional and safe to dismiss |
|
Banner |
Medium |
No |
Inline: Top of content, below top app bar, inline with content |
Important, cross-screen or app-level issues needing attention + actions |
|
Dialog |
High |
Yes |
Blocking: Centered overlay taking focus |
Urgent, high-risk, or destructive decisions; anything that must be acknowledged now |
Design properties
| Property | Values | Default |
|---|---|---|
| Show title Boolean | true | false | true |
| Show link Boolean | true | false | true |
| Illustration Variant | Off | Default | Large | Off |
| Show close icon Variant | True | False | True |
Types
Illustration: Off
Text only. Use when the feature has no illustration of its own, when several cards appear in the same session, or when the copy needs the full width.
Illustration: Default
A small illustration on the trailing edge. The default choice for a feature that already has artwork. It adds warmth without crowding the copy.
Illustration: Large
A wider illustration on the trailing edge. Use for a headline feature you want to land, and check the title still reads on one line at the narrowest supported width. This large illustration slot also supports animation.
Behavior and interaction
Behavior
- The card appears with the surface it lives on. It isn’t triggered by something the person just did.
- It is non-blocking and non-modal. Everything around it stays interactive.
- It is inline, so it scrolls away with the content.
- Tapping the link opens the feature. Deep link where possible rather than dropping people on a page to hunt from.
- Tapping the close icon removes the card immediately, with no confirmation.
- The card body is not tappable. Only the link and the close icon are.
Positioning
- Place the card in the content flow, spanning the content width.
- Show one promo card at a time. Promo cards don’t stack.
- On large screens, constrain the surrounding content column rather than the card.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Aug 21, 2026 |
1.0.0 |
Initial draft of guidance |