CTA Sections

Call-to-action block components in various layouts: a simple text CTA, an image-based CTA with side-by-side layout, and a centered heading CTA.

Default CTA

Let's find more that brings us together.

Flowbite helps you connect with friends, family and communities of people who share your interests. Connecting with your friends and family as well as discovering new ones is easy with features like Groups.

Get started View more

Blade code

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

Custom CTA Properties

Ready to get started?

Join thousands of developers building with our components. Start your free trial today and see the difference.

Start free trial Learn more

Blade code

<x-fwb.blocks.marketing.cta
    title="Ready to get started?"
    description="Join thousands of developers building with our components. Start your free trial today and see the difference."
    primaryButtonText="Start free trial"
    primaryButtonHref="/register"
    secondaryButtonText="Learn more"
    secondaryButtonHref="/about"
/>

Default CTA with Image

dashboard image

Let's create more tools and ideas that brings us together.

Flowbite helps you connect with friends and communities of people who share your interests. Connecting with your friends and family as well as discovering new ones is easy with features like Groups.

Get started

Blade code

<x-fwb.blocks.marketing.cta-image />

Custom CTA Image Properties

project dashboard

Manage your projects with ease

Our dashboard gives you full visibility and control over all your projects, tasks, and team members in one place.

Try it now

Blade code

<x-fwb.blocks.marketing.cta-image
    title="Manage your projects with ease"
    description="Our dashboard gives you full visibility and control over all your projects, tasks, and team members in one place."
    image="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/cta-dashboard-mockup.svg"
    imageDark="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/cta-dashboard-mockup-dark.svg"
    imageAlt="project dashboard"
    buttonText="Try it now"
    buttonHref="/demo"
/>

Default CTA Heading

Start your free trial today

Try Flowbite Platform for 30 days. No credit card required.

Free trial for 30 days

Blade code

<x-fwb.blocks.marketing.cta-heading />

Custom CTA Heading Properties

Start your free trial today

Try our platform for 30 days. No credit card required.

Get started for free

Blade code

<x-fwb.blocks.marketing.cta-heading
    title="Start your free trial today"
    description="Try our platform for 30 days. No credit card required."
    buttonText="Get started for free"
    buttonHref="/register"
/>

Component Properties

CTA x-fwb.blocks.marketing.cta

Prop Type Default Description
title string Let's find more that brings us together. The CTA heading text.
description string Flowbite helps you connect with... The paragraph text below the heading.
primaryButtonText string Get started Text for the primary CTA button.
primaryButtonHref string # URL for the primary CTA button.
secondaryButtonText string View more Text for the secondary CTA button.
secondaryButtonHref string # URL for the secondary CTA button.
actions slot - Named slot to replace the default action buttons.

CTA Image x-fwb.blocks.marketing.cta-image

Prop Type Default Description
title string Let's create more tools and ideas... The CTA heading text.
description string Flowbite helps you connect with... The paragraph text below the heading.
image string https://flowbite.s3...cta-dashboard-mockup.svg URL for the light mode image.
imageDark string https://flowbite.s3...cta-dashboard-mockup-dark.svg URL for the dark mode image.
imageAlt string dashboard image Alt text for the images.
buttonText string Get started Text for the CTA button.
buttonHref string # URL for the CTA button.
visual slot - Named slot to replace the default image with custom visual content.
actions slot - Named slot to replace the default button.

CTA Heading x-fwb.blocks.marketing.cta-heading

Prop Type Default Description
title string Start your free trial today The centered heading text.
description string Try Flowbite Platform for 30 days... The paragraph text below the heading.
buttonText string Free trial for 30 days Text for the CTA button.
buttonHref string # URL for the CTA button.
actions slot - Named slot to replace the default button.