Pattern library

Aside

The default type of an aside is a 'note'.
View full screen

Details

Source (Nunjucks)

<div class="w-aside w-aside--{{ data.type if data.type else 'note' }}">
<p>{% if data.title %}<strong>{{ data.title }}</strong>: {% endif %}{{ data.content | safe }}</p>
</div>

Output

<div class="w-aside w-aside--note">
<p>Use the note aside to provide supplemental information.</p>
</div>

Variants

Caution

View full screen

Details

Source

<div class="w-aside w-aside--{{ data.type if data.type else 'note' }}">
<p>{% if data.title %}<strong>{{ data.title }}</strong>: {% endif %}{{ data.content | safe }}</p>
</div>

Output
<div class="w-aside w-aside--caution">
<p><strong>Caution</strong>: Use the caution aside to indicate a potential pitfall or complication.</p>
</div>

Codelab

View full screen

Details

Source

<div class="w-aside w-aside--{{ data.type if data.type else 'note' }}">
<p>{% if data.title %}<strong>{{ data.title }}</strong>: {% endif %}{{ data.content | safe }}</p>
</div>

Output
<div class="w-aside w-aside--codelab">
<p><strong>Try it!</strong>: Use the codelab aside to link to an associated codelab.</p>
</div>

Gotchas

View full screen

Details

Source

<div class="w-aside w-aside--{{ data.type if data.type else 'note' }}">
<p>{% if data.title %}<strong>{{ data.title }}</strong>: {% endif %}{{ data.content | safe }}</p>
</div>

Output
<div class="w-aside w-aside--gotchas">
<p><strong>Gotchas!</strong>: Use the gotcha aside to indicate a common problem that the reader wouldn't know without specialized knowledge of the topic.</p>
</div>

Key term

View full screen

Details

Source

<div class="w-aside w-aside--{{ data.type if data.type else 'note' }}">
<p>{% if data.title %}<strong>{{ data.title }}</strong>: {% endif %}{{ data.content | safe }}</p>
</div>

Output
<div class="w-aside w-aside--key-term">
<p><strong>Key Term</strong>: Use the key-term aside to define a term that's essential to understanding an idea in the body copy. Key-term asides should be a single sentence that includes the term in italics. For example, "A portal is…"</p>
</div>

Objective

View full screen

Details

Source

<div class="w-aside w-aside--{{ data.type if data.type else 'note' }}">
<p>{% if data.title %}<strong>{{ data.title }}</strong>: {% endif %}{{ data.content | safe }}</p>
</div>

Output
<div class="w-aside w-aside--objective">
<p><strong>Objective</strong>: Use the objective aside to define the goal of a process described in the body copy.</p>
</div>

Success

View full screen

Details

Source

<div class="w-aside w-aside--{{ data.type if data.type else 'note' }}">
<p>{% if data.title %}<strong>{{ data.title }}</strong>: {% endif %}{{ data.content | safe }}</p>
</div>

Output
<div class="w-aside w-aside--success">
<p><strong>Success</strong>: Use the success aside to describe a successful action or an error-free status.</p>
</div>

Warning

View full screen

Details

Source

<div class="w-aside w-aside--{{ data.type if data.type else 'note' }}">
<p>{% if data.title %}<strong>{{ data.title }}</strong>: {% endif %}{{ data.content | safe }}</p>
</div>

Output
<div class="w-aside w-aside--warning">
<p><strong>Warning</strong>: The warning aside is stronger than a caution aside; use it to tell the reader not to do something.</p>
</div>