MoreLesson 192Free preview
Callout
This lesson is part of How To · All levels
Summary
A callout is a highlight box used to draw attention to important information, such as tips, warnings, or additional notes. Usually the callout has a soft background color, thick edge lines on one side, and icons. These components help the reader to separate key information from the regular text without having to make it too prominent.
Key points
- Use thick left-border to give a strong yet simple visual accent
- Choose a soft background color and make sure the text contrast remains accessible
- Distinguish the type of callout (info, success, warning) through color and icon
- Hide the decorative icon from the screen reader with aria-hidden='true'
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.