Usage
An info card is a persistent message that sits inline and explains the state of the content around it. Use it to say why something is missing, why an action didn’t work, what a setting will do, or that a change has taken effect.
- Use to explain why content on the screen failed to load, is incomplete, or is unavailable.
- Use to explain why an action didn’t finish, or can’t be taken right now.
- Use when the message needs to stay visible while the person reads it or works around it.
- Use to confirm an action the person just took (use a snackbar).
- Use for an issue that affects the whole screen (use a banner).
- Use for a decision that must be made before continuing (use a dialog).
- Use to validate a single input (use the field’s own inline error).
- Use for promotional or educational content (use a CFR or promo card, info cards are for state, not marketing).
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 |
|---|---|---|
| Type Variant | Warning | Error | Info | Success | Neutral | Warning |
| Show title Boolean | true | false | true |
| Show link Boolean | true | false | true |
Types
Warning
Use when the operation partly worked or is degraded, and the screen is still usable.
Error
Use when the operation failed or the content isn’t there, and the person can’t get what they came for until it’s resolved.
Info
Use when the person needs to register the message before carrying on.
Success
Use when an operation completes successfully and confirmation is useful to the person.
Neutral
Use for supporting or contextual information that doesn’t need semantic emphasis. Neutral is also a good choice when multiple info cards appear on the same screen.
Behavior and interaction
Behavior
- The card is persistent and non-dismissible. It stays until the condition that produced it is no longer true, and it has no close affordance.
- The card is not a container for actions. Its only interactive element is the optional link.
- It is non-blocking. Content around it stays interactive.
- It is inline, so it scrolls away with the section it belongs to.
Positioning
- Place the card next to the content it explains: above an empty list, below the settings row it qualifies, or inside the dialog whose action failed.
- The card fills the width it is given. On large screens, constrain the surrounding content column rather than the card.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Aug 8, 2026 |
1.0.0 |
Initial draft of guidance |