---
sidebar_position: 2
---

# Center Aligned In Container Size With Background Elements

![Cards](/img/center-aligned-in-container-size-with-background-elements.png)

```jsx title="Frontend/sections/AnnouncementBanners/CenterAlignedInContainerSizeWithBackgroundElements.tsx"
<>
      {/* <!-- Announcement Banner --> */}
      <div className="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto">
        <div className="bg-primary bg-[url('https://preline.co/assets/svg/examples/abstract-1.svg')] bg-no-repeat bg-cover bg-center p-4 rounded-lg text-center">
          <p className="me-2 inline-block text-primary-content">
            FastPocket UI Figma is live.
          </p>
          <a
            className="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border-2 border-base-100 text-primary-content hover:border-base-100/70 hover:text-primary-content/70 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
            href="../figma.html"
          >
            Learn more
            <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="m9 18 6-6-6-6" />
            </svg>
          </a>
        </div>
      </div>
      {/* <!-- End Announcement Banner --> */}
    </>
```