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!)
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.
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.)
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).
sets left accent border width
sets accent border 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.