---
sidebar_position: 2
---

# Media Object Style With Blurred Background

![Cards](/img/media-object-style-with-blurred-background.png)

```jsx title="Frontend/sections/AnnouncementBanners/MediaObjectStyleWithBlurredBackground.tsx"
<>
      {/* <!-- Announcement Banner --> */}
      <div className="bg-base-100/[.6] backdrop-blur-lg">
        <div className="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
          {/* <!-- Grid --> */}
          <div className="grid justify-center sm:grid-cols-2 sm:items-center gap-4">
            <div className="flex items-center gap-x-3 md:gap-x-5">
              <svg
                className="flex-shrink-0 size-10 md:size-14"
                width="40"
                height="40"
                viewBox="0 0 40 40"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect
                  width="40"
                  height="40"
                  rx="6"
                  fill="currentColor"
                  className="fill-primary"
                />
                <path
                  d="M8 32.5V19.5C8 12.8726 13.3726 7.5 20 7.5C26.6274 7.5 32 12.8726 32 19.5C32 26.1274 26.6274 31.5 20 31.5H19"
                  stroke="base-100"
                  stroke-width="2"
                />
                <path
                  d="M12 32.5V19.66C12 15.1534 15.5817 11.5 20 11.5C24.4183 11.5 28 15.1534 28 19.66C28 24.1666 24.4183 27.82 20 27.82H19"
                  stroke="base-100"
                  stroke-width="2"
                />
                <circle cx="20" cy="19.5214" r="5" fill="base-100" />
              </svg>

              <div className="grow">
                <p className="md:text-xl text-secondary-content font-semibold">
                  Get started today.
                </p>
                <p className="text-sm md:text-base text-secondary-content">
                  Sign up to get unlimited updates.
                </p>
              </div>
            </div>
            {/* <!-- End Col --> */}

            <div className="text-center sm:text-start flex sm:justify-end sm:items-center gap-x-3 md:gap-x-4">
              <a
                className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent bg-primary text-base-100 hover:bg-primary/50 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
                href="#"
              >
                Free trial
              </a>
              <a
                className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-secondary-content text-secondary-content hover:border-base-300 hover:text-base-300 disabled:opacity-50 disabled:pointer-events-none dark:text-base-100 dark:focus:outline-none dark:focus:ring-1"
                href="#"
              >
                Buy now
              </a>
            </div>
            {/* <!-- End Col --> */}
          </div>
          {/* <!-- End Grid --> */}
        </div>
      </div>
      {/* <!-- End Announcement Banner --> */}
    </>
```