CTA Blocks

More than 10 customizable CTA blocks are awaiting for you to build your own layouts, pages, and content.

Block A

Block A variation 1

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block A

Block A variation 2

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block A

Block A variation 3

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Biggest companies using our product

Client logo
Client logo
Client logo
Client logo
Client logo

Block A

Block A variation 4

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Biggest companies using our product

Client logo
Client logo
Client logo
Client logo
Client logo

Block A

Block A variation 5

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Biggest companies using our product

Client logo
Client logo
Client logo
Client logo
Client logo

Block A

Block A variation 6

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Biggest companies using our product

Client logo
Client logo
Client logo
Client logo
Client logo

Block A

Block A variation 7

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Biggest companies using our product

Client logo
Client logo
Client logo
Client logo
Client logo

Block A

Block A variation 8

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Biggest companies using our product

Client logo
Client logo
Client logo
Client logo
Client logo

Block A Props

Available props for block A


<script setup lang="ts">
import { customerLogos2 } from '/@src/data/pages/logos'
</script>

<template>
  <CtaBlockA
    title="Ready To Go?"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam
    dissimile?"
    cta-primary="Get Started"
    cta-primary-link="index"
    cta-secondary="Learn More"
    cta-secondary-link="index"
    :logos="customerLogos2"
    boxed
    shapes
    animated
    color="darker"
  />
</template>

Block B

Block B variation 1

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Schedule a Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block B

Block B variation 2

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Schedule a Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block B

Block B variation 3

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Schedule a Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block B

Block B variation 4

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Schedule a Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block B

Block B variation 5

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Schedule a Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block B

Block B variation 6

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Schedule a Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block B

Block B variation 7

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Schedule a Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block B Props

Available props for block B


<template>
  <CtaBlockB
    title-primary="Start Building"
    content-primary="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?"
    cta-primary="Free Trial"
    cta-primary-link="index"
    title-secondary="Schedule a Demo"
    content-secondary="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?"
    cta-secondary="Contact Team"
    cta-secondary-link="index"
    boxed
    shapes
    animated
    color="darker"
  />
</template>

Block C

Block C variation 1

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini. Quae cum dixisset paulumque?

Block C

Block C variation 2

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini. Quae cum dixisset paulumque?

Block C

Block C variation 3

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini. Quae cum dixisset paulumque?

Block C

Block C variation 4

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini. Quae cum dixisset paulumque?

Block C

Block C variation 5

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini. Quae cum dixisset paulumque?

Block C

Block C variation 6

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini. Quae cum dixisset paulumque?

Block C

Block C variation 6

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini. Quae cum dixisset paulumque?

Block C Props

Available props for block C


<template>
  <CtaBlockC
    title="Ready To Go?"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam
      dissimile homini. Quae cum dixisset paulumque?"
    shapes
    animated
    inverted
  >
    <Buttons>
      <Button color="primary" :long="2" raised bold>Subscribe</Button>
      <Button :long="2" raised bold>Learn More</Button>
    </Buttons>
  </CtaBlockC>
</template>

Block D

Block D variation 1

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis est tam dissimile homini. Quae cum.

Block D

Block D variation 2

Ready To Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis est tam dissimile homini. Quae cum.

Block D Props

Available props for block D


<template>
  <CtaBlockD
    title="Ready To Go?"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit quis est tam
      dissimile homini. Quae cum."
    inverted
  >
    <Buttons>
      <Button color="primary" :long="2" bold raised>Get Started</Button>
      <Button :long="2" bold raised>Learn More</Button>
    </Buttons>
  </CtaBlockD>
</template>         

Block E

Block E variation 1

"Lorem ipsum dolor sit amet, consectetur adipiscing elit quis est tam dissimile homini. Quae cum."

Ready to Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini quae cum dixisset.

Block E

Block E variation 1

"Lorem ipsum dolor sit amet, consectetur adipiscing elit quis est tam dissimile homini. Quae cum."

Ready to Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini quae cum dixisset.

Block E Props

Available props for block E


<template>
  <CtaBlockE
    title="Ready to Go?"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est
          tam dissimile homini quae cum dixisset."
    text="Lorem ipsum dolor sit amet, consectetur adipiscing elit quis est tam
      dissimile homini. Quae cum."
    cta="Get Started"
    cta-link="index"
    inverted
  />
</template>          

Block F

Block F variation 2

Ready to Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini quae cum dixisset.

Block F

Block F variation 3

Ready to Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini quae cum dixisset.

Block F

Block F variation 4

Ready to Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini quae cum dixisset.

Block F

Block F variation 5

Ready to Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini quae cum dixisset.

Block F

Block F variation 6

Ready to Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini quae cum dixisset.

Block F

Block F variation 7

Ready to Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini quae cum dixisset.

Block F

Block F variation 8

Ready to Go?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile homini quae cum dixisset.

Block F Props

Available props for block F


<template>
  <CtaBlockF
    title="Ready to Go?"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est
          tam dissimile homini quae cum dixisset."
    background="/demo/img/color/7.jpg"
    overlay
    alignment="right"
    cta="Get Started"
    cta-link="index"
  />
</template>       

Block G

Block G variation 1

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block G

Block G variation 2

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block G

Block G variation 3

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block G

Block G variation 4

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block G Props

Available props for block G


<template>
  <CtaBlockG
    title="Start Building"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?"
    image="https://dummyimage.com/800x600.jpg"
    dark-image="https://dummyimage.com/800x600.jpg"
    inverted
  >
    <Field grouped>
      <Control expanded icon="feather:mail">
        <VInput placeholder="Email Address" inverted />
      </Control>
      <Control>
        <Button size="form" color="primary" :long="2" bold raised>Sign Up</Button>
      </Control>
    </Field>
  </CtaBlockG>
</template>     

Block H

Block H variation 1

UI Framework

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Cta image

Block H

Block H variation 2

UI Framework

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block H Props

Available props for block H


<template>
  <!--image variation-->
  <CtaBlockH
    small-text="UI Framework"
    title="Start Building"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?"
    image="/@src/assets/illustrations/apps/apps-slant.png"
    dark-image="/@src/assets/illustrations/apps/apps-slant.png"
  >
    <Buttons>
      <Button :to="'index'" color="primary" :long="2" bold raised>Get Started</Button>
      <Button :to="'index'" :long="2" bold raised>Learn More</Button>
    </Buttons>
  </CtaBlockH>

  <!--background variation-->
  <CtaBlockH
    small-text="UI Framework"
    title="Start Building"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?"
    background="https://dummyimage.com/940x650.jpg"
  >
    <Buttons>
      <Button :to="'index'" color="primary" :long="2" bold raised>Get Started</Button>
      <Button :to="'index'" :long="2" bold raised>Learn More</Button>
    </Buttons>
  </CtaBlockH>
</template>   

Block I

Block I variation 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis est tam dissimile homini. Quae cum.

Get Started

Fill in the form below to get started with our application.

Full Name
Email Address
Password

Block I

Block I variation 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis est tam dissimile homini. Quae cum.

Get Started

Fill in the form below to get started with our application.

First Name
Last Name
Email Address
Password
Repeat Password

Block I Props

Available props for block I


<template>
  <CtaBlockI
    title="Get Started"
    subtitle="Fill in the form below to get started with our application."
  >
    <template #content>
      <p class="paragraph rem-125 max-w-5 b-centered-tablet-p">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit quis est tam
        dissimile homini. Quae cum.
      </p>
    </template>
    <template #form>
      <form class="py-4">
        <div class="columns is-multiline">
          <div class="column is-6">
            <Field>
              <FieldLabel label="First Name">First Name</FieldLabel>
              <Control icon="feather:user">
                <VInput />
              </Control>
            </Field>
          </div>
          <div class="column is-6">
            <Field>
              <FieldLabel label="Last Name">Last Name</FieldLabel>
              <Control icon="feather:user">
                <VInput />
              </Control>
            </Field>
          </div>
          <div class="column is-12">
            <Field>
              <FieldLabel label="Email Address">Email Address</FieldLabel>
              <Control icon="feather:mail">
                <VInput />
              </Control>
            </Field>
          </div>
          <div class="column is-6">
            <Field>
              <FieldLabel label="Password">Password</FieldLabel>
              <Control icon="feather:lock">
                <VInput type="password" />
              </Control>
            </Field>
          </div>
          <div class="column is-6">
            <Field>
              <FieldLabel label="Password">Repeat Password</FieldLabel>
              <Control icon="feather:lock">
                <VInput type="password" />
              </Control>
            </Field>
          </div>
          <div class="column is-12">
            <Field class="pt-4">
              <Control>
                <Buttons alignment="centered">
                  <Button :to="'index'" color="primary" fullwidth bold raised>Get Started</Button>
                </Buttons>
              </Control>
            </Field>
          </div>
        </div>
      </form>
    </template>
  </CtaBlockI>
</template>  

Block J

Block J variation 1

14-Day Trial

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block J

Block J variation 1

14-Day Trial

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block J

Block J variation 1

14-Day Trial

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block J

Block J variation 1

14-Day Trial

Start Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?

Block J Props

Available props for block J


<template>
  <CtaBlockJ
    small-text="14-Day Trial"
    title="Start Building"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?"
  >
    <Buttons alignment="centered">
      <Button :to="'index'" color="primary" :long="2" bold raised>Get Started</Button>
      <Button :to="'index'" :long="2" bold raised>Learn More</Button>
    </Buttons>
  </CtaBlockJ>
</template>