Documentation v1.0.0

CTA

---
title: CTA
description: These sections are designed to encourage users to take a specific action, such as signing up, making a purchase, or contacting the company.
toc: false
---

## Overview

"Call to Action" (CTA) blocks are sections on websites or applications designed to encourage users to take a specific action, such as signing up, making a purchase, or contacting the company. These blocks typically feature clear and compelling messages, prominent buttons, or links that guide users toward the desired action, helping to drive conversions and user engagement.

## Examples

Below are a few examples of “Call to Action” sections.

### Example 1

<Example
  html={`<section class="bg-body py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-md-center">
                <i class="ri-send-plane-fill text-primary fs-1"></i>
                <h2 class="mb-2">Get started now!</h2>
                <p class="lead text-muted mb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo!</p>
                <div class="d-flex justify-content-md-center gap-2">
                    <button class="btn btn-lg btn-primary">Get started</button>
                    <button class="btn btn-lg btn-outline-secondary">Learn more</button>
                </div>
            </div>
        </div>
    </div>
</section>`}
/>

### Example 2

<Example
  html={`<section class="bg-body py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-bg-primary rounded-4 p-4 p-md-5">
                <div class="row align-items-center g-4">
                    <div class="col-md-9">
                        <h2 class="mb-2">Get started now!</h2>
                        <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo!</p>
                    </div>
                    <div class="col-md-3 d-flex">
                        <button class="btn btn-lg btn-secondary text-nowrap ms-md-auto">Get started</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>`}
/>

### Example 3

<Example
  html={`<section class="bg-body py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-md-center text-bg-primary rounded-4 p-4 p-md-5">
                <h2 class="fs-5 text-secondary text-uppercase fw-medium mb-3">Get started</h2>
                <h3 class="h2 fw-medium mb-4">Unlock all the possibilities that await you! Take the first step towards achieving your goals.</h3>
                <button class="btn btn-lg btn-secondary text-nowrap">Get started</button>
            </div>
        </div>
    </div>
</section>`}
/>

### Example 4

<Example
  html={`<section class="bg-primary-subtle p-4 p-md-5">
    <div class="container text-center">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <h2 class="fs-5 text-primary text-uppercase fw-medium mb-3">Get started</h2>
                <h3 class="h2 mb-4">Subscribe to our newsletter today!</h3>
                <form class="row justify-content-center g-2">
                    <div class="col-md-8 col-lg-6 col-xl-4">
                        <input
                            type="email"
                            class="form-control form-control-lg"
                            placeholder="Enter your email"
                            required
                        >
                    </div>
                    <div class="col-sm-auto">
                        <button type="submit" class="btn btn-lg btn-primary w-100 w-sm-auto">
                            Subscribe
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>`}
/>

### Example 5

<Example
  html={`<section class="bg-body py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <img
                src="https://placehold.co/540x540/31343C/EEE?text=Placeholder+Image"
                class="img-fluid rounded-4"
                alt="Call to Action Image"
                />
            </div>
            <div class="col-lg-6">
                <h2 class="mb-2">Start your journey today!</h2>
                <p class="text-muted mb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo!</p>
                <div class="d-flex gap-2">
                    <button class="btn btn-lg btn-primary">
                        <i class="ri-download-2-line me-2"></i>Download
                    </button>
                    <button class="btn btn-lg btn-outline-secondary">
                        <i class="ri-information-line me-2"></i>Learn more
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>`}
/>

### Example 6

<Example
  html={`<section class="bg-body py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <h2 class="mb-2">Join us on this <span class="underline success">adventure</span> today!</h2>
                <p class="text-muted mb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit lorum quibus libero corporis.</p>
                <div class="row mb-2">
                  <div class="col-md-6">
                    <ul class="list-unstyled text-muted mb-2">
                      <li class="mb-2">
                        <i class="ri-checkbox-circle-line text-success me-1"></i>Top-notch security
                      </li>
                      <li>
                        <i class="ri-checkbox-circle-line text-success me-1"></i>24/7 support
                      </li>
                    </ul>
                  </div>
                  <div class="col-md-6">
                    <ul class="list-unstyled text-muted mb-2">
                      <li class="mb-2">
                        <i class="ri-checkbox-circle-line text-success me-1"></i>Regular updates
                      </li>
                      <li>
                        <i class="ri-checkbox-circle-line text-success me-1"></i>Multi-language
                      </li>
                    </ul>
                  </div>
                </div>
                <form class="d-flex gap-2 mb-2">
                    <input
                        type="email"
                        class="form-control form-control-lg"
                        placeholder="Enter your email"
                        required
                    >
                    <button type="submit" class="btn btn-lg btn-primary text-nowrap">
                        Join Now
                    </button>
                </form>
                <p class="text-muted small mb-0">*We respect your privacy. No spam, ever.</p>
            </div>
            <div class="col-lg-5 offset-lg-1">
                <img
                  src="https://placehold.co/540x540/31343C/EEE?text=Placeholder+Image"
                  class="object-fit-cover rounded-4 w-100"
                  alt="Call to Action Image"
                />
            </div>
        </div>
    </div>
</section>`}
/>

### Example 7

<Example
  html={`<section class="text-light position-relative my-5" style="background-image: url('https://placehold.co/1200x440/31343C/EEE?text=Placeholder+Image'); background-size: cover; background-position: center;">
    <div class="position-absolute top-0 start-0 w-100 h-100" style="background-color: rgba(0, 0, 0, 0.5);"></div>
    <div class="container text-md-center position-relative py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <i class="ri-lightbulb-flash-fill text-light display-4"></i>
                <h2 class="mt-2 mb-3">Unlock all the possibilities that await you!</h2>
                <p class="lead mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo!</p>
                <button class="btn btn-lg btn-secondary">
                    <i class="ri-sparkling-2-fill me-2"></i>Get started
                </button>
            </div>
        </div>
    </div>
</section>`}
/>

These sections are designed to encourage users to take a specific action, such as signing up, making a purchase, or contacting the company.

Overview

Examples

Below are a few examples of “Call to Action” sections.

Example 1

Get started now!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo!

<section class="bg-body py-5">
  <div class="container">
      <div class="row justify-content-center">
          <div class="col-lg-8 text-md-center">
              <i class="ri-send-plane-fill text-primary fs-1"></i>
              <h2 class="mb-2">Get started now!</h2>
              <p class="lead text-muted mb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo!</p>
              <div class="d-flex justify-content-md-center gap-2">
                  <button class="btn btn-lg btn-primary">Get started</button>
                  <button class="btn btn-lg btn-outline-secondary">Learn more</button>
              </div>
          </div>
      </div>
  </div>
</section>

Example 2

Get started now!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo!

<section class="bg-body py-5">
  <div class="container">
      <div class="row justify-content-center">
          <div class="col-lg-8 text-bg-primary rounded-4 p-4 p-md-5">
              <div class="row align-items-center g-4">
                  <div class="col-md-9">
                      <h2 class="mb-2">Get started now!</h2>
                      <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo!</p>
                  </div>
                  <div class="col-md-3 d-flex">
                      <button class="btn btn-lg btn-secondary text-nowrap ms-md-auto">Get started</button>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>

Example 3

Get started

Unlock all the possibilities that await you! Take the first step towards achieving your goals.

<section class="bg-body py-5">
  <div class="container">
      <div class="row justify-content-center">
          <div class="col-lg-8 text-md-center text-bg-primary rounded-4 p-4 p-md-5">
              <h2 class="fs-5 text-secondary text-uppercase fw-medium mb-3">Get started</h2>
              <h3 class="h2 fw-medium mb-4">Unlock all the possibilities that await you! Take the first step towards achieving your goals.</h3>
              <button class="btn btn-lg btn-secondary text-nowrap">Get started</button>
          </div>
      </div>
  </div>
</section>

Example 4

Get started

Subscribe to our newsletter today!

<section class="bg-primary-subtle p-4 p-md-5">
  <div class="container text-center">
      <div class="row justify-content-center">
          <div class="col-lg-8">
              <h2 class="fs-5 text-primary text-uppercase fw-medium mb-3">Get started</h2>
              <h3 class="h2 mb-4">Subscribe to our newsletter today!</h3>
              <form class="row justify-content-center g-2">
                  <div class="col-md-8 col-lg-6 col-xl-4">
                      <input
                          type="email"
                          class="form-control form-control-lg"
                          placeholder="Enter your email"
                          required
                      >
                  </div>
                  <div class="col-sm-auto">
                      <button type="submit" class="btn btn-lg btn-primary w-100 w-sm-auto">
                          Subscribe
                      </button>
                  </div>
              </form>
          </div>
      </div>
  </div>
</section>

Example 5

Start your journey today!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo!

<section class="bg-body py-5">
  <div class="container">
      <div class="row align-items-center">
          <div class="col-lg-6 mb-4 mb-lg-0">
              <img
              src="https://placehold.co/540x540/31343C/EEE?text=Placeholder+Image"
              class="img-fluid rounded-4"
              alt="Call to Action Image"
              />
          </div>
          <div class="col-lg-6">
              <h2 class="mb-2">Start your journey today!</h2>
              <p class="text-muted mb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo!</p>
              <div class="d-flex gap-2">
                  <button class="btn btn-lg btn-primary">
                      <i class="ri-download-2-line me-2"></i>Download
                  </button>
                  <button class="btn btn-lg btn-outline-secondary">
                      <i class="ri-information-line me-2"></i>Learn more
                  </button>
              </div>
          </div>
      </div>
  </div>
</section>

Example 6

Join us on this adventure today!

Lorem ipsum dolor sit amet consectetur adipisicing elit lorum quibus libero corporis.

Top-notch security
24/7 support

Regular updates
Multi-language

*We respect your privacy. No spam, ever.

<section class="bg-body py-5">
  <div class="container">
      <div class="row align-items-center">
          <div class="col-lg-6 mb-4 mb-lg-0">
              <h2 class="mb-2">Join us on this <span class="underline success">adventure</span> today!</h2>
              <p class="text-muted mb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit lorum quibus libero corporis.</p>
              <div class="row mb-2">
                <div class="col-md-6">
                  <ul class="list-unstyled text-muted mb-2">
                    <li class="mb-2">
                      <i class="ri-checkbox-circle-line text-success me-1"></i>Top-notch security
                    </li>
                    <li>
                      <i class="ri-checkbox-circle-line text-success me-1"></i>24/7 support
                    </li>
                  </ul>
                </div>
                <div class="col-md-6">
                  <ul class="list-unstyled text-muted mb-2">
                    <li class="mb-2">
                      <i class="ri-checkbox-circle-line text-success me-1"></i>Regular updates
                    </li>
                    <li>
                      <i class="ri-checkbox-circle-line text-success me-1"></i>Multi-language
                    </li>
                  </ul>
                </div>
              </div>
              <form class="d-flex gap-2 mb-2">
                  <input
                      type="email"
                      class="form-control form-control-lg"
                      placeholder="Enter your email"
                      required
                  >
                  <button type="submit" class="btn btn-lg btn-primary text-nowrap">
                      Join Now
                  </button>
              </form>
              <p class="text-muted small mb-0">*We respect your privacy. No spam, ever.</p>
          </div>
          <div class="col-lg-5 offset-lg-1">
              <img
                src="https://placehold.co/540x540/31343C/EEE?text=Placeholder+Image"
                class="object-fit-cover rounded-4 w-100"
                alt="Call to Action Image"
              />
          </div>
      </div>
  </div>
</section>


                        <section class="bg-body py-5"> <div class="container"> <div
                        class="row align-items-center"> <div class="col-lg-6 mb-4 mb-lg-0">
                        <h2 class="mb-2">Join us on this <span class="underline
                        success">adventure</span> today!</h2> <p class="text-muted
                        mb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit lorum quibus libero
                        corporis.</p> <div class="row mb-2"> <div
                        class="col-md-6"> <ul class="list-unstyled text-muted mb-2"> <li
                        class="mb-2"> <i class="ri-checkbox-circle-line text-success
                        me-1"></i>Top-notch security </li> <li> <i
                        class="ri-checkbox-circle-line text-success me-1"></i>24/7 support
                        </li> </ul> </div> <div class="col-md-6"> <ul
                        class="list-unstyled text-muted mb-2"> <li class="mb-2"> <i
                        class="ri-checkbox-circle-line text-success me-1"></i>Regular updates
                        </li> <li> <i class="ri-checkbox-circle-line text-success
                        me-1"></i>Multi-language </li> </ul> </div> </div>
                        <form class="d-flex gap-2 mb-2"> <input type="email"
                        class="form-control form-control-lg" placeholder="Enter your email" required
                        > <button type="submit" class="btn btn-lg btn-primary text-nowrap">
                        Join Now </button> </form> <p class="text-muted small mb-0">*We
                        respect your privacy. No spam, ever.</p> </div> <div class="col-lg-5
                        offset-lg-1"> <img
                        src="https://placehold.co/540x540/31343C/EEE?text=Placeholder+Image"
                        class="object-fit-cover rounded-4 w-100" alt="Call to Action Image" />
                        </div> </div> </div> </section>

Example 7

Unlock all the possibilities that await you!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo!

<section class="text-light position-relative my-5" style="background-image: url('https://placehold.co/1200x440/31343C/EEE?text=Placeholder+Image'); background-size: cover; background-position: center;">
  <div class="position-absolute top-0 start-0 w-100 h-100" style="background-color: rgba(0, 0, 0, 0.5);"></div>
  <div class="container text-md-center position-relative py-5">
      <div class="row justify-content-center">
          <div class="col-lg-8">
              <i class="ri-lightbulb-flash-fill text-light display-4"></i>
              <h2 class="mt-2 mb-3">Unlock all the possibilities that await you!</h2>
              <p class="lead mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo!</p>
              <button class="btn btn-lg btn-secondary">
                  <i class="ri-sparkling-2-fill me-2"></i>Get started
              </button>
          </div>
      </div>
  </div>
</section>

CTA

Overview

Examples

Example 1

Get started now!

Example 2

Get started now!

Example 3

Get started

Unlock all the possibilities that await you! Take the first step towards achieving your goals.

Example 4

Get started

Subscribe to our newsletter today!

Example 5

Start your journey today!

Example 6

Join us on this adventure today!

Example 7

Unlock all the possibilities that await you!

Admin

Themes

Other