Icon
Message Text
Dismiss Control
Default
Hero
Full width
Info: Use to give a non-critical or general information or instruction.
Confirm: Use to indicate a successful, completed, or desirable state when it’s important to provide positive reinforcement to the user.
Warning: Use to provide status updates that the user should watch. A warning message may require the user’s attention and potential action.
Alert: Use to communicate an error, decline, failure, removal or critical state that requires user attention.
Default: The width of the message card will grow to fit the content until it reaches a width of 600px.
Full width: The message card expands to fill the available width.
Message card may contain a single navigation link. This can be used to direct the user to additional resources or to another area of the application.
Do
Don't
The "Dismissible" property gives the user the ability to remove the message card. When the message card is removed, the other elements and parent container should adjust to fill the space. Message cards should be dismissible unless they contain critical information or an important step users need to take.
Do
Keep the information in message cards brief and to-the-point--one or two short sentences maximum in most cases. Include a single navigation link if necessary. For links to the help center, write them as “Learn more about [topic]”
Use sentence case. Only include a period if there is more than one sentence.
See Error Handling for warning and alert message guidelines.
Do
Don't
Cards: UI-Component Definition https://www.nngroup.com/articles/cards-component/
