Aside - Component
The aside pattern allows you to create callouts in the body of an article. All theming of asides is achieved using utility classes.
Code
Source (Nunjucks)
<div class="aside flow {{ data.utilities.main }}">
{% if data.title %}
<p class="cluster {{ data.utilities.title }}">
{% if data.icon %}
<span class="aside__icon box-block {{ data.utilities.icon }}">{% include "icons/" ~ data.icon %}</span>
{% endif %}
<strong>{{ data.title }}</strong>
</p>
{% endif %}
<div class="{{ data.utilities.body }}">{{ data.content | md | safe }}</div>
</div>
Output
<div class="aside flow bg-state-info-bg color-state-info-text">
<div class="">
Use the note aside to provide supplemental information.
<a href="#">A test link</a> for CSS purposes.
</div>
</div>
Information
The aside pattern controls its own space when in a flow context to guarantee there's enough vertical space.
You can style it using theme utility classes and/or token utility classes. These are generally applied to the aside itself, its title, its icon and its body. All of these are optional.
Key links
Variants
Attention
Code
Source (Nunjucks)
<div class="aside flow {{ data.utilities.main }}">
{% if data.title %}
<p class="cluster {{ data.utilities.title }}">
{% if data.icon %}
<span class="aside__icon box-block {{ data.utilities.icon }}">{% include "icons/" ~ data.icon %}</span>
{% endif %}
<strong>{{ data.title }}</strong>
</p>
{% endif %}
<div class="{{ data.utilities.body }}">{{ data.content | md | safe }}</div>
</div>
Output
<div class="aside flow bg-tertiary-box-bg color-tertiary-box-text">
<p class="cluster">
<span class="aside__icon box-block"
><svg
width="24"
height="24"
viewBox="0 0 24 24"
role="img"
aria-label="Lightbulb"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"
/></svg
></span>
<strong>Attention!</strong>
</p>
<div class="">
Use the gotcha aside to indicate a common problem that the reader wouldn't
know without specialized knowledge of the topic.
</div>
</div>
Caution
Code
Source (Nunjucks)
<div class="aside flow {{ data.utilities.main }}">
{% if data.title %}
<p class="cluster {{ data.utilities.title }}">
{% if data.icon %}
<span class="aside__icon box-block {{ data.utilities.icon }}">{% include "icons/" ~ data.icon %}</span>
{% endif %}
<strong>{{ data.title }}</strong>
</p>
{% endif %}
<div class="{{ data.utilities.body }}">{{ data.content | md | safe }}</div>
</div>
Output
<div class="aside flow bg-state-bad-bg color-state-bad-text">
<p class="cluster color-state-bad-text">
<span class="aside__icon box-block"
><svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Error sign"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-2h2v2h-2zm0-10v6h2V7h-2z"
/></svg
></span>
<strong>Caution</strong>
</p>
<div class="">
Use the caution aside to indicate a potential pitfall or complication.
</div>
</div>
Codelab
Code
Source (Nunjucks)
<div class="aside flow {{ data.utilities.main }}">
{% if data.title %}
<p class="cluster {{ data.utilities.title }}">
{% if data.icon %}
<span class="aside__icon box-block {{ data.utilities.icon }}">{% include "icons/" ~ data.icon %}</span>
{% endif %}
<strong>{{ data.title }}</strong>
</p>
{% endif %}
<div class="{{ data.utilities.body }}">{{ data.content | md | safe }}</div>
</div>
Output
<div class="aside flow bg-quaternary-box-bg color-quaternary-box-text">
<p class="cluster">
<span class="aside__icon box-block"
><svg
width="24"
height="24"
viewbox="0 0 24 24"
fill="currentColor"
role="img"
aria-label="Code brackets"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.41 16.59L8 18l-6-6 6-6 1.41 1.41L4.83 12l4.58 4.59zm5.18-9.18L16 6l6 6-6 6-1.41-1.41L19.17 12l-4.58-4.59z"
/></svg
></span>
<strong>Codelab</strong>
</p>
<div class="">Use the codelab aside to link to an associated codelab.</div>
</div>
Gotchas
Code
Source (Nunjucks)
<div class="aside flow {{ data.utilities.main }}">
{% if data.title %}
<p class="cluster {{ data.utilities.title }}">
{% if data.icon %}
<span class="aside__icon box-block {{ data.utilities.icon }}">{% include "icons/" ~ data.icon %}</span>
{% endif %}
<strong>{{ data.title }}</strong>
</p>
{% endif %}
<div class="{{ data.utilities.body }}">{{ data.content | md | safe }}</div>
</div>
Output
<div class="aside flow bg-tertiary-box-bg color-tertiary-box-text">
<p class="cluster">
<span class="aside__icon box-block"
><svg
width="24"
height="24"
viewBox="0 0 24 24"
role="img"
aria-label="Lightbulb"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"
/></svg
></span>
<strong>Gotchas!</strong>
</p>
<div class="">
Use the gotcha aside to indicate a common problem that the reader wouldn't
know without specialized knowledge of the topic.
</div>
</div>
Key term
Code
Source (Nunjucks)
<div class="aside flow {{ data.utilities.main }}">
{% if data.title %}
<p class="cluster {{ data.utilities.title }}">
{% if data.icon %}
<span class="aside__icon box-block {{ data.utilities.icon }}">{% include "icons/" ~ data.icon %}</span>
{% endif %}
<strong>{{ data.title }}</strong>
</p>
{% endif %}
<div class="{{ data.utilities.body }}">{{ data.content | md | safe }}</div>
</div>
Output
<div class="aside flow color-secondary-box-text bg-secondary-box-bg">
<p class="cluster">
<span class="aside__icon box-block"
><svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
role="img"
aria-label="Highlighter pen"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.22 9.49l-5.91 6c-.77.8-.7 2.05.08 2.85L.77 22h5.68l.74-.75c.78.81 1.95.86 2.73.05l5.96-6.05-5.66-5.76zm12.46-4l-2.82-2.87c-.78-.8-2.07-.84-2.84-.04l-5.75 5.85 5.66 5.75 5.69-5.78c.77-.81.83-2.11.06-2.91z"
/></svg
></span>
<strong>Key Term</strong>
</p>
<div class="">
<p>
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, &quot;A portal is…&quot;
</p>
</div>
</div>
Note
Code
Source (Nunjucks)
<div class="aside flow {{ data.utilities.main }}">
{% if data.title %}
<p class="cluster {{ data.utilities.title }}">
{% if data.icon %}
<span class="aside__icon box-block {{ data.utilities.icon }}">{% include "icons/" ~ data.icon %}</span>
{% endif %}
<strong>{{ data.title }}</strong>
</p>
{% endif %}
<div class="{{ data.utilities.body }}">{{ data.content | md | safe }}</div>
</div>
Output
<div class="aside flow bg-state-info-bg color-state-info-text">
<div class="">A note is just a standard aside.</div>
</div>
Objective
Code
Source (Nunjucks)
<div class="aside flow {{ data.utilities.main }}">
{% if data.title %}
<p class="cluster {{ data.utilities.title }}">
{% if data.icon %}
<span class="aside__icon box-block {{ data.utilities.icon }}">{% include "icons/" ~ data.icon %}</span>
{% endif %}
<strong>{{ data.title }}</strong>
</p>
{% endif %}
<div class="{{ data.utilities.body }}">{{ data.content | md | safe }}</div>
</div>
Output
<div class="aside flow bg-state-good-bg color-state-good-text">
<p class="cluster">
<span class="aside__icon box-block"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="24"
width="24"
fill="currentColor"
role="img"
aria-label="Check"
>
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /></svg
></span>
<strong>Objective</strong>
</p>
<div class="">
Use the objective aside to define the goal of a process described in the
body copy.
</div>
</div>
Success
Code
Source (Nunjucks)
<div class="aside flow {{ data.utilities.main }}">
{% if data.title %}
<p class="cluster {{ data.utilities.title }}">
{% if data.icon %}
<span class="aside__icon box-block {{ data.utilities.icon }}">{% include "icons/" ~ data.icon %}</span>
{% endif %}
<strong>{{ data.title }}</strong>
</p>
{% endif %}
<div class="{{ data.utilities.body }}">{{ data.content | md | safe }}</div>
</div>
Output
<div class="aside flow bg-state-good-bg color-state-good-text">
<p class="cluster">
<span class="aside__icon box-block"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="24"
width="24"
fill="currentColor"
role="img"
aria-label="Check"
>
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /></svg
></span>
<strong>Success</strong>
</p>
<div class="">
Use the success aside to describe a successful action or an error-free
status.
</div>
</div>
Warning
Code
Source (Nunjucks)
<div class="aside flow {{ data.utilities.main }}">
{% if data.title %}
<p class="cluster {{ data.utilities.title }}">
{% if data.icon %}
<span class="aside__icon box-block {{ data.utilities.icon }}">{% include "icons/" ~ data.icon %}</span>
{% endif %}
<strong>{{ data.title }}</strong>
</p>
{% endif %}
<div class="{{ data.utilities.body }}">{{ data.content | md | safe }}</div>
</div>
Output
<div class="aside flow bg-state-warn-bg color-core-text">
<p class="cluster">
<span class="aside__icon box-block color-state-warn-text"
><svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
role="img"
aria-label="Warning sign"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M23 21L12 2 1 21h22zm-12-3v-2h2v2h-2zm0-4h2v-4h-2v4z"
/></svg
></span>
<strong>Warning</strong>
</p>
<div class="">
The warning aside is stronger than a caution aside; use it to tell the
reader not to do something.
</div>
</div>