Call to action

A Call to action is a styled link that directs a user to other pages or sometimes displays hidden content.

Call to action component sample

View a live version of this component and see how it can be customized.

View component via PatternFly Elements

Call to action component blueprint

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.

Call to action component, Primary variant

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.

Call to action component, Primary (video) variant

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.

Call to action component, Primary (white) variant

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.

Call to action component, Secondary variant

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.

Call to action component, Brick variant

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.

Call to action component, Brick (icon) variant

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.

Call to action component, Default variant

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.

Call to action component, Default (video) variant

Light theme

Call to action component, light theme

Dark theme

Call to action component, dark theme

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.

Call to action component usage, hierarchy

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.

Call to action component usage, content

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.

Call to action component usage, variant groups

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.

Call to action component usage, buttons

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.

Call to action component usage, Brick (icon) variant

Primary (white)

The Primary (white) variant can be used if the red variant conflicts with other elements or violates accessibility standards.

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.

Call to action component usage, Brick variant

All call to action link variants have interaction states.

Primary and Primary (video)

Call to action component interaction states, Primary variant
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)

Call to action component interaction states, Primary (white) variant
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

Call to action component interaction states, Secondary variant (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

Call to action component interaction states, Secondary variant (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

Call to action component interaction states, Brick variant
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)

Call to action component interaction states, Brick (icon) variant
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

Call to action component interaction states, Default and Default (video) variant (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

Call to action component interaction states, Default and Default (video) variant (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
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.

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.

Call to action component responsive design, ordering

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.

Call to action component responsive design, long text labels

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.

Call to action component responsive design, ordering

Changing styles

Do not modify the styles of any variant for any reason.

Call to action component, best practice 1

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.

Call to action component, best practice 2

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.

Call to action component, best practice 3

Mixing variant groups

Do not group more than two variants together anywhere.

Call to action component, best practice 4

Mixing Bricks

Do not group different Brick variants together anywhere, use one only.

Call to action component, best practice 5

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.

Call to action component, best practice 6

Stretching

Do not stretch any other variants to fit a container or grid, only the Brick variants can stretch.

Call to action component, best practice 7

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.

Call to action component spacing

To give feedback about anything on this page or to request a new Component, contact us.

To learn more about how to use foundational elements, visit the Foundations section.