Emphasis

Degree of visual attention.

html

<div class="em-wrap" data-level="strong" style="--accent:#E8A020;">
  <p class="em-text" style="font-size:16px;">Save changes before you leave</p>
  <p class="em-caption">emphasis: strong</p>
</div>
<style>
.em-wrap { font: system-ui, sans-serif; color: #241430; width: 300px; }
.em-text { margin: 0; }
[data-level="none"] .em-text { font-weight: 400; color: #24143099; }
[data-level="medium"] .em-text { font-weight: 600; color: #241430; }
[data-level="strong"] .em-text { font-weight: 800; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.em-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="em-tw font-sans text-[#241430] w-[300px]" data-level="strong" style="--accent:#E8A020;">
  <p class="em-tw-text m-0" style="font-size:16px;">Save changes before you leave</p>
  <p class="mt-3 text-xs text-[#241430]/80">emphasis: strong</p>
</div>
<style>
.em-tw[data-level="none"] .em-tw-text { font-weight: 400; color: #24143099; }
.em-tw[data-level="medium"] .em-tw-text { font-weight: 600; color: #241430; }
.em-tw[data-level="strong"] .em-tw-text { font-weight: 800; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
</style>

react

export function Emphasis({
  level = "strong",
  text = "Save changes before you leave",
  accent = "#E8A020",
  fontSize = 16,
}) {
  const styles = {
    none: { fontWeight: 400, color: "#24143099" },
    medium: { fontWeight: 600, color: "#241430" },
    strong: { fontWeight: 800, color: accent, textDecoration: "underline", textUnderlineOffset: 4 },
  }[level];
  return (
    <div style={{ font: "system-ui, sans-serif", color: "#241430", width: 300 }}>
      <p style={{ margin: 0, fontSize, ...styles }}>{text}</p>
      <p style={{ marginTop: 12, fontSize: 12, color: "#241430cc" }}>emphasis: {level}</p>
    </div>
  );
}