Context

Information about the current user, object, task or application state.

html

<div class="uif-ctx-stage" data-scenario="morning">
  <div class="uif-ctx-icon" style="background:#E8A020;"></div>
  <p class="uif-ctx-greeting"><span class="uif-ctx-tailored">Good <b class="uif-ctx-word"></b>, Priya</span></p>
  <p class="uif-ctx-caption">Uses context: time of day, current user</p>
</div>
<style>
.uif-ctx-stage { width: 100%; max-width: 320px; padding: 18px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 14px system-ui, sans-serif; color: #241430; text-align: center; }
.uif-ctx-icon { width: 30px; height: 30px; border-radius: 999px; margin: 0 auto 10px; }
.uif-ctx-greeting { margin: 0 0 6px; font-weight: 600; }
.uif-ctx-word::before { content: "day"; }
[data-scenario="morning"] .uif-ctx-word::before { content: "morning"; }
[data-scenario="afternoon"] .uif-ctx-word::before { content: "afternoon"; }
[data-scenario="evening"] .uif-ctx-word::before { content: "evening"; }
.uif-ctx-caption { margin: 0; font-size: 12px; color: #241430aa; }
</style>

tailwind

<div class="w-full max-w-[320px] p-[18px] bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430] text-center" data-scenario="morning">
  <div class="w-[30px] h-[30px] rounded-full mx-auto mb-2.5" style="background:#E8A020;"></div>
  <p class="m-0 mb-1.5 font-semibold"><span>Good <b class="tw-ctx-word"></b>, Priya</span></p>
  <p class="m-0 text-xs text-[#241430]/70">Uses context: time of day, current user</p>
</div>
<style>
.tw-ctx-word::before { content: "day"; }
[data-scenario="morning"] .tw-ctx-word::before { content: "morning"; }
[data-scenario="afternoon"] .tw-ctx-word::before { content: "afternoon"; }
[data-scenario="evening"] .tw-ctx-word::before { content: "evening"; }
</style>

react

export function Context({
  scenario = "morning",
  aware = true,
  userName = "Priya",
  accent = "#E8A020",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 18, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", textAlign: "center" }}>
      <div style={{ width: 30, height: 30, borderRadius: 999, margin: "0 auto 10px", background: accent }} />
      <p style={{ margin: "0 0 6px", fontWeight: 600 }}>{aware ? `Good ${scenario}, ${userName}` : `Welcome, ${userName}`}</p>
      <p style={{ margin: 0, fontSize: 12, color: "#241430aa" }}>{aware ? "Uses context: time of day, current user" : "Same message regardless of context"}</p>
    </div>
  );
}