Aside / Pull Quote
Asides present supplementary content that relates to a specific passage in the main text. They float alongside the body content on desktop and linearize to full width on mobile.
Use asides inside Prose content for extended commentary, historical context, or regulatory background that enriches the main text without being essential to understanding it.
When to use
- Providing historical context or background that enriches a specific passage — "The FDIC was created in 1933 in response to thousands of bank failures during the Great Depression."
- Highlighting a related policy, regulation, or definition — The aside supports but doesn't replace the main text, giving readers deeper context without derailing the narrative.
- Pulling out a key quote or statistic that deserves visual emphasis — A notable figure or finding that relates directly to the passage it sits beside.
When not to use
- Don't use an aside for short tips or warnings — That's a callout. Asides are for longer supplementary content (a paragraph or more).
- Don't use an aside for content the reader must see — If it's required reading, put it in the body text. Asides can be skipped.
- Don't use more than one aside per page section — Multiple floating elements create layout collisions and visual clutter.
- Don't use an aside as a sidebar navigation element — It's for content, not for links or menus.
Examples
Best practices
Place the aside near the paragraph it relates to
Proximity creates the visual and semantic connection between the aside and its context.
Put asides at the top or bottom of a page as general context
Use a lead paragraph or callout for page-level introductions and disclaimers.
Keep asides to 1-2 short paragraphs
Brief supplementary content works best in a floated 40%-width container.
Put lengthy multi-paragraph content in an aside
If it needs that much space, it should be a full section with its own heading.
Use asides for content that enriches without duplicating
The aside should add new perspective — historical context, a related statistic, or a regulatory reference.
Repeat information from the main text in an aside
The aside should add new perspective, not echo what's already been said.
Content guidelines
The aside should feel like a natural extension of the document, not a jarring interruption.
The 2008 financial crisis led to the largest number of bank failures since the savings and loan crisis of the 1980s, reinforcing the importance of deposit insurance reform.
FUN FACT: Did you know that 465 banks failed between 2008 and 2012?
A reader who notices the aside first should understand it on its own.
The FDIC's Deposit Insurance Fund (DIF) maintained a reserve ratio of 1.38% as of Q4 2025, above the statutory minimum of 1.35%.
This ratio exceeded the minimum described above.
Accessibility
- The
<aside>element is an ARIA landmark — screen reader users can navigate to it directly from the page's landmark list. - Give each aside a descriptive
aria-labelthat tells screen reader users what the supplementary content is about — for example,aria-label="Historical context on deposit insurance". - On small screens and in print, the aside linearizes to full width — content authors should ensure the aside reads well in both floated and stacked layouts.