Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Page Properties

Component type

Atom

Document status

Status
colourRedYellow
titleDRAFTIN REVIEW

Design source (in Figma)

CTA block

Author

nathan.mckean@reckitt.com (Unlicensed)

Responsible

Julia Boyarshchikova (Deactivated)

Introduction

Call to action block is aimed to attract attention and prompt the user to carry out an action. CTA is typically written as a command or action phrase and generally takes the form of a button or hyperlink.

...

Anatomy

For MVP as CTA Block only the CTA links should be taken. It can look like a button but it is still the link within designs submitted.

...

Stacked state is out of MVP scope

...

Usage

When to use

Buttons use a variety of sizes, colors, and iconography combinations.

Use a CTA block to motivate user for some actions or decisions that are important. They should be used throughout your UI, it can be used in situations where users need to :

  • trigger a new element to appear on the page,trigger a transition to an other page,

  • specify a new or next step in a process.

...

Do not use CTAs to submit a form, to confirm a change.

Do not use CTA as navigation links.

Do not use two CTAs at the same time.

Editorial

Props

Props of the CTA block base component are also available.

...

Useful materials

...