forked from mrwyndham/fastpocket
55 lines
2.0 KiB
Markdown
55 lines
2.0 KiB
Markdown
---
|
|
sidebar_position: 2
|
|
---
|
|
|
|
# Full Width With Dismiss Button On Red Background
|
|
|
|
|
|
|
|
```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 --> */}
|
|
</>
|
|
```
|