Callouts
Showing different types of callouts
note
Callout (default)
Copy permalink to “note Callout (default)” - Chrome 105 shipped on August 30, with support for size Container Queries and units.
The note label is wrapped in a strong
tag.
Callouts default to note. If a label isn’t provided, the default label Note: will be shown above the callout content.
warn
Callout
Copy permalink to “warn Callout” The only difference at this time between note and warn callouts are the default labels that appear above the content. For the warn callout, the label will show Warning: above the content. Eventually we may style these differently if we start using the warn callout.
Callout without a note
Copy permalink to “Callout without a note”Check out our Winging It channel for a conversation between designers and developers on intuitive web design.
Winging It episode 3: Intuitive Web Design with OOUX