Banner

<script lang="ts">
  import { Skeleton, ImagePlaceholder, Banner } from 'svelte-5-ui-lib';
</script>

<div class="relative">
  <div class="p-6">
    <Skeleton class="py-4" />
    <ImagePlaceholder class="py-4" />
  </div>
  <Banner id="signup-banner" position="absolute" bannerType="signup">
    <form action="/" class="flex w-full flex-col items-center md:flex-row">
      <label for="email" class="mb-2 me-auto flex-shrink-0 text-sm font-medium text-gray-500 md:m-0 md:mb-0 md:me-4 dark:text-gray-400">Sign up for our newsletter</label>
      <input type="email" id="email" placeholder="Enter your email" class="mb-2 block w-full rounded-lg border border-gray-300 bg-white p-2.5 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 md:mb-0 md:me-4 md:w-64 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500" required />
      <button type="submit" class="w-full rounded-lg bg-primary-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Subscribe</button>
    </form>
  </Banner>
</div>

<script lang="ts">
  import { Skeleton, ImagePlaceholder, Banner } from 'svelte-5-ui-lib';
  import { BookOpenSolid, ArrowRightOutline } from "flowbite-svelte-icons";
</script>

<div class="relative">
  <div class="p-6">
    <Skeleton class="py-4" />
    <ImagePlaceholder class="py-4" />
  </div>
  <Banner id="info-banner" position="absolute" bannerType="info">
    {#snippet header()}
      <div class="mb-4 md:mb-0 md:me-4">
        <h2 class="mb-1 text-base font-semibold text-gray-900 dark:text-white">Integration is the key</h2>
        <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">You can integrate Flowbite with many tools.</p>
      </div>
    {/snippet}
    <a href="/" class="me-3 inline-flex items-center rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700">
      <BookOpenSolid class="me-2 h-3 w-3" />
      Learn more
    </a>
    <a href="/" class="me-2 inline-flex rounded-lg bg-primary-700 px-3 py-2 text-xs font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
      Get started <ArrowRightOutline class="ms-2 h-3 w-3" />
    </a>
  </Banner>
</div>