---
sidebar_position: 2
---

# Light Pilled Style Link

![Cards](/img/light-pilled-style-link.png)

```jsx title="Frontend/sections/AnnouncementBanners/LightPilledStyleLink.tsx"
<div className="bg-neutral">
      <div className="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto text-center">
        {/* <!-- Announcement Banner --> */}
        <a
          className="group inline-block bg-primary-content/[.05] hover:bg-primary-content/[.1] border border-primary-content[.05] p-1 ps-4 rounded-full shadow-md"
          href="../figma.html"
        >
          <div className="flex items-center">
            <p className="me-2 pt-1 inline-block text-primary-content text-sm">
              FastPocket UI Figma is live.
            </p>
            <span className="group-hover:bg-primary-content/[.1] py-1.5 px-2.5 inline-flex justify-center items-center gap-x-2 rounded-full bg-primary-content/[.075] font-semibold text-primary-content text-sm">
              <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>
            </span>
          </div>
        </a>
        {/* <!-- End Announcement Banner --> */}
      </div>
    </div>
```