*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

« Previous Version 5 Next »


The Call to Action block is used to draw a users attention and to an action they can carry out or link to more relevant information. CTA’s are typically written as commands or action generally takes the form of a button or hyperlink.

Usage

Do’s

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

    • trigger a transition to an other page,

    • specify a new or next step in a process.

Dont's

  • 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.

Anatomy

Insert image here

Item

Component type

Content type

Notes

1

2

3

Visual style

States

CTA block has 2 states that define their layout: Stacked and Not-stacked

Editorial

TBD

Behaviour

n/a

Accessibility

n/a

Related components

Button

A very brief description

A very brief description


  • No labels