Call to action
Overview
A Call to action is a styled link that directs a user to other pages or sometimes displays hidden content.
Sample components
Component status
Demo
View a live version of this component and see how it can be customized.
Style
Variants
There are several call to action variants available for use depending on what you want a user to select.
Primary
Use for the primary or most important link. This variant is the highest in hierarchy and can also be used to play a video in a Modal or large container.
Primary (video)
Used only to play an important video in a Modal or large container. Do not use without a background underneath or use the Primary or Default, video variants instead.
Primary (white)
Use if the red variant conflicts with other elements or violates accessibility standards. Use on dark backgrounds, otherwise use the Secondary variant instead.
Secondary
Use for secondary or general links. This variant is lower in hierarchy than the Primary variant and can be used multiple times in the same container or layout.
Brick
Use to group links together. Only the Brick variant can stretch to fit a container or grid, otherwise the text label padding in other variants stays the same.
Brick (icon)
Use to group links with icons together. Only the Brick variant can stretch to fit a container or grid, otherwise the text label padding in other variants stays the same.
Default
Use for tertiary or the least important links. This variant is the lowest in hierarchy and can be used multiple times in the same container or layout.
Default (video)
Use to play less important videos in a Modal only. This variant is the lowest in hierarchy and can be used multiple times in the same container or layout.
Theme
Light theme
Dark theme
Usage
Call to action links are best used to entice a user to make a selection. For example, use the Primary variant to bring attention to an important link or use the Brick variant to group links together in a grid.
Hierarchy
Call to action links are ordered by hierarchy from left to right (large screens) or left to right and top to bottom (small screens). They can be used multiple times in the same container except for the Primary variants.
Navigation vs. action
Even though they look similar, call to action links and buttons have important differences. Call to action links are navigational elements whereas buttons perform actions.
Learn more
Visit the Button component page to learn more about how to use buttons.
- Call to action links are used in layouts (like the home page) whereas buttons are used in components (like a Form).
- Call to action link text labels are larger and thicker than button text labels.
- Call to action links with containers include more padding than buttons with containers.
- Call to action link colors have different meanings than button colors.
Content
Call to action links are navigational elements, so any text needs to accurately communicate the destination. Inconsistent experiences might lead to distrust, lessening the satisfaction of a user during their journey. Call to action link text labels should be action-oriented yet straightforward so a user will feel comfortable making a selection.
Warning
Call to action link text labels need to be written clearly in order to be understood, therefore write no more than four or five words per link.
Character count
Call to action link text labels should have fewer characters in order for their message to remain impactful for a user.
Warning
Do not write long text labels because they might break to two lines on small screens or weaken an impactful message.
| Style | Maximum characters |
|---|---|
| Primary | 30 |
| Secondary | 35 |
| Brick | 25 |
| Default | 45 |
Variant grouping
Variants can be grouped together if there are different kinds of links that need to be displayed in the same container.
Helpful tip
If there are more than three links that can be grouped together in a grid instead, use the Brick variants.
Warning
Do not group more than three Primary, Secondary, or Default variants together otherwise a user might have trouble making a selection.
Buttons
Do not use a call to action link to trigger an action, like submitting a form or changing a state.
Learn more
Visit the Button or Form component pages to learn more about how to use buttons and forms.
Brick (icon)
When grouping Brick (icon) variants, different icons can be used to communicate different topics, but they all must be the same style, color, and height.
Primary (white)
The Primary (white) variant can be used if the red variant conflicts with other elements or violates accessibility standards.
Behavior
Brick
Similar to an Accordion, Brick variants have the ability to hide or reveal content when selected. Otherwise, the Brick variants function like regular links if no content needs to be hidden.
Interaction states
All call to action link variants have interaction states.
Primary and Primary (video)
| Variant | Interaction state | Element | Specs |
|---|---|---|---|
| Primary | All states | Text | Red Hat Display, Bold, 16pt/24 (1.5), #FFF |
| Primary (video) | All states | Icon | #FFF |
| Both | Link, Focus | Fill | 3px rounded corners, #E00 |
| Both | Hover, Active | Fill | 3px rounded corners, #D40000 |
| Both | Focus, Active | Border | 2px rounded corners, 1px thickness, #FFF |
Primary (white)
| Interaction state | Element | Specs |
|---|---|---|
| All states | Text | Red Hat Display, Bold, 16pt/24 (1.5), #151515 |
| Link, Focus | Fill | 3px rounded corners, #FFF |
| Hover, Active | Fill | 3px rounded corners, #D2D2D2 |
| Focus, Active | Border | 2px rounded corners, 1px thickness, #151515 |
Secondary, light theme
| Interaction state | Element | Specs |
|---|---|---|
| Link, Focus | Text | Red Hat Display, Bold, 16pt/24 (1.5), #151515 |
| Hover, Active | Text | Red Hat Display, Bold, 16pt/24 (1.5), #FFF |
| Link | Border | 3px rounded corners, 1px thickness, #151515 |
| Focus | Outer border | 3px rounded corners, 1px thickness, #151515 |
| Focus | Fill | 3px rounded corners, #F0F0F0 |
| Focus | Inner border | 2px rounded corners, 1px thickness, #151515 |
| Hover, Active | Fill | 3px rounded corners, #151515 |
| Active | Border | 2px rounded corners, 1px thickness, #FFF |
Secondary, dark theme
| Interaction state | Element | Specs |
|---|---|---|
| Link, Focus | Text | Red Hat Display, Bold, 16pt/24 (1.5), #FFF |
| Hover, Active | Text | Red Hat Display, Bold, 16pt/24 (1.5), #151515 |
| Link | Border | 3px rounded corners, 1px thickness, #FFF |
| Focus | Outer border | 3px rounded corners, 1px thickness, #FFF |
| Focus | Fill | 3px rounded corners, #3C3F42 |
| Focus | Inner border | 2px rounded corners, 1px thickness, #FFF |
| Hover, Active | Fill | 3px rounded corners, #FFF |
| Active | Border | 2px rounded corners, 1px thickness, #151515 |
Brick
| Interaction state | Element | Specs |
|---|---|---|
| Link, Focus | Text | Red Hat Text, Regular, 16pt/24 (1.5), #06C |
| Hover, Active | Text | Red Hat Text, Regular, 16pt/24 (1.5), Underline, #004080 |
| Link, Hover | Border | 3px rounded corners, 1px thickness, #D2D2D2 |
| Focus | Outer border | 3px rounded corners, 1px thickness, #D2D2D2 |
| Focus | Inner border | 2px rounded corners, 1px thickness, #D2D2D2 |
| Hover, Active | Fill | 3px rounded corners, #F5F5F5 |
| Active | Outer border | 3px rounded corners, 1px thickness, #D2D2D2 |
| Active | Inner border | 2px rounded corners, 1px thickness, #D2D2D2 |
Brick (icon)
| Interaction state | Element | Specs |
|---|---|---|
| All states | Icon | #D2D2D2 |
| Link, Focus | Text | Red Hat Text, Regular, 16pt/24 (1.5), #06C |
| Hover, Active | Text | Red Hat Text, Regular, 16pt/24 (1.5), Underline, #004080 |
| Link, Hover | Border | 3px rounded corners, 1px thickness, #D2D2D2 |
| Focus | Outer border | 3px rounded corners, 1px thickness, #D2D2D2 |
| Focus | Inner border | 2px rounded corners, 1px thickness, #D2D2D2 |
| Hover, Active | Fill | 3px rounded corners, #F5F5F5 |
| Active | Outer border | 3px rounded corners, 1px thickness, #D2D2D2 |
| Active | Inner border | 2px rounded corners, 1px thickness, #D2D2D2 |
Default and Default (video), light theme
| Interaction state | Element | Specs |
|---|---|---|
| Link, Focus | Text | Red Hat Display, Bold, 18pt/27 (1.5), #06C |
| Hover, Active | Text | Red Hat Display, Bold, 18pt/27 (1.5), #004080 |
| Link, Focus | Icon | #06C |
| Hover, Active | Icon | #004080 |
| Focus | Background | 3px rounded corners, #06C, 10% opacity |
| Active | Background | 3px rounded corners, #004080, 10% opacity |
Default and Default (video), dark theme
| Interaction state | Element | Specs |
|---|---|---|
| Link, Focus | Text | Red Hat Display, Bold, 18pt/27 (1.5), #73BCF7 |
| Hover, Active | Text | Red Hat Display, Bold, 18pt/27 (1.5), #BEE1F4 |
| Link, Focus | Icon | #73BCF7 |
| Hover, Active | Icon | #BEE1F4 |
| Focus | Background | 3px rounded corners, #73BCF7, 15% opacity |
| Active | Background | 3px rounded corners, #BEE1F4, 15% opacity |
Accessibility
| Key | Action |
|---|---|
| Tab | Moves the focus to the next call to action link if within a group. |
| Shift + Tab | Moves the focus to the previous call to action link if within a group. |
| Enter | Selects the call to action link. |
Responsive design
Ordering
When call to action links are grouped together, they are ordered by hierarchy from left to right. On small screens, the order changes to left to right and top to bottom if there are call to action links that fall into a second row.
Long text labels
Long text labels will wrap to two lines on small screens or when translated to certain languages. This can be avoided by writing less text or revising existing text to be shorter.
Warning
The Default call to action link arrow should not appear by itself, it should always be connected to at least one word on the same line.
Brick
The Brick variants will move around the grid to accommodate different container sizes.
Warning
Long text labels might break to two lines which adds height and disrupts the grid, therefore write no more than two or three words per link.
Best practices
Changing styles
Do not modify the styles of any variant for any reason.
Too many links
Do not group more than three variants together otherwise a user might have trouble making a selection if there are too many link choices.
Using multiple Primary variants
Do not use multiple Primary variants in the same group, use of that variant is reserved to represent the most important link.
Mixing variant groups
Do not group more than two variants together anywhere.
Mixing Bricks
Do not group different Brick variants together anywhere, use one only.
Changing hierarchy
Do not change the hierarchy when grouping, variants that are higher in hierarchy should go first.
Warning
Do not change the hierarchy when grouping unless the change is to accommodate right-to-left languages.
Stretching
Do not stretch any other variants to fit a container or grid, only the Brick variants can stretch.
Spacing
Call to action links use PatternFly 4 spacers to define spacing values between elements.
Helpful tip
The same variants across both themes share the same spacing values, for example Primary, Secondary, and Default variants.
Feedback
To give feedback about anything on this page or to request a new Component, contact us.
Foundations
To learn more about how to use foundational elements, visit the Foundations section.
