Overview
A callout is a piece of text from an article that has been taken out and used as a visual aid to help show a reader where important information is located.
Callouts are sometimes referred to as "pull quotes" or "highlighted text." In our Design System callouts can also be used as a visual clue to help direct a user's attention to important pieces of information. Our design system also uses a modified callout style for quotes and dates.
Default callout
Title of the callout
Description of the callout. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Leo, ac ipsum consequat, enim consequat viverra ut eu feugiat. Sed vitae scelerisque aliquet mauris malesuada.
Title of the callout
Description of the callout. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Leo, ac ipsum consequat, enim consequat viverra ut eu feugiat. Sed vitae scelerisque aliquet mauris malesuada.
Title of the callout
Description of the callout. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Leo, ac ipsum consequat, enim consequat viverra ut eu feugiat. Sed vitae scelerisque aliquet mauris malesuada.
Title of the callout
Description of the callout. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Leo, ac ipsum consequat, enim consequat viverra ut eu feugiat. Sed vitae scelerisque aliquet mauris malesuada.
Title of the callout
Description of the callout. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Leo, ac ipsum consequat, enim consequat viverra ut eu feugiat. Sed vitae scelerisque aliquet mauris malesuada.
Date callout
Use a calendar callout to alert a user to important dates and events.
A calendar callout has:
- introduction text (optional)
- date
- date name.
Title of the callout
The next public holiday is:
Star Wars Day
Title of the callout
The next public holiday is:
Star Wars Day
Title of the callout
The next public holiday is:
Star Wars Day
Title of the callout
The next public holiday is:
Star Wars Day
Title of the callout
The next public holiday is:
Star Wars Day
Quote callout
Use the quote callout component for block quotations of longer than about 30 words.
A quote callout component has:
- quote text
- reference (for cited quotations only).
"It is possible to commit no mistakes and still lose. That is not weakness, that is life."
"It is possible to commit no mistakes and still lose. That is not weakness, that is life."
"It is possible to commit no mistakes and still lose. That is not weakness, that is life."
"It is possible to commit no mistakes and still lose. That is not weakness, that is life."
"It is possible to commit no mistakes and still lose. That is not weakness, that is life."