Archived version of the User Experience Toolkit for Insights Hub and Industrial IoT website, version 2.8.1

# 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:

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.

Call to action as a single button

Call to action on a card

Call to action as a dialog

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:

- Empty state
- Message
- Notification

### Do’s & Don’ts

- 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 User Experience Toolkit.

### Overview

Call to action in main area

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

## Win a free device!

Answer our short survey and win one out of 5 free virtual devices!
Answer our survey
No, thanks - not interested.

## Win a free device!

Answer our short survey and win one out of 5 free virtual devices!
Answer our survey
No, thanks - not interested.

    <style>
        /* sample background gradient */
        .uxt-defaults .callToAction.callToAction--demoBg1 {
            background: linear-gradient(90deg, rgba(var(--color-charting15), 1) 37%, rgba(var(--color-charting16), 1) 100%);
        }

        .uxt-defaults .callToAction.callToAction--demoBg2 {
            background: linear-gradient(180deg, rgba(var(--color-charting02), 1) 0%, rgba(var(--color-charting04), 0.5) 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 device!
        </h2>
        <div class="callToAction__description">
            Answer our short survey and win one out of 5 free virtual 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="iconUxt 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 device!
        </h2>
        <div class="callToAction__description">
            Answer our short survey and win one out of 5 free virtual 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="iconUxt 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

Open demo

    <style>
        /* sample background gradient */
        .uxt-defaults .callToAction.callToAction--demoBg1 { background: linear-gradient(90deg, rgba(var(--color-charting15), 1) 37%, rgba(var(--color-charting16), 1) 100%); }
    </style>

    <div class="dialog is-shown dialog--frameless">
        <div class="dialog__overlay"></div>
        <div class="dialog__container">
            <div class="dialog__background">
                <section class="dialog__content">
                    <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 device!
                        </h2>
                        <div class="callToAction__description">
                            Answer our short survey and win one out of 5 free virtual IOT devices!
                        </div>
                        <div class="callToAction__callToAction">
                            <form class="form">
                                <input class="inputGroup__textInput" type="text" placeholder="Some additional input to capture" id="text-input01">
                            </form>
                            <a class="button button--primary" href="#"><span class="iconUxt comment" aria-hidden="true"></span>Answer our survey</a><br />
                            <a class="button button--secondary" href="#">No, thanks - not interested.</a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>

## Call to action in card (grid)

Open demo

    <style>
        /* sample background gradient */
        .uxt-defaults .callToAction.callToAction--demoBg1 { background: linear-gradient(90deg, rgba(var(--color-charting15), 1) 37%, rgba(var(--color-charting16), 1) 100%); }
        .uxt-defaults .callToAction.callToAction--demoBg2 { background: linear-gradient(180deg, rgba(var(--color-charting02), 1) 0%, rgba(var(--color-charting04), 1) 100%); }
    </style>

    <div class="cards cards--simpleGrid">
        <div class="cards__row">
            <div class="cards__col">

                <div class="card">

                    <div class="card__content">

                        <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 device!
                            </h2>
                            <div class="callToAction__description">
                                Answer our short survey and win one out of 5 free virtual 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="iconUxt comment" aria-hidden="true"></span>Answer our survey</a><br />
                                <a class="" href="#">No, thanks - not interested.</a>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
            <div class="cards__col">
                <div class="card">
                    <div class="card__header">
                    </div>
                    <div class="card__content">
                    </div>
                    <div class="card__footer">
                    </div>
                </div>
            </div>
        </div>

        <div class="cards__row">
            <div class="cards__col">
                <div class="card">
                    <div class="card__content">

                    </div>
                </div>
            </div>
            <div class="cards__col">
                <div class="card">
                    <div class="card__header">
                    </div>
                    <div class="card__content">
                    </div>
                    <div class="card__footer">
                    </div>
                </div>
            </div>
            <div class="cards__col">

                <div class="card ">
                    <div class="card__content card__content--autogrow">

                        <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 device!
                            </h2>
                            <div class="callToAction__description">
                                Answer our short survey and win one out of 5 free virtual 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="iconUxt comment" aria-hidden="true"></span>Answer our survey</a><br />
                                <a class="button button--secondary" href="#">No, thanks - not interested.</a>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

    </div>

# 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/5

##

Buy additional credits
Users: 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="iconUxt 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="iconUxt shoppingCart" aria-hidden="true"></span>Buy additional credits</button>
        </div>
    </div>

#### Usage

Element | Class | Description
--- | --- | ---
`.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.

- Message
- Notification
- Empty state area

Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top