Aside

Secondary contextual area.

html

<div class="aside-demo aside-demo--right">
  <article class="aside-demo__main">
    <h4 class="aside-demo__title">Article</h4>
    <p>The primary content column keeps reading focus while a secondary area sits alongside it.</p>
    <p>It carries context that supports the main text without interrupting it.</p>
  </article>
  <aside class="aside-demo__aside" style="width:180px;border-color:#BFD9F2;">
    <h4 class="aside-demo__aside-title" style="color:#BFD9F2;">Related reading</h4>
    <p class="aside-demo__aside-body">Three short links kept visually apart from the main flow of the article.</p>
  </aside>
</div>
<style>
.aside-demo { display: flex; gap: 16px; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; }
.aside-demo--left { flex-direction: row-reverse; }
.aside-demo__main { flex: 1; min-width: 0; }
.aside-demo__title { margin: 0 0 8px; font-size: 16px; }
.aside-demo__main p { margin: 0 0 8px; color: #241430cc; }
.aside-demo__aside { flex: none; box-sizing: border-box; border-left: 2px solid; padding: 4px 0 4px 14px; }
.aside-demo--left .aside-demo__aside { border-left: none; border-right: 2px solid; padding: 4px 14px 4px 0; }
.aside-demo__aside-title { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.aside-demo__aside-body { margin: 0; font-size: 13px; color: #241430cc; }
</style>

tailwind

<div class="flex gap-4 font-sans text-sm text-[#241430] bg-[#FAF7F2] p-4 aside-tw aside-tw--right">
  <article class="flex-1 min-w-0">
    <h4 class="m-0 mb-2 text-base">Article</h4>
    <p class="m-0 mb-2 text-[#241430]/80">The primary content column keeps reading focus while a secondary area sits alongside it.</p>
    <p class="m-0 text-[#241430]/80">It carries context that supports the main text without interrupting it.</p>
  </article>
  <aside class="flex-none box-border border-l-2 pl-3.5 py-1" style="width:180px;border-color:#BFD9F2;">
    <h4 class="m-0 mb-1.5 text-[13px] uppercase tracking-wide" style="color:#BFD9F2;">Related reading</h4>
    <p class="m-0 text-[13px] text-[#241430]/80">Three short links kept visually apart from the main flow of the article.</p>
  </aside>
</div>
<style>
.aside-tw--left { flex-direction: row-reverse; }
.aside-tw--left aside { border-left: none; border-right: 2px solid; padding-left: 0; padding-right: 14px; }
</style>

react

export function Aside({
  heading = "Related reading",
  body = "Three short links kept visually apart from the main flow of the article.",
  side = "right",
  width = 180,
  accent = "#BFD9F2",
}) {
  const isLeft = side === "left";
  return (
    <div style={{ display: "flex", flexDirection: isLeft ? "row-reverse" : "row", gap: 16, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2", padding: 16 }}>
      <article style={{ flex: 1, minWidth: 0 }}>
        <h4 style={{ margin: "0 0 8px", fontSize: 16 }}>Article</h4>
        <p style={{ margin: "0 0 8px", color: "#241430cc" }}>The primary content column keeps reading focus while a secondary area sits alongside it.</p>
        <p style={{ margin: 0, color: "#241430cc" }}>It carries context that supports the main text without interrupting it.</p>
      </article>
      <aside style={{ flex: "none", boxSizing: "border-box", width, borderLeft: isLeft ? "none" : `2px solid ${accent}`, borderRight: isLeft ? `2px solid ${accent}` : "none", padding: isLeft ? "4px 14px 4px 0" : "4px 0 4px 14px" }}>
        <h4 style={{ margin: "0 0 6px", fontSize: 13, textTransform: "uppercase", letterSpacing: ".04em", color: accent }}>{heading}</h4>
        <p style={{ margin: 0, fontSize: 13, color: "#241430cc" }}>{body}</p>
      </aside>
    </div>
  );
}