Skip to main

Design System

  • Welcome
  • Colors
  • Typography
  • Spacing

CSS

  • Utilities
  • Compositions

Component Library

  • Aside
  • Audio Player
  • Authors
  • Banners
  • Block quotes
  • Brand
  • Breadcrumbs
  • Browser compatibility table
  • Button
  • Callout
  • Cards
  • Carousel
  • Code blocks
  • Compare
  • Counter
  • Details
  • Eyebrow
  • Floating Action Button
  • Feature Card
  • Figure
  • Fixed width Image
  • Form Fields
  • Headline
  • Hero
  • Hero Image
  • Icon Button
  • Indicator
  • Labels
  • Lists
  • Numbered headers
  • Page Header
  • Pagination
  • Pill
  • Preview Pagination
  • Prose
  • Stack Nav
  • Stats
  • Status List
  • Tables
  • Tabs
  • Generated table of contents
  • Toggle Switch
  • Tooltips

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.

AttentionCautionCodelabGotchasKey termNoteObjectiveSuccessWarning
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>

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

  • Sass File

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>

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.