Guidance
Use callouts to highlight information, excerpts or examples within content. Callouts should be used to draw attention to information that is noteworthy, featured or helpful, but not critical to the user or their tasks. For critical information, use an alert instead.
There are two callout component types:
- Inline callout: Used to highlight information, excerpts or examples inline within a section or subsection.
- In-page callout: Used to highlight information, excerpts or examples as its own section or subsection within a page.
Do
- Keep it short and aim for no more than 280 characters.
- Use headings that follow your page hierarchy.
- Pull excerpts from larger pieces of content.
Don’t
- Use a callout as a substitute for an alert.
- Overuse callouts (it will make them less effective).
- Put large blocks of content in a callout.
Inline callout
Sit amet, consectetur adipiscing elit. Nulla accumsan erat vitae, vestibulum lorem.
HTML
<div class="gnb-callout-inline">
<p>
Sit amet, consectetur adipiscing elit. Nulla accumsan erat vitae, vestibulum lorem.
</p>
</div>
Inline callout with icon
HTML
<div class="gnb-callout-inline-icon">
<p>
Sit amet, consectetur adipiscing elit. Nulla accumsan erat vitae, vestibulum lorem.
</p>
</div>
In-page callout
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem. Nulla scelerisque orci nulla, quis ultrices lectus mollis et.
HTML
<div class="gnb-callout">
<h3>Lorem ipsum dolor</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem. Nulla scelerisque orci nulla, quis ultrices lectus mollis et.
</p>
</div>
In-page callout with icon
HTML
<div class="gnb-callout-icon">
<h3>Lorem ipsum dolor</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem. Nulla scelerisque orci nulla, quis ultrices lectus mollis et.
</p>
</div>