Sidebar layout

How to use it

Use for article or detail pages that need a narrower column of related information beside the main content, such as related links or a summary. Do not put essential steps only in the aside, since on phones it appears after the content. The aside width (16rem) and the 640px breakpoint are the values to tune; replace the heading id and the link.

Accessibility

The main content comes first in the source and the <aside> second, so screen readers and keyboard users meet the primary content first and the stacked mobile order matches the reading order; the aside is a complementary landmark named by its heading through aria-labelledby. Layout is CSS grid only and never reorders content visually. Text is #0f172a on #ffffff (17.85:1), aside text #0f172a on #f8fafc (17.06:1) and the aside link #1d4ed8 on #f8fafc (6.41:1).

Source (copy-ready)

Copy code

<div class="dcl-sidebar-layout">
  <div class="dcl-sidebar-layout__main">
    <h2 class="dcl-sidebar-layout__title">Repotting a fiddle-leaf fig</h2>
    <p class="dcl-sidebar-layout__text">Repot in spring, when the roots start circling the bottom of the pot. Choose a pot only 5 cm wider than the old one so the soil dries out evenly between waterings.</p>
    <p class="dcl-sidebar-layout__text">Water lightly for the first two weeks and keep the plant out of direct afternoon sun while the roots settle.</p>
  </div>
  <aside class="dcl-sidebar-layout__aside" aria-labelledby="dcl-sidebar-layout-aside-title">
    <h3 class="dcl-sidebar-layout__aside-title" id="dcl-sidebar-layout-aside-title">At a glance</h3>
    <p class="dcl-sidebar-layout__aside-text">Difficulty: easy. Time: 30 minutes. Best season: spring.</p>
    <a class="dcl-sidebar-layout__link" href="../about.html">More plant guides</a>
  </aside>
</div>
<style>
.dcl-sidebar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 1.5rem; max-width: 56rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-sidebar-layout__main { min-width: 0; }
.dcl-sidebar-layout__title { margin: 0 0 0.5rem; font-size: 1.25rem; color: #0f172a; background-color: #ffffff; }
.dcl-sidebar-layout__text { margin: 0 0 0.75rem; overflow-wrap: anywhere; color: #0f172a; background-color: #ffffff; }
.dcl-sidebar-layout__aside { box-sizing: border-box; min-width: 0; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; color: #0f172a; background-color: #f8fafc; }
.dcl-sidebar-layout__aside-title { margin: 0 0 0.5rem; font-size: 1rem; color: #0f172a; background-color: #f8fafc; }
.dcl-sidebar-layout__aside-text { margin: 0 0 0.75rem; color: #0f172a; background-color: #f8fafc; }
.dcl-sidebar-layout__link { color: #1d4ed8; background-color: #f8fafc; }
.dcl-sidebar-layout__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
@media (max-width: 640px) {
  .dcl-sidebar-layout { grid-template-columns: minmax(0, 1fr); }
}
</style>