Announcement Bar

Slim persistent bar above the header for offers or notices.

html

<div class="abar abar--center" style="background:#241430;">
  <p class="abar__msg">Free shipping on orders over $50 this week. <a href="#" class="abar__cta">Shop now</a></p>
  <button type="button" class="abar__close" aria-label="Dismiss announcement">&times;</button>
</div>
<style>
.abar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; font: 14px/1.4 system-ui, sans-serif; color: #FAF7F2; }
.abar--center { justify-content: center; text-align: center; }
.abar--left { justify-content: flex-start; text-align: left; }
.abar__msg { margin: 0; }
.abar__cta { color: inherit; text-decoration: underline; font-weight: 600; margin-left: 6px; }
.abar__close { background: none; border: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.abar__close:hover, .abar__close:focus-visible { opacity: .7; outline: 2px solid #FAF7F2; outline-offset: 2px; }
</style>

tailwind

<div class="abar-tw abar-tw--center flex items-center gap-3 px-4.5 py-2.5 font-sans text-sm text-[#FAF7F2]" style="background:#241430;">
  <p class="m-0">Free shipping on orders over $50 this week. <a href="#" class="text-inherit underline font-semibold ml-1.5">Shop now</a></p>
  <button type="button" class="bg-transparent border-0 text-inherit text-lg leading-none cursor-pointer px-1 hover:opacity-70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#FAF7F2]" aria-label="Dismiss announcement">&times;</button>
</div>
<style>
.abar-tw--center { justify-content: center; text-align: center; }
.abar-tw--left { justify-content: flex-start; text-align: left; }
</style>

react

export function AnnouncementBar({
  message = "Free shipping on orders over $50 this week.",
  ctaText = "Shop now",
  bg = "#241430",
  align = "center",
  dismissible = true,
}) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: align === "center" ? "center" : "flex-start",
      textAlign: align, gap: 12, padding: "10px 18px", font: "14px/1.4 system-ui, sans-serif", color: "#FAF7F2", background: bg }}>
      <p style={{ margin: 0 }}>{message} <a href="#" style={{ color: "inherit", textDecoration: "underline", fontWeight: 600, marginLeft: 6 }}>{ctaText}</a></p>
      {dismissible && (
        <button type="button" aria-label="Dismiss announcement" style={{ background: "none", border: "none",
          color: "inherit", fontSize: 18, lineHeight: 1, cursor: "pointer", padding: "0 4px" }}>
          &times;
        </button>
      )}
    </div>
  );
}