h1–h6

Semantic heading hierarchy.

h2

Section heading

Section heading

Section heading

Section heading

Section heading
Section heading

html

<div class="hd hd--h2" style="--accent:#241430;">
  <span class="hd__rank">h2</span>
  <h1 class="hd__lvl hd__lvl--h1">Section heading</h1>
  <h2 class="hd__lvl hd__lvl--h2">Section heading</h2>
  <h3 class="hd__lvl hd__lvl--h3">Section heading</h3>
  <h4 class="hd__lvl hd__lvl--h4">Section heading</h4>
  <h5 class="hd__lvl hd__lvl--h5">Section heading</h5>
  <h6 class="hd__lvl hd__lvl--h6">Section heading</h6>
</div>
<style>
.hd { width: 360px; box-sizing: border-box; font-family: system-ui, sans-serif; color: var(--accent); background: #FAF7F2; padding: 24px; border-radius: 12px; position: relative; display: flex; align-items: center; gap: 12px; }
.hd__rank { font: 700 11px ui-monospace, monospace; color: #FAF7F2; background: var(--accent); padding: 3px 8px; border-radius: 999px; text-transform: uppercase; }
.hd__lvl { display: none; margin: 0; }
.hd--h1 .hd__lvl--h1, .hd--h2 .hd__lvl--h2, .hd--h3 .hd__lvl--h3, .hd--h4 .hd__lvl--h4, .hd--h5 .hd__lvl--h5, .hd--h6 .hd__lvl--h6 { display: block; }
.hd__lvl--h1 { font-size: 34px; font-weight: 800; }
.hd__lvl--h2 { font-size: 27px; font-weight: 700; }
.hd__lvl--h3 { font-size: 22px; font-weight: 700; }
.hd__lvl--h4 { font-size: 18px; font-weight: 700; }
.hd__lvl--h5 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.hd__lvl--h6 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #241430aa; }
</style>

tailwind

<div class="hd-tw hd-tw--h2 w-[360px] box-border font-sans p-6 rounded-xl flex items-center gap-3" style="color:#241430;background:#FAF7F2;">
  <span class="font-mono text-[11px] font-bold text-[#FAF7F2] px-2 py-0.5 rounded-full uppercase" style="background:#241430">h2</span>
  <h1 class="hd-tw__lvl hd-tw__lvl--h1 m-0 hidden text-[34px] font-extrabold">Section heading</h1>
  <h2 class="hd-tw__lvl hd-tw__lvl--h2 m-0 hidden text-3xl font-bold">Section heading</h2>
  <h3 class="hd-tw__lvl hd-tw__lvl--h3 m-0 hidden text-2xl font-bold">Section heading</h3>
  <h4 class="hd-tw__lvl hd-tw__lvl--h4 m-0 hidden text-lg font-bold">Section heading</h4>
  <h5 class="hd-tw__lvl hd-tw__lvl--h5 m-0 hidden text-sm font-bold uppercase tracking-wide">Section heading</h5>
  <h6 class="hd-tw__lvl hd-tw__lvl--h6 m-0 hidden text-xs font-bold uppercase tracking-widest text-[#241430]/65">Section heading</h6>
</div>
<style>
.hd-tw--h1 .hd-tw__lvl--h1, .hd-tw--h2 .hd-tw__lvl--h2, .hd-tw--h3 .hd-tw__lvl--h3, .hd-tw--h4 .hd-tw__lvl--h4, .hd-tw--h5 .hd-tw__lvl--h5, .hd-tw--h6 .hd-tw__lvl--h6 { display: block !important; }
</style>

react

export function Hd({
  text = "Section heading",
  level = "h2",
  accent = "#241430",
  showRank = true,
}) {
  const sizes = { h1: [34, 800], h2: [27, 700], h3: [22, 700], h4: [18, 700], h5: [15, 700], h6: [13, 700] };
  const [fontSize, fontWeight] = sizes[level] ?? sizes.h2;
  const Tag = level;
  return (
    <div style={{ width: 360, boxSizing: "border-box", fontFamily: "system-ui, sans-serif", color: accent, background: "#FAF7F2", padding: 24, borderRadius: 12, display: "flex", alignItems: "center", gap: 12 }}>
      {showRank && (
        <span style={{ font: "700 11px ui-monospace, monospace", color: "#FAF7F2", background: accent, padding: "3px 8px", borderRadius: 999, textTransform: "uppercase" }}>{level}</span>
      )}
      <Tag style={{ margin: 0, fontSize, fontWeight, textTransform: level === "h5" || level === "h6" ? "uppercase" : "none" }}>{text}</Tag>
    </div>
  );
}