---
sidebar_position: 2
---

# Full Width With Dismiss Button On Red Background

![Cards](/img/full-width-with-dismiss-button-on-red-background.png)

```jsx title="Frontend/sections/AnnouncementBanners/FullWidthWithDismissButtonOnRedBackground.tsx"
<>
      {/* <!-- Announcement Banner --> */}
      <div className="hs-removing:-translate-y-full bg-primary">
        <div className="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
          <div className="flex items-center">
            <p className="text-primary-content text-center">
              FastPocket UI Figma is live.{" "}
              <a
                className="decoration-2 underline font-medium hover:text-primary-content/[.8] dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
                href="../figma.html"
              >
                Learn more
              </a>
            </p>

            <div className="ps-3 ms-auto">
              <button
                type="button"
                className="inline-flex rounded-lg p-1.5 text-primary-content/[.8] hover:text-primary-content focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-primary focus:ring-primary-content"
                data-hs-remove-element="#ab-full-width-with-dismiss-button-on-blue-bg"
              >
                <span className="sr-only">Dismiss</span>
                <svg
                  className="flex-shrink-0 w-4"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path d="M18 6 6 18" />
                  <path d="m6 6 12 12" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
      {/* <!-- End Announcement Banner --> */}
    </>
```