figcaption

Caption associated with a figure.

html

<figure class="fig fig--below">
  <svg class="fig__chart" width="280" height="110" viewBox="0 0 280 110" role="img" aria-label="Bar chart">
    <rect x="10" y="40" width="28" height="60" rx="3" fill="#BFD9F2"/>
    <rect x="50" y="20" width="28" height="80" rx="3" fill="#BFD9F2"/>
    <rect x="90" y="55" width="28" height="45" rx="3" fill="#BFD9F2"/>
    <rect x="130" y="10" width="28" height="90" rx="3" fill="#BFD9F2"/>
    <rect x="170" y="34" width="28" height="66" rx="3" fill="#BFD9F2"/>
    <rect x="210" y="4" width="28" height="96" rx="3" fill="#BFD9F2"/>
  </svg>
  <figcaption class="fig__cap fig__cap--muted">Fig. 1 — Monthly active users, last twelve months</figcaption>
</figure>
<style>
.fig { width: 300px; box-sizing: border-box; margin: 0; font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fig--above { flex-direction: column-reverse; }
.fig__chart { display: block; }
.fig__cap { margin: 0; font-weight: 600; text-align: center; }
.fig__cap--muted { font-weight: 400; color: #241430888; }
</style>

tailwind

<figure class="fig-tw fig-tw--below w-[300px] box-border m-0 font-sans text-[13px] text-[#241430] bg-[#FAF7F2] p-4 rounded-xl flex flex-col items-center gap-2.5">
  <svg class="block" width="280" height="110" viewBox="0 0 280 110" role="img" aria-label="Bar chart">
    <rect x="10" y="40" width="28" height="60" rx="3" fill="#BFD9F2"/>
    <rect x="50" y="20" width="28" height="80" rx="3" fill="#BFD9F2"/>
    <rect x="90" y="55" width="28" height="45" rx="3" fill="#BFD9F2"/>
    <rect x="130" y="10" width="28" height="90" rx="3" fill="#BFD9F2"/>
    <rect x="170" y="34" width="28" height="66" rx="3" fill="#BFD9F2"/>
    <rect x="210" y="4" width="28" height="96" rx="3" fill="#BFD9F2"/>
  </svg>
  <figcaption class="m-0 text-center font-normal text-[#241430]/55">Fig. 1 — Monthly active users, last twelve months</figcaption>
</figure>
<style>
.fig-tw--above { flex-direction: column-reverse; }
</style>

react

export function FigcaptionElement({
  caption = "Fig. 1 — Monthly active users, last twelve months",
  position = "below",
  accent = "#BFD9F2",
  muted = true,
}) {
  return (
    <figure style={{ width: 300, boxSizing: "border-box", margin: 0, font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, display: "flex", flexDirection: position === "above" ? "column-reverse" : "column", alignItems: "center", gap: 10 }}>
      <svg width="280" height="110" viewBox="0 0 280 110" role="img" aria-label="Bar chart" style={{ display: "block" }}>
        {[10, 50, 90, 130, 170, 210].map((x, i) => (
          <rect key={x} x={x} y={[40, 20, 55, 10, 34, 4][i]} width="28" height={[60, 80, 45, 90, 66, 96][i]} rx="3" fill={accent} />
        ))}
      </svg>
      <figcaption style={{ margin: 0, textAlign: "center", fontWeight: muted ? 400 : 600, color: muted ? "#241430888" : "#241430" }}>{caption}</figcaption>
    </figure>
  );
}