Overview

An aside is a helpful block element intended to contain content that’s less important than or tangential to the content around it. Instead of popping out, it tends to blend in.

When using asides, try to stick only to the @normal priority. While other priorities will work, they probably won’t look the way you’d like. (And, after all, a high-priority aside isn’t an aside!)

Considerations

Thinking in terms of priority — Asides can often be replaced with cards when used to communicate some kind of important alert or update. You can think of an aside as a less disruptive card: helpful for when you don’t want the content to stick out, but unhelpful when you do.

Content — Inside a .content selector, <blockquote> elements are automatically styled as @neutral .asides.

Semantic structure — It’s recommended to use the .aside selector with the <aside> HTML5 element. It’s not required, but generally results in more semantic markup.

Variants

Asides have full tone support. They also support priorities, but if you’re changing the priority of an aside, you probably should use another element. (Aside probably isn’t semantically appropriate.)

Example code

<aside class="aside ~neutral mb-4">
    <p><strong>Hey there!</strong> This is an aside. There's so much you can do in it. It's very exciting. This doesn't need to be text, by the way &mdash; it
    could be anything!</p>
</aside>

<aside class="aside ~positive mb-4">
    <p><strong>Hey there!</strong> This is an aside. There's so much you can do in it. It's very exciting. This doesn't need to be text, by the way &mdash; it
    could be anything!</p>
</aside>

<aside class="aside ~warning mb-4">
    <p><strong>Hey there!</strong> This is an aside. There's so much you can do in it. It's very exciting. This doesn't need to be text, by the way &mdash; it
    could be anything!</p>
</aside>

<aside class="aside ~critical mb-4">
    <p><strong>Hey there!</strong> This is an aside. There's so much you can do in it. It's very exciting. This doesn't need to be text, by the way &mdash; it
    could be anything!</p>
</aside>

<aside class="aside ~info mb-4">
    <p><strong>Hey there!</strong> This is an aside. There's so much you can do in it. It's very exciting. This doesn't need to be text, by the way &mdash; it
    could be anything!</p>
</aside>

<aside class="aside ~urge mb-4">
    <p><strong>Hey there!</strong> This is an aside. There's so much you can do in it. It's very exciting. This doesn't need to be text, by the way &mdash; it
    could be anything!</p>
</aside>

Accessibility

Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.

Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!

Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).

Examples

This is a content block.

This is a blockquote. Notice how it's styled as an aside!

This is some more content.

Example code

<div class="content ~neutral">
    <p>This is a content block.</p>
    <blockquote>
        <p>This is a blockquote. Notice how it's styled as an aside!</p>
    </blockquote>
    <p>This is some more content.</p>
</div>

Example code

<aside class="aside ~info @low mb-4">
    <p>This is a low-priority info aside. <b>Lorem ipsum dolor sit amet.</b></p>
</aside>
<aside class="aside ~positive @low mb-4">
    <p>This is a positive aside. <b>This is perhaps what you want.</b></p>
</aside>
<aside class="aside ~info @high mb-4">
    <p>This is a high-priority info aside. <b>In most cases, you probably don't want this &mdash; use some kind of card instead.</b></p>
</aside>