Aside Element

The aside element has been around for a while but mostly unused.  The dropdown list of element types from Omni CMS's text editor includes aside.  Choose it and as you type all content will be included inside the aside element. To exit the element unselect aside from the dropdown menu.

What is an aside element?

HTML is a markup language, typically as you type on a page the content is put into paragraph elements, there are also headers, images, links, and more.  An aside is just one of those element types, but it makes a difference when you deal with assistive technology. 

This markup and how we associate content to any element type can be used to help assistive technology identify and properly convey meaning to users who may not view the content in a strictly visual way.

The content in an aside will help draw attention to it, but we can't rely that your message is going to be understood by it alone; otherwise, the aside would be the main content.

Best uses for an aside

Related content that is tangentially related to the content around the  aside element, and which could be considered separate from that content. -- W3C

They are great for further explaination about a subject, pull quotes from someone in your content, or collections of resources related to your main content.

What NOT to use an aside for

You don't want to put your main content into the aside.  If the aside was hidden or removed your content should still continue to be understood. 

Asides are also not used for footnotes, parentheticals, or citations that belong with the main content.  As a general rule, ask yourself if the aside was removed, does the information you need to get across still get the same message across to the user.  

Aside Classes

If the aside element is right for you, below are some ways to help make it blend in or stand out on any page.  Motion styles run one time after the aside element is in the users's view.

Asides automatically nest in the right side of your content.  If you want to use one in a standalone section use the class below in the section CSS to allow for a wider format.

• aside-solo - allows the aside to go 100% the width of the section.

Background Colors

Background Gradients

Motion Styles

These styles are specific to aside use.  When placed on the section CSS only the aside will be impacted.