Missouri State University Pattern Library

Call to action

A call to action prompts a specific action from the user. Call to actions are typically clickable buttons that, when clicked, perform an action or may lead to another webpage that requests an action.

The call to action component is part of the hero block snippet, but it may also be used alone as a component or paired with other elements. It may be left aligned or centered.

The centered version is often used as a dividing element between sections within a marketing landing page. It may or may not have the button.

Build a Call to Action Block in Modern Campus CMS.

<div class="ContentBlock call-to-action">
    <div class="eyebrow">Lorem ipsum</div>
    <h2 class="headline">Lorem ipsum dolor sit amet consectetur</h2>
    <div class="description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero odio, optio deserunt quam maxime quos et impedit consectetur laboriosam nemo ut odit alias? Quod culpa necessitatibus assumenda, quo accusantium consequuntur.</div>
    <div class="link-bar">
        <ul class="container">
            <li>
                <a href="#" class="button">Lorem ipsum</a>
            </li>
        </ul>
    </div>
</div>
 
<div class="ContentBlock call-to-action">
  {{#if eyebrow}}
    <div class="eyebrow">{{eyebrow.text}}</div>
  {{/if}}
  <h2 class="headline">{{headline}}</h2>
  {{#if description}}
    <div class="description">{{description}}</div>
  {{/if}}
  {{#>description custom}}
    {{/description}}
    {{#if linkBar}}
      {{render '@link-bar' linkBar}}
    {{/if}}
</div>
 
{
  "eyebrow": {
    "text": "Lorem ipsum"
  },
  "headline": "Lorem ipsum dolor sit amet consectetur",
  "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero odio, optio deserunt quam maxime quos et impedit consectetur laboriosam nemo ut odit alias? Quod culpa necessitatibus assumenda, quo accusantium consequuntur.",
  "linkBar": {
    "link": [
      {
        "text": "Lorem ipsum",
        "url": "#"
      }
    ]
  }
}