Hero Sections

Hero section components for landing pages with centered content, badge links, and call-to-action buttons, or side-by-side layouts with an image visual.

Default Hero

New Flowbite is out! See what's new

We invest in the world's potential

Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.

Learn more Watch video

Blade code

<x-fwb.blocks.marketing.hero />

Custom Hero Properties

Beta Check out Flowbite Blade v2

Build websites faster with Laravel

Use our Blade components to ship production-ready marketing pages in minutes.

Get started See demo

Blade code

<x-fwb.blocks.marketing.hero
    title="Build websites faster with Laravel"
    description="Use our Blade components to ship production-ready marketing pages in minutes."
    badgeLabel="Beta"
    badgeText="Check out Flowbite Blade v2"
    badgeHref="/docs"
    primaryButtonText="Get started"
    primaryButtonHref="/register"
    secondaryButtonText="See demo"
    secondaryButtonHref="/demo"
/>

Default Hero with Visual

Payments tool for software companies

From checkout to global sales tax compliance, companies around the world use Flowbite to simplify their payment stack.

Get started Speak to Sales

Blade code

<x-fwb.blocks.marketing.hero-visual />

Custom Hero Visual Properties

Build modern web apps with Laravel

Get started quickly with our ready-to-use Blade components and ship faster.

Start free trial Talk to Sales

Blade code

<x-fwb.blocks.marketing.hero-visual
    title="Build modern web apps with Laravel"
    description="Get started quickly with our ready-to-use Blade components and ship faster."
    image="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/phone-mockup.png"
    imageAlt="phone mockup"
    primaryButtonText="Start free trial"
    primaryButtonHref="/register"
    secondaryButtonText="Talk to Sales"
    secondaryButtonHref="/contact"
/>

Component Properties

Hero x-fwb.blocks.marketing.hero

Prop Type Default Description
title string We invest in the world's potential The main heading text.
description string Here at Flowbite we focus on... The paragraph text below the heading.
badgeText string Flowbite is out! See what's new Text displayed in the badge link.
badgeLabel string New Label shown inside the badge pill.
badgeHref string # URL for the badge link.
primaryButtonText string Learn more Text for the primary CTA button.
primaryButtonHref string # URL for the primary CTA button.
secondaryButtonText string Watch video Text for the secondary CTA button.
secondaryButtonHref string # URL for the secondary CTA button.
badge slot - Named slot to replace the default badge markup.
actions slot - Named slot to replace the default action buttons.
slot slot - Default slot for additional content below the buttons.

Hero Visual x-fwb.blocks.marketing.hero-visual

Prop Type Default Description
title string Payments tool for software companies The main heading text.
description string From checkout to global sales tax... The paragraph text below the heading.
image string https://flowbite.s3...phone-mockup.png URL for the hero image displayed on the right side.
imageAlt string mockup Alt text for the hero image.
primaryButtonText string Get started Text for the primary CTA button.
primaryButtonHref string # URL for the primary CTA button.
secondaryButtonText string Speak to Sales Text for the secondary CTA button.
secondaryButtonHref string # URL for the secondary CTA button.
actions slot - Named slot to replace the default action buttons.
visual slot - Named slot to replace the default image with custom visual content.