Component: Aside
Aside
Summary
The aside is an element of the body component and offers an elegant way to present supplementary content without disrupting the main narrative.
The aside element is used to display information that enhances or supports the primary content, such as related links, callouts, or additional context. It helps keep the main content focused while still providing users with valuable, non-essential details. When used effectively, aside improves readability and engagement, but it should not contain critical information necessary for understanding the main content. Proper styling and accessibility considerations ensure that it remains a helpful, non-intrusive addition to a webpage.
What's an Aside?
An aside is an area used to display supplementary content related to the main content on a page. Typically placed on the right side of the layout, it helps highlight important information without disrupting the primary reading flow. Asides often contain:
- Key highlights or summaries
- Related links and resources
- Contact information
- Calls to action (CTAs)
- Notifications or alerts
The design system defines its width, spacing, and vertical rule that separates it from the main content.
Example of an Aside
This is where the main content goes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
When to Use and When to Avoid
When to Use
Use an aside when you need to provide supporting or secondary information that enhances the main content but is not essential for users to complete their primary task. Ideal use cases include:
- Summarizing key takeaways from long-form content.
- Providing additional resources, guides, or links for further exploration.
- Displaying important contact details, such as support emails.
- Showcasing related content, like FAQs or recommended articles.
- Highlighting important announcements or alerts that are relevant to the page.
When to Avoid
Avoid using an aside when the content is critical to the user’s understanding or task completion. If the information is essential, it should be part of the main content instead. Avoid asides when:
- The content is too important to be skipped.
- It creates visual clutter or overwhelms users.
- There is limited space, such as on mobile screens, where key information might be lost.
- The information could be better integrated into the main content flow.
Things to Consider
These best practices, asides can enhance usability without disrupting the user experience.
- Hierarchy & Placement: ensure the aside does not compete with or overshadow the main content.
- Responsiveness: on mobile, asides may shift below the main content or be hidden entirely to prioritize space.
- Accessibility: users relying on screen readers should be able to easily identify and navigate to the aside content.
- Relevance: keep aside content concise and directly related to the main topic; avoid unnecessary distractions.