The Call to Action (CTA) panel is a simple and clear visual component asking the user to take a specific action. CTA panels will vary based on grid alignment, number of CTAs, and use of images.
CTA-Panel-Default
CTA-Panel-Default

CTA-Panel-Default-Light-Gray

CTA-Panel-Default-Dark-Blue

CTA-Panel-Default-Dark-Gray

CTA-Panel-Centered
CTA-Panel-Centered

CTA-Panel-Centered-Light-Gray

CTA-Panel-Centered-Dark-Blue

CTA-Panel-Centered-Dark-Gray

CTA-Panel-50-Default
CTA-Panel-50-Default

CTA-Panel-50-Default, Light, Dark-Blue

CTA-Panel-50, CTA-Default, Image

CTA-Panel-50, Image, CTA-Default

CTA-Panel-50-Centered
CTA-Panel-50-Centered

CTA-Panel-50-Centered, Light, Light-Gray

CTA-Panel-50, CTA-Centered, Image

CTA-Panel-50, Image, CTA-Centered

CTA-Panel-33
CTA-Panel-33-Light, Dark-Gray, Light

Use for multiple CTAs.
CTA-Panel > Deck-33 > Card-Callout

CTA-Panel-Basic
CTA-Panel-Basic

The CTA-Basic has a smaller footprint and can be placed anywhere on the page. The button is optional.
CTA-Panel-Basic-Ornament

Usage
A CTA panel is a component added at, or near, the bottom of the page so users clearly understand next steps for interaction with the content. CTA panels consist of a title, copy, and a link or button, at minimum. The specific CTA copy can be modified (e.g. for conversion or additional information), depending on where the user is in the journey.
A Mini CTA can go anywhere on a page and takes up less space than the CTA panel. It’s used primarily when you want to give the user an option to take the desired action, while being less disruptive to the user flow. Unlike the CTA panel, you can have more than one on a page. The Mini CTA will have copy and a button only.
Design Specifications
CTA-Panel-Default

Variations
CTA-Panel-Centered

CTA-Panel-50-Default, Light, Dark-Blue

CTA-Panel-50-Centered

CTA-Panel-33-Default, Light, Dark-Gray, Light

CTA-Basic

CTA-Basic-Ornament

Best Practices
Do
- Design CTA block that quickly clarifies user action.
- Keep copy short, clear, and concise. Use minimal word count.
- Lead with a strong action verb like ‘Start’ or ‘Download’. Write in active voice (directive).
- Ensure copy clearly describes what will happen when the user clicks the link or touches the button.
- Use buttons and links appropriately, based on intended user actions.
- CTA link and button labels should be descriptive and unique to each CTA (not “Learn more” on each).
Don’t
- Overwhelm users with options.
- Use unnecessary words or lengthy word count.
- Use vague descriptions for links or buttons.
- Place too many Mini CTAs in close proximity.
Accessibility
CTA panels should be detailed and labeled properly to include for screen readers. For example, instead of “Learn More”, use “Learn More about Schwab ETF’s”. The CTA should meet all color/contrast requirements on Color Guidelines and Schwab Accessibility guidelines.