Svelte Newsletter Sections - Flowbite Svelte Blocks

The newsletter component is an important marketing method that you can use to convince website visitors to sign up for additional news from your organization.

Default newsletter #

Use this example as a website section to allow website visitors to sign up for your newsletter program featuring an input field and privacy notice.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><section class="relative py-6 sm:py-10"><div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6"><div class="mx-auto max-w-screen-md sm:text-center"><h2 class="mb-4 text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl dark:text-white">Sign up for our newsletter</h2> <p class="mx-auto mb-8 max-w-2xl font-light text-gray-500 md:mb-12 sm:text-xl dark:text-gray-400" data-svelte-h="svelte-1uvylue">Stay up to date with the roadmap progress, announcements and exclusive discounts feel free to sign up with your email.</p> <form action="/"><div class="items-center mx-auto mb-3 space-y-4 max-w-screen-sm sm:flex sm:space-y-0"><div class="relative w-full"> <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 hidden">Email address</label>  <div class="relative w-full"><div class="flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 start-0 ps-2.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="left" class="shrink-0 w-4 h-4 text-gray-500 dark:text-gray-400 ml-2" role="img" aria-label="envelope solid" viewBox="0 0 24 24"><path d="M2.038 5.61A2.01 2.01 0 0 0 2 6v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6c0-.12-.01-.238-.03-.352l-.866.65-7.89 6.032a2 2 0 0 1-2.429 0L2.884 6.288l-.846-.677Z"></path><path d="M20.677 4.117A1.996 1.996 0 0 0 20 4H4c-.225 0-.44.037-.642.105l.758.607L12 10.742 19.9 4.7l.777-.583Z"></path></svg> </div>  <input id="email" placeholder="Enter your email" class="disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right bg-gray-50 text-gray-900 block p-3 pl-10 w-full text-sm rounded-lg border border-gray-300 sm:rounded-none sm:rounded-l-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" type="email">  <div class="flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 end-0 pe-2.5"> </div></div>  </div> <div><button type="submit" class="focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus-within:ring-primary-300 dark:focus-within:ring-primary-800 py-3 px-5 w-full text-sm font-medium text-center text-white rounded-lg border cursor-pointer border-primary-600 sm:rounded-none sm:rounded-r-lg focus:ring-4 dark:focus:ring-primary-800">Subscribe</button> </div></div> <div class="mx-auto max-w-screen-sm text-sm text-left text-gray-500 newsletter-form-footer dark:text-gray-300" data-svelte-h="svelte-lcghos">We care about the protection of your data. <a href="/" class="font-medium text-primary-600 dark:text-primary-500 hover:underline">Read our Privacy Policy</a>.</div></form></div> </div></section> </div>
Svelte
<script lang="ts">
  import { Section, Newsletter } from 'flowbite-svelte-blocks';
  import { Input, Button, Label } from 'flowbite-svelte';
  import { EnvelopeSolid } from 'flowbite-svelte-icons';
</script>

<Section>
  <Newsletter>
    <svelte:fragment slot="h2">Sign up for our newsletter</svelte:fragment>
    <p class="mx-auto mb-8 max-w-2xl font-light text-gray-500 md:mb-12 sm:text-xl dark:text-gray-400">Stay up to date with the roadmap progress, announcements and exclusive discounts feel free to sign up with your email.</p>
    <form action="/">
      <div class="items-center mx-auto mb-3 space-y-4 max-w-screen-sm sm:flex sm:space-y-0">
        <div class="relative w-full">
          <Label class="hidden">Email address</Label>
          <Input id="email" type="email" placeholder="Enter your email" size="md" class="block p-3 pl-10 w-full text-sm rounded-lg border border-gray-300 sm:rounded-none sm:rounded-l-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
            <EnvelopeSolid slot="left" size="sm" class="text-gray-500 dark:text-gray-400 ml-2" />
          </Input>
        </div>
        <div>
          <Button type="submit" class="py-3 px-5 w-full text-sm font-medium text-center text-white rounded-lg border cursor-pointer border-primary-600 sm:rounded-none sm:rounded-r-lg focus:ring-4  dark:focus:ring-primary-800">Subscribe</Button>
        </div>
      </div>
      <div class="mx-auto max-w-screen-sm text-sm text-left text-gray-500 newsletter-form-footer dark:text-gray-300">
        We care about the protection of your data. <a href="/" class="font-medium text-primary-600 dark:text-primary-500 hover:underline">Read our Privacy Policy</a>.
      </div>
    </form>
  </Newsletter>
</Section>

Component data

Maintenance Pages

Popups