aside

Complementary content.

html

<div class="aside-demo">
  <p class="aside-demo__main">Main article text flows here, continuing for several paragraphs while this complementary note sits to the side.</p>
  <aside class="aside aside--sidebar" style="--accent:#D9C8F0;">
    <p class="aside__label">Aside</p>
    <h3 class="aside__heading">Related reading</h3>
    <p class="aside__body">Three more pieces on the same topic, tangential to the main text but worth a look.</p>
  </aside>
</div>
<style>
.aside-demo { display: flex; gap: 20px; width: 460px; font: 15px/1.55 system-ui, sans-serif; color: #241430; }
.aside-demo__main { flex: 1 1 auto; margin: 0; color: #241430aa; }
.aside { flex: 0 0 180px; background: #FAF7F2; padding: 16px 18px; border-radius: 10px; }
.aside--sidebar { border-left: 4px solid var(--accent); }
.aside--pullquote { border: none; background: transparent; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); font-style: italic; }
.aside__label { margin: 0 0 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.aside__heading { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.aside__body { margin: 0; font-size: 13px; color: #241430cc; }
</style>

tailwind

<div class="flex gap-5 w-[460px] font-sans text-[15px] leading-relaxed text-[#241430]">
  <p class="flex-1 m-0 text-[#241430]/65">Main article text flows here, continuing for several paragraphs while this complementary note sits to the side.</p>
  <aside class="aside-tw aside-tw--sidebar flex-none w-[180px] bg-[#FAF7F2] px-[18px] py-4 rounded-[10px]" style="--accent:#D9C8F0;">
    <p class="m-0 mb-1.5 text-[10px] font-bold tracking-widest uppercase" style="color:#D9C8F0">Aside</p>
    <h3 class="m-0 mb-1.5 text-[15px] font-bold">Related reading</h3>
    <p class="m-0 text-[13px] text-[#241430]/80">Three more pieces on the same topic, tangential to the main text but worth a look.</p>
  </aside>
</div>
<style>
.aside-tw--sidebar { border-left: 4px solid var(--accent); }
.aside-tw--pullquote { border: none; background: transparent; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); font-style: italic; }
</style>

react

export function AsideElement({
  heading = "Related reading",
  body = "Three more pieces on the same topic, tangential to the main text but worth a look.",
  variant = "sidebar",
  accent = "#D9C8F0",
}) {
  const wrap = variant === "sidebar"
    ? { borderLeft: `4px solid ${accent}` }
    : { border: "none", background: "transparent", borderTop: `2px solid ${accent}`, borderBottom: `2px solid ${accent}`, fontStyle: "italic" };
  return (
    <div style={{ display: "flex", gap: 20, width: 460, font: "15px/1.55 system-ui, sans-serif", color: "#241430" }}>
      <p style={{ flex: "1 1 auto", margin: 0, color: "#241430aa" }}>
        Main article text flows here, continuing for several paragraphs while this complementary note sits to the side.
      </p>
      <aside style={{ flex: "0 0 180px", background: "#FAF7F2", padding: "16px 18px", borderRadius: 10, ...wrap }}>
        <p style={{ margin: "0 0 6px", fontSize: 10, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: accent }}>Aside</p>
        <h3 style={{ margin: "0 0 6px", fontSize: 15, fontWeight: 700 }}>{heading}</h3>
        <p style={{ margin: 0, fontSize: 13, color: "#241430cc" }}>{body}</p>
      </aside>
    </div>
  );
}