Svelte Hero Sections - Flowbite Svelte Blocks

Get started with a collection of hero sections coded with Tailwind CSS to showcase the most important parts of your website based on multiple styles and layouts.

Default hero section #

Use this default example with an announcement badge, heading, CTA buttons, and customer logos to showcase what your website offers.

  • Svelte
<script>
  import { Section, News, HeroHeader, HeroBody } from "flowbite-svelte-blocks";
  import { Button } from "flowbite-svelte";
  import { ArrowRightOutline, VideoCameraSolid } from "flowbite-svelte-icons";
  import { Youtube, ProductHunt, Reddit } from "../utils";
</script>

<Section name="heroDefault">
  <News>
    <span class="bg-primary-600 mr-3 rounded-full px-4 py-1.5 text-xs text-white">New</span>
    <span class="text-sm font-medium">Flowbite is out! See what's new</span>
  </News>
  <HeroHeader>
    {#snippet h1()}We invest in the world’s potential{/snippet}
    {#snippet paragraph()}Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.{/snippet}
  </HeroHeader>

  <div class="mb-8 flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4 lg:mb-16">
    <a href="/">
      <Button size="lg" color="red">
        Learn more <ArrowRightOutline size="md" class="-mr-1 ml-2" />
      </Button>
    </a>
    <a href="/">
      <Button size="lg" color="light">
        <VideoCameraSolid size="xs" class="mr-2 -ml-1" />
        Watch video
      </Button>
    </a>
  </div>
  <HeroBody>
    {#snippet head()}FEATURED IN{/snippet}

    <div class="mt-8 flex flex-wrap items-center justify-center text-gray-500 sm:justify-between">
      <a href="/" class="mr-5 mb-5 hover:text-gray-800 lg:mb-0 dark:hover:text-gray-400">
        <Youtube />
      </a>
      <a href="/" class="mr-5 mb-5 hover:text-gray-800 lg:mb-0 dark:hover:text-gray-400">
        <ProductHunt />
      </a>
      <a href="/" class="mr-5 mb-5 hover:text-gray-800 lg:mb-0 dark:hover:text-gray-400">
        <Reddit />
      </a>
    </div>
  </HeroBody>
</Section>

Visual image with heading #

Use this example to show an image next to the heading and CTA buttons to improve the visual impact of the website’s first visit.

  • Svelte
<script>
  import { Section, HeroHeader } from "flowbite-svelte-blocks";
  import { Button } from "flowbite-svelte";
  import { ArrowRightOutline } from "flowbite-svelte-icons";
</script>

<Section name="heroVisual">
  <div class="mr-auto place-self-center lg:col-span-7">
    <HeroHeader h1Class="max-w-2xl mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white" pClass="text-left max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400 sm:px-0 lg:px-0 xl:px-0">
      {#snippet h1()}Payments tool for software companies{/snippet}
      {#snippet paragraph()}From checkout to global sales tax compliance, companies around the world use Flowbite to simplify their payment stack.{/snippet}
      <a href="/"><Button size="xl" color="red" class="mr-3 inline-flex items-center justify-center">Get started<ArrowRightOutline size="md" class="-mr-1 ml-2" /></Button></a>
      <a href="/"><Button color="light" size="xl" class="inline-flex items-center justify-center">Speak to Sales</Button></a>
    </HeroHeader>
  </div>
  <div class="hidden lg:col-span-5 lg:mt-0 lg:flex">
    <img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/phone-mockup.png" alt="mockup" />
  </div>
</Section>