Aside

A block element for tangential content


  • Display

    Inline Flex

  • Selectors

    .aside
  • Source

    GitHub ↗

  • Features

    Tones

<aside class='aside ~info'>
  <strong>Hello world!</strong> This is what an aside looks like.
</aside>

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 .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">
    <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 critical aside. <b>You probably don't want this, but... maybe you do?</b></p>
</aside>
<aside class="aside ~positive !normal mb-4">
    <p>This is a normal-priority positive aside. <b>This is probably 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 a card instead.</b></p>
</aside>

Customization

Name Type Default Description
--aside-border-width size 3px sets left accent border width
--color-muted color sets accent border color
--color-content color sets the background color

You can also customize this element by simply overriding any of its CSS attributes, listed here. Contextual variable defaults (e.g., --color-content) and global variables (e.g., --family-primary) are defined here.