Edit Feature Announcement · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"feature-ann-stage\">\n  <div class=\"feature-ann feature-ann--{{variant}}\" style=\"--accent:{{accent}}\">\n    <button type=\"button\" class=\"feature-ann__dismiss\" aria-label=\"Dismiss announcement\">&times;</button>\n    <span class=\"feature-ann__badge\">New</span>\n    <h3 class=\"feature-ann__title\">{{title}}</h3>\n    <p class=\"feature-ann__desc\">{{description}}</p>\n    <button type=\"button\" class=\"feature-ann__cta\">{{ctaLabel}}</button>\n  </div>\n</div>\n<style>\n.feature-ann-stage { position: relative; min-height: 170px; font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border-radius: 12px; }\n.feature-ann { position: relative; padding: 18px 40px 18px 20px; }\n.feature-ann__dismiss { position: absolute; top: 10px; right: 12px; background: transparent; border: none; font-size: 16px; line-height: 1; cursor: pointer; color: #241430; }\n.feature-ann__dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }\n.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; }\n.feature-ann__title { margin: 0 0 4px; font-size: 16px; font-weight: 600; }\n.feature-ann__desc { margin: 0 0 12px; font-size: 13.5px; color: #241430cc; }\n.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; }\n.feature-ann--banner { display: flex; align-items: center; gap: 14px; padding: 14px 40px 14px 20px; border-radius: 10px; }\n.feature-ann--banner .feature-ann__title, .feature-ann--banner .feature-ann__desc { margin: 0; }\n.feature-ann--banner .feature-ann__badge { margin-bottom: 0; }\n.feature-ann--card { border: 1.5px solid #24143022; border-radius: 12px; max-width: 320px; box-shadow: 0 8px 20px rgba(36,20,48,.1); }\n.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); }\n.feature-ann--spotlight .feature-ann__desc { color: #FAF7F2cc; }\n.feature-ann--spotlight .feature-ann__dismiss { color: #FAF7F2; }\n</style>",
  "tailwind": "<div class=\"relative min-h-[170px] font-sans text-[#241430] bg-[#FAF7F2] rounded-xl\">\n  <div class=\"feature-ann-tw feature-ann-tw--{{variant}} relative p-4.5 pr-10\" style=\"--accent:{{accent}}\">\n    <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>\n    <span class=\"inline-block text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full mb-2 text-[#241430]\" style=\"background:{{accent}}\">New</span>\n    <h3 class=\"m-0 mb-1 text-base font-semibold\">{{title}}</h3>\n    <p class=\"m-0 mb-3 text-[13.5px] text-[#241430]/80\">{{description}}</p>\n    <button type=\"button\" class=\"border-0 px-4 py-2 rounded-lg text-[13.5px] font-semibold text-[#241430]\" style=\"background:{{accent}}\">{{ctaLabel}}</button>\n  </div>\n</div>\n<style>\n.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); }\n.feature-ann-tw--banner { display: flex; align-items: center; gap: 14px; border-radius: 10px; }\n.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); }\n</style>",
  "react": "import { useState } from \"react\";\n\nexport function FeatureAnnouncement({\n  title = \"{{title}}\",\n  description = \"{{description}}\",\n  ctaLabel = \"{{ctaLabel}}\",\n  variant = \"{{variant}}\",\n  accent = \"{{accent}}\",\n}) {\n  const [visible, setVisible] = useState(true);\n  if (!visible) return null;\n  const wrap = {\n    banner: { display: \"flex\", alignItems: \"center\", gap: 14, borderRadius: 10 },\n    card: { border: \"1.5px solid #24143022\", borderRadius: 12, maxWidth: 320, boxShadow: \"0 8px 20px rgba(36,20,48,.1)\" },\n    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\" },\n  }[variant] ?? {};\n  return (\n    <div style={{ position: \"relative\", minHeight: 170, fontFamily: \"system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", borderRadius: 12 }}>\n      <div style={{ position: \"relative\", padding: \"18px 40px 18px 20px\", ...wrap }}>\n        <button type=\"button\" aria-label=\"Dismiss announcement\" onClick={() => setVisible(false)}\n          style={{ position: \"absolute\", top: 10, right: 12, background: \"transparent\", border: \"none\", fontSize: 16, lineHeight: 1, cursor: \"pointer\", color: variant === \"spotlight\" ? \"#FAF7F2\" : \"#241430\" }}>\n          &times;\n        </button>\n        <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>\n        <h3 style={{ margin: \"0 0 4px\", fontSize: 16, fontWeight: 600 }}>{title}</h3>\n        <p style={{ margin: \"0 0 12px\", fontSize: 13.5, color: variant === \"spotlight\" ? \"#FAF7F2cc\" : \"#241430cc\" }}>{description}</p>\n        <button type=\"button\" style={{ background: accent, color: \"#241430\", border: \"none\", padding: \"8px 16px\", borderRadius: 8, fontWeight: 600, fontSize: 13.5, cursor: \"pointer\" }}>{ctaLabel}</button>\n      </div>\n    </div>\n  );\n}"
}