Sections

Create call-to-actions

Call-to-action sections highlight important actions to your visitors and can help improve overall customer experience.

A common action taken by end-users is to submit a new request through the Help Center. A simple call-to-action can be created to present this option using our container and button elements along with some basic utiltiies:

  • <div class="relative bg-primary bg-repeat" style="background-image: url('{{asset 'background.svg'}}');">
      <div class="container relative text-center text-white py-6">
        <h3 class="h1 lg:font-size-4xl text-inherit">
          Still have questions?
        </h3>
        {{#link 'new_request' class='button button-translucent button-large font-size-lg my-4' role='button'}}
          Contact us
        {{/link}}
      </div>
    </div>

Because the container is simply responsible for providing the overall structure, you can add whatever elements and content you like to it. The example below seen in our Pierce theme uses a two-column layout to display an image alongside the call-to-action message:

  • <div class="bg-gray-200">
      <div class="container">
        <div class="py-6" id="contact-us">
          <div class="row row-flush align-items-center">
            <div class="md:col-6">
              <img class="img-fluid py-6 md:pr-8" src="{{asset 'background.svg'}}" alt="{{t 'submit_a_request'}}" />
            </div>
            <div class="md:col-6">
              <h2 class="font-size-5xl line-height-tight">
                Get help from our Support team
              </h2>
              <p class="font-size-2xl my-6 font-light">
                We have experts ready to help you with whatever questions you have.
              </p>
              {{#link 'new_request' class='button button-primary button-lg font-size-xl mb-6 py-3 px-6' role='button'}}
                Contact us
              {{/link}}
            </div>
          </div>
        </div>
      </div>
    </div>

For businesses that provide support across multiple channels, contact options can be presented using a similar approach:

Browse our call-to-action patterns and theme collection for more examples.

Questions or feedback about this guide? Let us know