12 KiB
Vue 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
:::tip Original reference: https://flowbite.com/docs/components/jumbotron/ :::
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 is responsive on all devices, natively supports dark mode and is coded with the utility classes from Tailwind CSS.
Default Jumbotron
Use this default example to show a title, description, and two CTA buttons for the jumbotron component.
```vue <script setup> import FwbJumbotron from '@/components/FwbJumbotron/FwbJumbotron.vue' </script>
## Background image
Use this jumbotron to apply a background image with a darkening opacity effect to improve readability.
<fwb-jumbotron-background-image-example />
```vue
<template>
<div
>
<fwb-jumbotron
class="bg-center bg-no-repeat bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/conference.jpg')] dark:bg-gray-700 bg-gray-700 bg-blend-multiply"
header-classes="text-white"
sub-text-classes="text-gray-300 dark:text-gray-300"
header-text="We invest in the world’s potential"
sub-text="Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."
>
<div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
<a
href="#"
class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
>
Get started
<svg
class="w-3.5 h-3.5 ml-2 rtl:rotate-180"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 5h12m0 0L9 1m4 4L9 9"
/>
</svg>
</a>
<a
href="#"
class="inline-flex justify-center hover:text-gray-900 items-center py-3 px-5 sm:ml-4 text-base font-medium text-center text-white rounded-lg border border-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-400"
>
Learn more
</a>
</div>
</fwb-jumbotron>
</div>
</template>
<script setup>
import FwbJumbotron from '@/components/FwbJumbotron/FwbJumbotron.vue'
</script>
Featured video
This component can be used to feature a video together with a heading title, description, and CTA buttons.
```vue