Call to action

Use the call to action pattern to draw a user's attention to something specific in your user interface.

Usage

When to use

Use a call to action in the following cases:

  • To encourage a user to navigate to a new location, context or even application.
  • To promote a campaign, advertisements, events etc.
  • To encourage a user to perform a desireable action, such as e.g. upgrade, sign in, download, feedback.

General construction

A call to action consists of the following elements:

Call to action construction

1. Icon or image, 2. Title, 3. Helper text, 4. Call to action, 5. Close/dismiss, 6. Background

1. Icon or image (optional)

  • An image or illustration that visually supports your call to action.

2. Title (optional)

  • Provide a compelling and descriptive title that attracts your client’s attention.

3. Helper text (optional)

  • A summary of benefits for your client, can be a paragraph or/and bullet points.
  • The body text can contain input fields.

4. Call to action

  • Provides the user with a hint for a next step.
  • Can be a link or a primary button to interact with, describing what the client will receive when following along.
  • It may contain more actions like “OK, understood” and “dismiss”; only one primary action intotal, though.

5. Close/Dismiss (optional)

  • Closes a call to action in case the client does not want to proceed.

6. Background (optional)

  • Should help the call to action visually stand out of the user interface.
  • It is recommended to use a similar styling for call to action patterns throughout an application.

Call to action in context

The screen should not be cluttered with multiple call to actions at once; try to avoid overwhelming the user.

Context button

Call to action as a single button

Context card

Call to action on a card

Context dialog

Call to action as a dialog

Context main area

Call to action in main area

Example use-cases

  • Getting started: Mostly used on landing pages.
  • Join us: Suggests to your users that they can become a part of something exclusive.
  • Learn more: To give your customers a little more information so they’re willing to buy or do something.
  • Sign up” This type of call to action invites the user to sign up for a trial, a future event or a software product.
  • Subscribe: This call to action invites the user to receive updates.
  • Try for free: This call to action allows people to try a product before deciding if they want to buy it.
  • Upgrade” This call to action allows people to upgrade to another package.

Delimitation

Do not use a call to action but other patterns in the following cases:

Do’s & Don’ts

All caps do

All caps don't

  • Do not use all-caps for your call to action.
  • Do not use a screen blocking call to action if the context of the parent page is crucial for decision making.

Style

This chapter shows several exemplary call to action styles in the design system.

Overview

Call to action in main area

Call to action in main area

Call to action on a card

Call to action on a card

To see a detailed explanation of all existing helper and size classes, please refer to the usage table below. The gradients used in the samples are only examplary implementations and can be customized to any needs through CSS as described below.

Call to action

image placeholder

Win a free MindSphere device!

Answer our short survey and win one out of 5 free virtual MindSphere IOT devices!
image placeholder

Win a free MindSphere device!

Answer our short survey and win one out of 5 free virtual MindSphere IOT devices!
<style>
    /* sample background gradient */
    .mdsp-defaults .callToAction.callToAction--demoBg1 { background: linear-gradient(90deg, rgba(var(--color-accentYellowLight), 1) 37%, rgba(var(--color-accentYellowDark), 1) 100%); }
    .mdsp-defaults .callToAction.callToAction--demoBg2 { background: linear-gradient(180deg, rgba(var(--color-charting02), 1) 0%, rgba(var(--color-charting04), 1) 100%); }
</style>

<div class="callToAction callToAction--demoBg2">
    <a class="callToAction__dismiss" href="#" title="Dismiss"></a>

    <div class="callToAction__visual">
        <img src="assets/images/plant.svg" alt="image placeholder" />
    </div>

    <h2 class="callToAction__title">
        Win a free MindSphere device!
    </h2>
    <div class="callToAction__description">
        Answer our short survey and win one out of 5 free virtual MindSphere IOT devices!
    </div>
    <div class="callToAction__callToAction">
        <form class="form">
            <input class="inputGroup__textInput" type="text" placeholder="Some additional input to capture" id="text-calltoaction01">
        </form>
        <a class="button button--primary" href="#"><span class="iconMdsp comment" aria-hidden="true"></span>Answer our survey</a><br />
        <a class="" href="#">No, thanks - not interested.</a>
    </div>
</div>

<div class="callToAction callToAction--demoBg1 callToAction--defaultBgBright">
    <a class="callToAction__dismiss" href="#" title="Dismiss"></a>

    <div class="callToAction__visual">
        <img src="assets/images/plant.svg" alt="image placeholder" />
    </div>

    <h2 class="callToAction__title">
        Win a free MindSphere device!
    </h2>
    <div class="callToAction__description">
        Answer our short survey and win one out of 5 free virtual MindSphere IOT devices!
    </div>
    <div class="callToAction__callToAction">
        <form class="form">
            <input class="inputGroup__textInput" type="text" placeholder="Some additional input to capture" id="text-calltoaction02">
        </form>
        <a class="button button--primary" href="#"><span class="iconMdsp comment" aria-hidden="true"></span>Answer our survey</a><br />
        <a class="button button--secondary" href="#">No, thanks - not interested.</a>
    </div>
</div>

Call to action in dialog

Call to action in card (grid)

Small call to action

As you can see in the example below, visual, dismiss, title and description are not displayed and not used in the small version of the call to action pattern, but might be used at a later point it time. Please don't use a primary button instead of a call to action pattern.

Call to action, small

Users: 5/5Users: 5/5
Users: 5/5
<div class="callToAction callToAction--small">
    <a class="callToAction__dismiss" href="#" title="Dismiss"></a>
    <div class="callToAction__visual">
    </div>
    <h2 class="callToAction__title">
    </h2>
    <div class="callToAction__description">
    </div>
    <div class="callToAction__callToAction">
        <a class="button button--primary" href="#"><span class="iconMdsp shoppingCart" aria-hidden="true"></span>Buy additional credits</a>
    </div>
</div>

Users: 5/5
<div class="callToAction callToAction--small">
    <div class="callToAction__callToAction">
        <button class="button button--primary"><span class="iconMdsp shoppingCart" aria-hidden="true"></span>Buy additional credits</button>
    </div>
</div>

Usage

ElementClassDescription
.callToAction .callToAction--defaultBgBright .callToAction--defaultBgDark Call to action patterns don't have a background texture by default. By using one of these classes the default background texture will be displayed in dark or bright variant (should be chosen to work with the background gradient used).
.callToAction .callToAction--small Hides dismiss, title, description and visual; only the call to action button itself will be displayed - if using a primary button, the appearance will be adapted accordingly.
.callToAction background: linear-gradient(90deg, rgba(var(--color-colorA), 1) 33%, rgba(var(--color-colorB), 1) 100%); } The gradient angle, color stops, number of colors etc can be set with CSS by modifying the CSS background property.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top