figure

Self-contained media/content with optional caption.

const total = items.reduce((a, b) => a + b);
const total = items.reduce((a, b) => a + b);
Summing a list without a loop — a self-contained unit, referenceable from anywhere in the text.

html

<figure class="figu figu--code" style="--accent:#E8A020;">
  <pre class="figu__code"><code>const total = items.reduce((a, b) =&gt; a + b);</code></pre>
  <blockquote class="figu__quote">const total = items.reduce((a, b) =&gt; a + b);</blockquote>
  <figcaption class="figu__cap">Summing a list without a loop — a self-contained unit, referenceable from anywhere in the text.</figcaption>
</figure>
<style>
.figu { width: 320px; box-sizing: border-box; margin: 0; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #241430; padding: 18px; border-radius: 12px; border-left: 4px solid var(--accent); }
.figu__code { display: none; margin: 0 0 10px; overflow-x: auto; }
.figu__code code { font: 13px/1.5 ui-monospace, monospace; color: #A8E6C1; }
.figu__quote { display: none; margin: 0 0 10px; font: italic 16px/1.5 Georgia, serif; color: #FAF7F2; padding-left: 14px; border-left: 2px solid var(--accent); }
.figu--code .figu__code { display: block; }
.figu--quote .figu__quote { display: block; }
.figu__cap { margin: 0; font-size: 12px; color: #FAF7F299; }
</style>

tailwind

<figure class="figu-tw figu-tw--code w-[320px] box-border m-0 font-sans text-sm bg-[#241430] p-[18px] rounded-xl border-l-4" style="border-color:#E8A020">
  <pre class="figu-tw__code hidden m-0 mb-2.5 overflow-x-auto"><code class="font-mono text-[13px] text-[#A8E6C1]">const total = items.reduce((a, b) =&gt; a + b);</code></pre>
  <blockquote class="figu-tw__quote hidden m-0 mb-2.5 italic text-base text-[#FAF7F2] pl-3.5 border-l-2" style="border-color:#E8A020">const total = items.reduce((a, b) =&gt; a + b);</blockquote>
  <figcaption class="m-0 text-xs text-[#FAF7F2]/60">Summing a list without a loop — a self-contained unit, referenceable from anywhere in the text.</figcaption>
</figure>
<style>
.figu-tw--code .figu-tw__code { display: block; }
.figu-tw--quote .figu-tw__quote { display: block; }
</style>

react

export function FigureElement({
  code = "const total = items.reduce((a, b) =&gt; a + b);",
  caption = "Summing a list without a loop",
  variant = "code",
  accent = "#E8A020",
}) {
  return (
    <figure style={{ width: 320, boxSizing: "border-box", margin: 0, font: "14px/1.5 system-ui, sans-serif", background: "#241430", padding: 18, borderRadius: 12, borderLeft: `4px solid ${accent}` }}>
      {variant === "code" ? (
        <pre style={{ margin: "0 0 10px", overflowX: "auto" }}><code style={{ font: "13px/1.5 ui-monospace, monospace", color: "#A8E6C1" }}>{code}</code></pre>
      ) : (
        <blockquote style={{ margin: "0 0 10px", font: "italic 16px/1.5 Georgia, serif", color: "#FAF7F2", paddingLeft: 14, borderLeft: `2px solid ${accent}` }}>{code}</blockquote>
      )}
      <figcaption style={{ margin: 0, fontSize: 12, color: "#FAF7F299" }}>{caption} — a self-contained unit, referenceable from anywhere in the text.</figcaption>
    </figure>
  );
}