Callout
Callouts communicate important changes or facts within the body layout through a strong visual emphasis, so that users take notice and read the information.
Usage | Code | Related
On this page
Live Demo
<GoACallout
type="'important || 'information' || 'event' || 'emergency' || 'success'"
title="Callout Title"
content="Information to the user goes in the content"
/>
Angular | React | Vue | Web components
Content
Callout banners should communicate one piece of crucial information pertaining to the topic.
A callout banner must be relevant to the header or section to which it corresponds. In terms of importance within the section, it takes priority over any other paragraph under the header. If there is additional information that is not in the corresponding section, or is on another page, do use a link.
Container Text
At minimum, body text is required. There may be an optional header.
Variants
Each calllout variant has a particular use case and its design communicates it’s function to the user. It is therefore very important that the different variants are implemented consistently across products, so that they communicate consistently.
| Variant | Purpose |
|---|---|
| Information | Information callouts are used to communicate non-urgent information. |
| Event | Event callouts are used to communicate information about upcoming and scheduled events. |
| Important | Important callouts are used to communicate non-emergency but still important messages to a user. |
| Emergency | Emergency callouts are used to alert the user to only the most important pieces of information. They can also be used to alert the user to system errors. |
| Success | Success callouts are used to inform the user of a positive status change to a performed action. |
Positioning
Callout banners should be the full width of the content space they are placed in, with a maximum width of 700px.
Callouts banners have a bottom margin of 28px.
Anatomy
Feedback
Help improve this page. To help make sure that this page is useful, relevant and up to date, you can share your research or feedback on Github or propose a change below using Edit this page on Github.