---
title: Call to action
description: A card promoting a specific piece of content featuring a button highlighting the call to action.
layout: page
label: Core
links:
- text: Figma
  url: #colour
- text: Storybook
  url: #component
---

## Usage
The Call to Action card is used to provide a brief summary of content or a task. It features a button highlighting the call to action.

Use it to give the call to action more visual prominence. This can be used to guide users to perform a preferred action.

::DocsExample
---
id: core-navigation-card--call-to-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 the button component.

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


::DocsThemeChooser
  ::DocsExample
  ---
  id: core-navigation-card--call-to-action
  ---
  ::
::

To create your own theme, see [theming guidance for designers]() or [theming guidance for developers]().
