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.

View full screen
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>

Variants

Attention

View full screen
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

View full screen
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

View full screen
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

View full screen
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

View full screen
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

View full screen
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

View full screen
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

View full screen
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

View full screen
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>