aside

Usage

Use the <aside> element for:

• Sidebar navigation or supplementary content
• Pull quotes that highlight key text from an article
• Related links or "See also" sections
• Advertising or promotional content
• Glossary definitions or explanatory boxes

Content in an aside should be related to the surrounding content but not essential to understanding it. The page should make sense if the aside is removed.

For alert-style notifications (warnings, tips, success messages, errors), use <status-message> instead.

Examples

Default

Basic aside without additional styling.

.sidebar

Panel style with background for sidebar layouts.

.note

Subtle note style for minor supplementary information.

.float

Floating aside for pull quotes that flow with text.

.sidenote

Margin annotation that floats alongside text on wide viewports. On narrow viewports, collapses to a bordered inline block. Requires the parent container to have margin space (e.g., inside <layout-text>).

Variants

Accessibility

• Aside creates a complementary landmark that screen readers can navigate to
• Include a heading to label the aside content, especially for longer asides
• Keep aside content concise and focused on a single topic
• Floating asides should use clear: both on following content to prevent layout issues

Related

• <article> - Aside often appears within or alongside articles
• <section> - For thematic grouping (aside is for tangential content)
• <nav> - Often placed within sidebar asides
• <main> - Use main.with-sidebar for layouts with aside