Qwik jumbotron - Flowbite

Use the jumbotron component to show a marketing message to your users based on a headline and image inside of a card box based on Tailwind CSS

The Jumbotron (hero) component can be used as the first section of your website with a focus on a marketing message to increase the likelihood of the user to continue browsing your website.

This UI component features a heading title, a short description, an optional CTA button, background image, gradient or solid background color and it’s generally inside of a card element.

The jumbotron component from Flowbite Qwik is responsive on all devices, natively supports dark mode and is coded with the utility classes from Tailwind CSS.

To start using the jumbotron component you need to import it from flowbite-qwik :

import { Jumbotron } from "flowbite-qwik"

Default jumbotron

Use this default example to show a title, description, and two CTA buttons for the jumbotron component.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Jumbotron, Button } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Jumbotron>
      <Jumbotron.Heading tag="h2">We invest in the world’s potential</Jumbotron.Heading>
      <Jumbotron.SubText>
        Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
      </Jumbotron.SubText>
      <div class="flex justify-center gap-2">
        <Button>Get started</Button>
        <Button color="alternative">Learn more</Button>
      </div>
    </Jumbotron>
  )
})

Align left

Use this example to align the jumbotron content to the left.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Jumbotron, Button } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Jumbotron align="left">
      <Jumbotron.Heading tag="h2">We invest in the world’s potential</Jumbotron.Heading>
      <Jumbotron.SubText>
        Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
      </Jumbotron.SubText>
      <div class="flex gap-2">
        <Button>Get started</Button>
        <Button color="alternative">Learn more</Button>
      </div>
    </Jumbotron>
  )
})

Background image

Use this jumbotron to apply a background image with a darkening opacity effect to improve readability.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Jumbotron, Button } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Jumbotron class="bg-gray-700 bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/conference.jpg')] bg-center bg-no-repeat bg-blend-multiply dark:bg-gray-700">
      <Jumbotron.Heading tag="h2" class="text-white">
        We invest in the world’s potential
      </Jumbotron.Heading>
      <Jumbotron.SubText class="text-white">
        Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
      </Jumbotron.SubText>
      <div class="flex justify-center gap-2">
        <Button>Get started</Button>
        <Button color="alternative">Learn more</Button>
      </div>
    </Jumbotron>
  )
})