Usage
Callouts are text excerpts, used as a visual cue to draw attention to content.
Use callouts to:
- call attention to important pieces of information
- supplement a point in the main text
- supply information that applies in special cases
- link to a relevant resource
When to avoid
Callouts should be used sparingly to maintain effectiveness, consider weaving the information into the introduction or as part of the instructions you're creating.
Do not:
- add multiple callout boxes to a topic. This dilutes the importance of the callout and distracts the user.
- create a callout with content that is not relevant to the user as your reader might then ignore furutre callouts
How this component works
Callouts can contain an icon, a title and a message. Callouts should be short, easy to scan, informative and clear.
This is a callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, arcu sed hendrerit dapibus, arcu magna convallis odio, ac elementum purus tortor in nulla. Nulla condimentum, lacus auctor consectetur cursus, libero quam sodales ipsum, id iaculis nibh tellus eu arcu. Aenean pharetra facilisis ex, a malesuada risus.
This is a callout with a grey background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, arcu sed hendrerit dapibus, arcu magna convallis odio, ac elementum purus tortor in nulla. Nulla condimentum, lacus auctor consectetur cursus, libero quam sodales ipsum, id iaculis nibh tellus eu arcu. Aenean pharetra facilisis ex, a malesuada risus.
This is a callout with a Brand Dark background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, arcu sed hendrerit dapibus, arcu magna convallis odio, ac elementum purus tortor in nulla. Nulla condimentum, lacus auctor consectetur cursus, libero quam sodales ipsum, id iaculis nibh tellus eu arcu. Aenean pharetra facilisis ex, a malesuada risus.
This is a callout with a Brand Light background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, arcu sed hendrerit dapibus, arcu magna convallis odio, ac elementum purus tortor in nulla. Nulla condimentum, lacus auctor consectetur cursus, libero quam sodales ipsum, id iaculis nibh tellus eu arcu. Aenean pharetra facilisis ex, a malesuada risus.