Visual Hierarchy

Arrangement of visual emphasis that communicates importance.

html

<div class="uif-vh-stage uif-vh-stage--strong">
  <h3 class="uif-vh-heading" style="color:#241430;">Quarterly results</h3>
  <p class="uif-vh-body">Revenue is up 12% on last quarter, driven by renewals.</p>
  <button type="button" class="uif-vh-cta" style="background:#241430;">View report</button>
  <p class="uif-vh-caption">Strong hierarchy &mdash; same content, different emphasis</p>
</div>
<style>
.uif-vh-stage { width: 100%; max-width: 320px; padding: 18px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: system-ui, sans-serif; color: #241430; }
.uif-vh-heading { margin: 0 0 6px; font-size: 15px; font-weight: 500; }
.uif-vh-body { margin: 0 0 14px; font-size: 14px; color: #241430; }
.uif-vh-cta { display: block; font: 14px system-ui, sans-serif; font-weight: 500; color: #fff; border: none; border-radius: 6px; padding: 8px 14px; cursor: pointer; opacity: .85; }
.uif-vh-stage--strong .uif-vh-heading { font-size: 22px; font-weight: 800; }
.uif-vh-stage--strong .uif-vh-body { font-size: 13px; color: #241430aa; }
.uif-vh-stage--strong .uif-vh-cta { font-weight: 700; opacity: 1; box-shadow: 0 4px 10px rgba(36,20,48,.25); }
.uif-vh-caption { margin: 14px 0 0; font-size: 11px; color: #241430aa; }
</style>

tailwind

<div class="tw-vh-stage tw-vh-strong w-full max-w-[320px] p-[18px] bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-[#241430]">
  <h3 class="tw-vh-heading m-0 mb-1.5 text-[15px] font-medium" style="color:#241430;">Quarterly results</h3>
  <p class="tw-vh-body m-0 mb-3.5 text-sm">Revenue is up 12% on last quarter, driven by renewals.</p>
  <button type="button" class="tw-vh-cta block font-medium text-white border-0 rounded-md px-3.5 py-2 cursor-pointer opacity-85" style="background:#241430;">View report</button>
  <p class="mt-3.5 text-[11px] text-[#241430]/70">Strong hierarchy &mdash; same content, different emphasis</p>
</div>
<style>
.tw-vh-strong .tw-vh-heading { font-size: 22px; font-weight: 800; }
.tw-vh-strong .tw-vh-body { font-size: 13px; color: #241430aa; }
.tw-vh-strong .tw-vh-cta { font-weight: 700; opacity: 1; box-shadow: 0 4px 10px rgba(36,20,48,.25); }
</style>

react

export function VisualHierarchy({
  strong = true,
  heading = "Quarterly results",
  body = "Revenue is up 12% on last quarter, driven by renewals.",
  accent = "#241430",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 18, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", color: "#241430" }}>
      <h3 style={{ margin: "0 0 6px", color: accent, fontSize: strong ? 22 : 15, fontWeight: strong ? 800 : 500 }}>{heading}</h3>
      <p style={{ margin: "0 0 14px", fontSize: strong ? 13 : 14, color: strong ? "#241430aa" : "#241430" }}>{body}</p>
      <button type="button" style={{ display: "block", fontSize: 14, fontWeight: strong ? 700 : 500, color: "#fff", background: accent, border: "none", borderRadius: 6, padding: "8px 14px", cursor: "pointer", opacity: strong ? 1 : .85, boxShadow: strong ? "0 4px 10px rgba(36,20,48,.25)" : "none" }}>View report</button>
      <p style={{ margin: "14px 0 0", fontSize: 11, color: "#241430aa" }}>{strong ? "Strong" : "Flat"} hierarchy &mdash; same content, different emphasis</p>
    </div>
  );
}