Call to action

Overview Style Guidelines Code Accessibility

Style

A call to action is text in a container or paired with an icon that directs users to new pages. Depending on the link, content, and hierarchy, a call to action can be used on its own or grouped with other calls to action.

Anatomy

Anatomy image showing calls to action with various annotation numbers
  1. Text label
  2. Container
  3. Border
  4. Icon

Theme

Calls to action are available in both light and dark themes.

Light and dark themes

Image of light theme Primary, Secondary, Brick, Default, and Default video variants
Image of dark theme Primary, Secondary, Brick, Default, and Default video variants

Bricks

The Brick variant includes a slot for an icon as well as an extra orientation.

Image of light theme Brick variants; one with text and no icon, one with an icon on the left of text, and one with an icon on top of text
Image of light theme Brick variants; one with text and no icon, one with an icon on the left of text, and one with an icon on top of text

Video variants

Primary, Secondary, and Default variants include a slot for a video icon. The video icon is the same color as the text label.

Image of Primary, Secondary, and Default variants with video icons to the right of text

White variants

Dark theme includes white variants if other variants are duplicative or if they violate accessibility guidelines.

Image of Primary and Primary video variants with a white background and black text and Default and Default video variants with white text

Configuration

All calls to action with a container have the same border radius, but the height and width vary based on the presence of icons and the amount of content. Calls to action in a row are horizontally centered.

Image of all variants with various specs like border radius, height, width, alignment, and more

Space

Space values are the same on all breakpoints for calls to action. To see space values when calls to action are grouped, go to the Guidelines page.

Image of Primary, Secondary, two Brick variants, and two Default variants with spacing values in between
Example Token Description
8 --rh-space-md 8px spacer
16 --rh-space-lg 16px spacer
24 --rh-space-xl 24px spacer

Interaction states

Interaction states are visual representations used to communicate the status of an element or pattern.

Hover

Image of light theme hover states
Image of dark theme hover states
Image of dark theme white variant hover states

Focus

Helpful tip

The Focus state has the same styles as the Hover state.
Image of light theme focus states
Image of dark theme focus states
Image of dark theme white variant focus states

Active

Helpful tip

The Active state has the same styles as the Hover state.
Image of light theme active states
Image of dark theme active states
Image of dark theme white variant active states
© 2021-2024 Red Hat, Inc. Deploys by Netlify
Scroll back to the top