Feature Announcement

Highlight introducing a new capability.

html

<div class="feature-ann-stage">
  <div class="feature-ann feature-ann--card" style="--accent:#F5C2E0">
    <button type="button" class="feature-ann__dismiss" aria-label="Dismiss announcement">&times;</button>
    <span class="feature-ann__badge">New</span>
    <h3 class="feature-ann__title">Introducing Smart Replies</h3>
    <p class="feature-ann__desc">Draft responses in one click, tuned to your team&#39;s tone.</p>
    <button type="button" class="feature-ann__cta">Try it now</button>
  </div>
</div>
<style>
.feature-ann-stage { position: relative; min-height: 170px; font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border-radius: 12px; }
.feature-ann { position: relative; padding: 18px 40px 18px 20px; }
.feature-ann__dismiss { position: absolute; top: 10px; right: 12px; background: transparent; border: none; font-size: 16px; line-height: 1; cursor: pointer; color: #241430; }
.feature-ann__dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
.feature-ann__badge { display: inline-block; background: var(--accent); color: #241430; font: 700 10px system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }
.feature-ann__title { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.feature-ann__desc { margin: 0 0 12px; font-size: 13.5px; color: #241430cc; }
.feature-ann__cta { background: var(--accent); color: #241430; border: none; padding: 8px 16px; border-radius: 8px; font: 600 13.5px system-ui, sans-serif; cursor: pointer; }
.feature-ann--banner { display: flex; align-items: center; gap: 14px; padding: 14px 40px 14px 20px; border-radius: 10px; }
.feature-ann--banner .feature-ann__title, .feature-ann--banner .feature-ann__desc { margin: 0; }
.feature-ann--banner .feature-ann__badge { margin-bottom: 0; }
.feature-ann--card { border: 1.5px solid #24143022; border-radius: 12px; max-width: 320px; box-shadow: 0 8px 20px rgba(36,20,48,.1); }
.feature-ann--spotlight { position: absolute; inset: 16px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: #241430; color: #FAF7F2; border-radius: 14px; box-shadow: 0 20px 40px rgba(36,20,48,.35); }
.feature-ann--spotlight .feature-ann__desc { color: #FAF7F2cc; }
.feature-ann--spotlight .feature-ann__dismiss { color: #FAF7F2; }
</style>

tailwind

<div class="relative min-h-[170px] font-sans text-[#241430] bg-[#FAF7F2] rounded-xl">
  <div class="feature-ann-tw feature-ann-tw--card relative p-4.5 pr-10" style="--accent:#F5C2E0">
    <button type="button" class="absolute top-2.5 right-3 bg-transparent border-0 text-base leading-none cursor-pointer" aria-label="Dismiss announcement">&times;</button>
    <span class="inline-block text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full mb-2 text-[#241430]" style="background:#F5C2E0">New</span>
    <h3 class="m-0 mb-1 text-base font-semibold">Introducing Smart Replies</h3>
    <p class="m-0 mb-3 text-[13.5px] text-[#241430]/80">Draft responses in one click, tuned to your team&#39;s tone.</p>
    <button type="button" class="border-0 px-4 py-2 rounded-lg text-[13.5px] font-semibold text-[#241430]" style="background:#F5C2E0">Try it now</button>
  </div>
</div>
<style>
.feature-ann-tw--card { border: 1.5px solid #24143022; border-radius: 12px; max-width: 320px; box-shadow: 0 8px 20px rgba(36,20,48,.1); }
.feature-ann-tw--banner { display: flex; align-items: center; gap: 14px; border-radius: 10px; }
.feature-ann-tw--spotlight { position: absolute; inset: 16px; background: #241430; color: #FAF7F2; border-radius: 14px; box-shadow: 0 20px 40px rgba(36,20,48,.35); }
</style>

react

import { useState } from "react";

export function FeatureAnnouncement({
  title = "Introducing Smart Replies",
  description = "Draft responses in one click, tuned to your team's tone.",
  ctaLabel = "Try it now",
  variant = "card",
  accent = "#F5C2E0",
}) {
  const [visible, setVisible] = useState(true);
  if (!visible) return null;
  const wrap = {
    banner: { display: "flex", alignItems: "center", gap: 14, borderRadius: 10 },
    card: { border: "1.5px solid #24143022", borderRadius: 12, maxWidth: 320, boxShadow: "0 8px 20px rgba(36,20,48,.1)" },
    spotlight: { position: "absolute", inset: 16, background: "#241430", color: "#FAF7F2", borderRadius: 14, boxShadow: "0 20px 40px rgba(36,20,48,.35)", display: "flex", flexDirection: "column", justifyContent: "center" },
  }[variant] ?? {};
  return (
    <div style={{ position: "relative", minHeight: 170, fontFamily: "system-ui, sans-serif", color: "#241430", background: "#FAF7F2", borderRadius: 12 }}>
      <div style={{ position: "relative", padding: "18px 40px 18px 20px", ...wrap }}>
        <button type="button" aria-label="Dismiss announcement" onClick={() => setVisible(false)}
          style={{ position: "absolute", top: 10, right: 12, background: "transparent", border: "none", fontSize: 16, lineHeight: 1, cursor: "pointer", color: variant === "spotlight" ? "#FAF7F2" : "#241430" }}>
          &times;
        </button>
        <span style={{ display: "inline-block", background: accent, color: "#241430", fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".04em", padding: "2px 8px", borderRadius: 999, marginBottom: 8 }}>New</span>
        <h3 style={{ margin: "0 0 4px", fontSize: 16, fontWeight: 600 }}>{title}</h3>
        <p style={{ margin: "0 0 12px", fontSize: 13.5, color: variant === "spotlight" ? "#FAF7F2cc" : "#241430cc" }}>{description}</p>
        <button type="button" style={{ background: accent, color: "#241430", border: "none", padding: "8px 16px", borderRadius: 8, fontWeight: 600, fontSize: 13.5, cursor: "pointer" }}>{ctaLabel}</button>
      </div>
    </div>
  );
}