Skip to Main Content

Pelican Design System icon Pelican Design System Call to Action, Single

Call to Action, Single

A simple imperative statement with an action button.

Edit on GitHub

On this page:

Best Practices

Use this when you’re ready to direct the reader to take an action, like signing up.

  • The big text is the action verb for the goal you have for the user. Use this to direct the user an action. This is a decision moment, don’t put a lot of text in here.
  • A Call-to-Action is not navigation. It’s a persuasion item with a link to what you want the user to do.

Usage

Big Text.

This is smaller text which explains this block.

Button Text 
<div class="feature-cta">
  <div class="container">
    <div class="row justify-content-center align-items-center">
      <div class="col-10 col-md-6">
        <h2 class="feature-big-text">Big Text.</h2>
        <p class="feature-small-text">This is smaller text which explains this block.</p>
      </div>
      <div class="col-10 col-md-6">
        <a href="https://google.com" class="btn btn-primary btn-lg">Button Text</a>
      </div>
    </div>
  </div>
</div>
Next
Page top