How to add a hero banner and call-to-action to SharePoint

The top of a page is your best chance to set a tone and point people somewhere - a campaign, a form, a key service. SharePoint does have a Hero web part, but it does a specific job that isn't what most people mean by a "hero banner". Here's the distinction, where the native option stops, and how to add a genuine designed banner with a call to action.

What the native Hero web part does

• Features up to five links to content (pages, docs, sites) as tiles or layers, each with an image and title.
• It's a content launcher - great for pointing at featured pages.

Where the native options stop

• It's built around links to content - you can't make a plain designed banner with your own headline and buttons.
• No gradient or freely chosen background, and no legibility scrim for text over a busy photo.
• No proper call-to-action buttons in your own styles.
• Text contrast over images is left to chance, so headlines can become unreadable.

The supported way: an SPFx banner and CTA web part

A SharePoint Framework (SPFx) web part can give you a true hero banner. Glow Cloud Kit Spotlight is a high-impact banner and call-to-action card with an image, gradient or solid background, a legibility scrim, automatic contrast that keeps the headline (and icons) readable on any background, and up to two call-to-action buttons in primary, secondary or outline styles. A nine-point focus dial keeps the right part of large images in view. The core part needs no data source or permissions; only optional audience targeting uses one read-only scope.

A checklist for a strong hero

1. Lead with one clear message - a hero with three competing points has none.
2. Pick a background that supports the text, and turn on the scrim over busy images.
3. Use one primary call to action; a second, quieter one at most.
4. Check contrast - the auto-contrast helps, but eyeball it on your actual image.
5. Test the banner height and focus point on mobile.

Related

• Glow Cloud Kit Spotlight - the product overview.
• Spotlight setup guide - install and configuration steps.
• How to make SharePoint look modern.