Ripple Design System

Call to action

The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.

Usage

Use the call to action card to give a brief summary of content or a task. The call to action card features a button highlighting the call to action.

Use it to give your call to action more visual prominence. The call to action card can guide users to perform a preferred action.

When and how to use

  • Use clear and concise content.
  • Ensure content is relevant to the action or destination.
  • Embed in any body content area of a content page.
  • Use with a relevant image or graphic.

When and how not to use

  • Don’t use without an image or graphic.
  • Don’t overload it with content.
  • Don’t use when a large amount of text is needed for more context.
  • Don’t use other interactive elements, like links.

Theming

The call to action card adopts its theming from your button component’s settings.

If you choose neutral button for your site, the call to action card will display buttons in the neutral theme.

To create your own theme, see theming guidance for designers or theming guidance for developers.


Propose a change to this page on GitHub.