aside

Content tangentially related to the surrounding content. Used for sidebars, pull quotes, and supplementary information boxes.

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

Class Description
.sidebar Raised background panel style for sidebar content
.note Subtle, compact note with muted text for de-emphasized content
.float Floats to the right with max-width of 40% for pull quotes
.sidenote Margin annotation (22ch) that floats alongside text; collapses to bordered block on narrow viewports

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
↑