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>

Celebration

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 128 128"
        style="enable-background: new 0 0 128 128"
        xml:space="preserve"
      >
        <path
          d="M7.5 123.3c2.2 2.4 11.6-1.9 19-5.3C32 115.4 54 106.3 65 101.6c3-1.2 7.3-2.9 10.4-7 2.8-3.6 10-19-4.6-34.7-15-16-30.4-11.5-36.2-7.5A28.5 28.5 0 0 0 27.3 63c-5.2 11.6-12.7 32.9-15.7 41.3-2.3 6.1-6.4 16.5-4.1 19z"
          fill="currentColor"
        ></path>
        <path
          d="M18 86.8s.7 6.5 6.1 14.6c6.3 9.6 15 11.2 15 11.2l-5.8 2.4s-6.5-2-12.7-10.4c-3.8-5.3-5-11.6-5-11.6l2.3-6.2zm-5.6 15.4s1.5 5.6 4.7 9.7c3.8 5 8.6 6.5 8.6 6.5l-4.5 2s-3.3-.8-7-5.5c-2.9-3.5-3.7-7.6-3.7-7.6l1.9-5.1z"
          fill="currentColor"
        ></path>
        <path
          d="M10 116.4c-.2-.5-.2-1 0-1.4l25.4-53 4.2 16-26.8 38.7c-.7 1-2.3 1-2.8-.2z"
          style="opacity: 0.44"
          fill="currentColor"
        ></path>
        <path
          d="M41.6 83.2c12 14 25.5 12.2 30 8.6 4.5-3.5 8.1-15.6-3.7-29.3C55.3 48.2 41.3 52.2 38 55.3s-7.4 15.1 3.5 27.9z"
          style="fill: var(--color-state-good-bg)"
        ></path>
        <path
          d="M82.5 89c-4.3-3.7-6.6-3-9.7-1.8a26 26 0 0 1-18.9 0l2.6-6.2c5 1.7 8.7 1 12-1 4-2.4 9.6-5.6 18.3 1.6 3.6 3 7.3 5.1 10 4.2 2-.7 3-3.6 3.6-6l.2-1.3c.4-3.7 1.2-11.6 7.1-15.7 6.4-4.3 13-4.3 13-4.3l1.2 12c-3-.5-5.2.1-7 1-6.7 3.8-.8 18.2-11.3 23-10.1 4.8-18.4-3.3-21-5.6zM45.4 73.7l-4.3-3.9c8-8.9 5.8-15.4 4.3-20.2A26.4 26.4 0 0 1 44 38.8c-3-3.8-4.4-7.8-4.5-8-1.9-5.7-.5-11.2 2.8-16.4C48.7 4 60.5 4 60.5 4l4 10.5c-3-.1-12.8 0-15.8 4.8-3.8 6-1.3 9.6-1.2 10 .8-1 1.5-1.7 2.2-2.3 4.8-4.2 9-4.8 11.6-4.6a11 11 0 0 1 7.6 4.2c2 2.7 3 6.2 2.3 9.4a11 11 0 0 1-5.8 7.4 16 16 0 0 1-13 1.5v.3l.6 2c1.8 5.4 5 14.1-7.6 26.5zm7.4-37.5c.5.4 1.1.8 1.8 1 2 .8 4.4.6 7-.8 1.5-.9 1.7-1.7 1.7-2 .2-.9 0-2-.7-2.8a2.8 2.8 0 0 0-2-1.2c-1.6-.2-3.6.8-5.6 2.6-1 .9-1.7 2-2.3 3.2zm10 39.1-6.2-.1s3-16.7 12.5-19.5c1.8-.5 3.7-1 5.7-1.3l4-.8c.1-1.6-.5-3.6-1.3-5.9-.6-1.7-1.2-3.5-1.5-5.5-.6-3.9.4-7.3 3-9.6 3-2.9 7.9-3.8 13.4-2.5 3.2.7 5.5 2.2 7.6 3.6 2.9 2 4.6 3 8.2.5 4.3-2.9-1.4-14.3-4.4-21l11.3-4.6c1.5 3.3 8.8 20.3 4 30a11.5 11.5 0 0 1-8.1 6.2c-8 1.8-12.6-1.3-16-3.6-1.6-1-3-1.9-4.6-2.3-10.6-3 4.2 12.6-2.7 19.6-4.2 4.2-14.4 5.3-15 5.5-6.6 1.6-10 11.3-10 11.3z"
          fill="currentColor"
        ></path>
        <path
          d="M44 38.8c-.2 2.2-.3 3.5.3 6.4 2.7 2 8.7 2 8.7 2l-.6-2v-.3c-6.1-3-8.4-6.1-8.4-6.1zm-12.5 9.8-10.3-5 5.1-7.5 8.2 5.4zm-15.2-14A26 26 0 0 1 5 28.9l5.2-6c1.6 1.2 5 3.5 7.2 3.8l-1.1 7.9zM25.6 21.3 18 18.8a18 18 0 0 0 .7-8.3l7.9-1.3c.6 4 .3 8.2-1 12zM73 15.3l7.9-1.7L83 23.9l-7.8 1.7zM92.5 17.8 87 12c2.8-2.8 3.5-6.3 3.5-6.4L98.4 7c-.1.6-1.1 6.3-6 10.9zM95.5 48.6l7-2.2 2.3 7.7-7 2.1zM97.5 113l-7.9-1c.3-2.7-1.8-6.2-2.4-7l6.4-4.8c.5.6 4.7 6.4 4 12.8zM120.4 102.9c-3-.5-6-.6-9.1-.5l-.3-8c3.5-.2 7 0 10.6.6l-1.2 7.9zM109.6 113.9l5.6-5.7 7.8 7.6-5.6 5.7zM93.1 63.3 99 70l-6.6 5.8-5.8-6.6z"
          fill="currentColor"
        ></path>
      </svg>
    </span>
    <strong>Celebration</strong>
  </p>
  <div class="">
    Use the celebration aside to celebrate events like a cross-browser launch.
  </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>

Update

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-update-bg color-state-update-text">
  <p class="cluster">
    <span class="aside__icon box-block"
      ><svg viewBox="0 0 18 19" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M8 5.5V10.5L12.25 13.02L13.02 11.74L9.5 9.65V5.5H8ZM18 7.5V0.5L15.36 3.14C13.74 1.51 11.49 0.5 9 0.5C4.03 0.5 0 4.53 0 9.5C0 14.47 4.03 18.5 9 18.5C13.97 18.5 18 14.47 18 9.5H16C16 13.36 12.86 16.5 9 16.5C5.14 16.5 2 13.36 2 9.5C2 5.64 5.14 2.5 9 2.5C10.93 2.5 12.68 3.29 13.95 4.55L11 7.5H18Z"
          fill="currentColor"
        />
      </svg>
    </span>
    <strong>Update</strong>
  </p>
  <div class="">
    Use the update aside in select cases where updates concerning a developing
    situation around a certain API or metric can be effectively communicated.
  </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>