SharePoint Online Hero Web Part: Complete Tutorial

In this SharePoint tutorial, I’ll walk you through everything you need to know about the Hero web part in SharePoint Online — what it is, how to add it, how to customize it, and some practical tips that’ll make your SharePoint pages look genuinely impressive.

Whether you’re building a company intranet homepage or a department communication site, the Hero web part is one of the first things people see. So it’s worth getting right.

Let’s dive in.

What Is the SharePoint Hero Web Part?

The SharePoint Online Hero web part is a visually rich web part that lets you display up to five items — images, documents, pages, or links — in a bold, full-width layout at the top of your page.

Think of it like the banner section of a modern website. It’s the first thing visitors notice, and when done well, it immediately communicates what the page (or site) is about.

Here’s what makes it so popular:

• It’s included by default on Communication sites
• It supports images, videos, internal links, and external URLs
• You can add text overlays, call-to-action buttons, and topic headings
• It automatically adapts to different screen sizes and devices
• It now supports three layout types: Tiles, Layers, and Carousel (more on this below)

Where Hero Web Part Used By Default?

When you create a SharePoint Communication site using the Standard template, the Hero web part comes pre-configured with a tiled layout showing five tiles. If you use the Showcase template instead, the Hero defaults to a layered (vertical) layout with three layers.

You can always change the layout and content after the site is created — nothing is locked in.

Good to know: The Hero web part is not just limited to Communication sites. You can manually add it to Team site pages and other SharePoint pages too.

Check out Difference Between Team Site and Communication Site in SharePoint

How to Add the Hero Web Part in SharePoint Online

If the Hero web part isn’t already on your page, here’s how to add it:

1. Open the SharePoint site page where you want to add it.
2. Click Edit in the top-right corner of the page.
3. Click the + (plus icon) to add a new section, or hover between existing sections to find the add button.
4. In the web part picker that appears, type Hero in the search box.
5. Select the Hero web part from the list.
6. The Hero web part will be added to your page with a default layout. Here is a screenshot for your reference.

Once added, you’ll see placeholder tiles with a Select link option on each one. Click that to start adding your content.

Check out Create SPFx Web Part with jQuery Accordion

How to Add Content to Each Tile

After adding the Hero web part, each tile will show a Select link button. Here’s what happens when you click it:

Source Option	What It Does
Recent	Shows recently opened files on your SharePoint site
Stock images	Lets you pick from Microsoft’s built-in stock image library
Web search	Lets you search for images via Bing
OneDrive	Choose an image or document from your OneDrive
Site	Pick content from any SharePoint site you have access to
Upload	Upload an image directly from your computer
From a link	Paste a URL to any image, page, or external link

Once you’ve selected a source, click Add item to confirm and the image or link gets applied to that tile.

How to Edit Each Tile or Layer

After adding content, you’ll want to customize each tile — add a title, set a background, or add a call-to-action button. Here’s how:

1. While in Edit mode, hover over a tile.
2. Click the pencil/edit icon that appears on the tile.
3. A panel will open on the right where you can:
   • Add or change the Title
   • Set a Topic heading (small text above the title)
   • Add a Description
   • Upload or change the Background image
   • Toggle on a Call to action (CTA) link and add custom button text like “Learn more” or “Get started”
   • Configure Accessibility alt text for the image. Here is a screenshot for your reference.

The Call to action link is available for each layer in the Layers layout, but in the Tiles layout, it’s only available for the largest (featured) tile on the left.

Check out SharePoint Editorial Card Web Part

Hero Web Part Layout Options

This is where things get interesting. The Hero web part gives you three layout options, each with a completely different visual feel:

1. Tiles Layout

This is the classic Hero layout — one large featured tile on the left with smaller tiles on the right. You can choose anywhere from 1 to 5 tiles.

• The height of the web part follows an 8:3 aspect ratio
• Images inside the tiles scale to a 4:3 aspect ratio
• Best for home pages where you want to show multiple links without scrolling

2. Layers Layout

In the Layers layout, each item stacks vertically one after another. The images alternate between the left and right side as you scroll down.

• Each layer follows an 8:3 aspect ratio
• Images within each layer scale at a 9:16 ratio
• Best for pages where you want to tell a story or highlight a step-by-step flow
• Supports 1 to 5 layers

3. Carousel Layout (New!)

This is the newest addition to the Hero web part. The Carousel layout displays items as a slideshow that users can swipe or navigate through. You can enable Autoplay to make slides transition automatically.

What makes the Carousel especially powerful is that it comes with three new styles you can mix and match across individual slides:

• Image overlay — text sits directly on top of the image
• Text block — text is displayed in a separate block alongside the image
• Diagonal split — a modern, editorial-style split between image and text

Tip: You can set a different style for each slide within the same Carousel, which gives your page a dynamic, magazine-style look.

To switch between layouts:

1. While in Edit mode, click the Edit properties (pencil) icon on the top-left of the Hero web part.
2. In the property pane on the right, choose your desired layout — Tiles, Layers, or Carousel.

Read SharePoint Framework User Profile Web Part [Using MS Graph API]

How to Reorder Tiles, Layers, or Carousel Slides

You don’t have to live with the default order. Here’s how to rearrange:

1. In Edit mode, click Edit properties on the Hero web part.
2. In the property pane, find the item you want to move.
3. Click the three-dot (ellipsis) menu next to it.
4. Select Move up or Move down.

For Tiles and Layers, you can also simply click and drag a tile to reposition it directly on the canvas — which is much faster.

Hero Web Part: Full-Width Layout

Want the Hero web part to stretch all the way across the screen with no side margins? You can do that, but there’s an important limitation to be aware of:

Full-width layout only works on Communication site pages. It is NOT supported on Team site pages.

Here’s how to set it up on a Communication site:

1. Open the page in Edit mode.
2. Click + Add section and choose Full-width column from the section layout options.
3. Inside the full-width section, add the Hero web part.
4. Add your images and content as normal.
5. Click Republish. Here is the screenshot of the Full-width section.

The result is a Hero web part that spans the entire browser window — no padding, no sidebars. It looks great on large screens and is a popular choice for intranet home pages.

Hero Web Part and Image Sizing

Getting your images to look sharp in the Hero web part takes a bit of planning. Here’s what you need to know:

• The Hero is designed with a full-bleed layout that fills the full width of the content area
• Images are automatically cropped and scaled based on the layout and screen size
• For the Tiles layout, aim for images with a 4:3 ratio (e.g., 1600×1200 px works well)
• For Layers, images are displayed in a 9:16 ratio on certain views
• For mobile devices, images in the Carousel layout display at a 16:9 ratio
• You can upload videos to the Hero web part, but they won’t play inline — the user is redirected to the source

Pro tip: Always use high-resolution images (at least 1920px wide) to avoid blurriness on larger screens. Compressed JPEGs with vibrant visuals work best.

Opening SharePoint Hero Web Part Links in a New Tab

By default, external URLs in the Hero web part automatically open in a new tab. But for internal content, the behavior is a little different.

For internal content:

• Right-click the image tile on the published page.
• Select Open image in new tab from the browser context menu.

This is a browser-level action, not a Hero web part setting. There’s no built-in “Open in new tab” toggle for internal links in the Hero web part’s configuration panel — it’s a known limitation.

You can see the screenshot below:

For external links:
These always open in a new tab automatically — no configuration needed.

Check out Highlighted Content Web Part in SharePoint

Can You Add More Than 5 Tiles?

This is one of the most frequently asked questions. The short answer: No, you cannot add more than 5 tiles in the Hero web part.

The maximum is 5 tiles (Tiles layout), 5 layers (Layers layout), or 5 slides (Carousel layout). If you need to showcase more items, consider pairing the Hero web part with other web parts like Quick Links, Highlighted Content, or Card web parts below it.

Does the Hero Web Part Support Audience Targeting?

No — the Hero web part does not natively support audience targeting. You cannot show or hide specific tiles or layers to different groups of users directly within the web part.

However, if you need audience-targeted content, a practical workaround is to create separate SharePoint pages for different audiences and control access to those pages instead.

Tips to Get the Most Out of the Hero Web Part

Here are a few things that can make a real difference:

• Use consistent image dimensions across all tiles — mixed aspect ratios can make the layout look unbalanced.
• Keep titles short — long titles get cut off on smaller tiles. Aim for 3–6 words max on smaller tiles.
• Use the Call to Action button on the featured tile — it significantly increases click-through rates on intranet pages.
• Try the Carousel layout for news-heavy pages where you want to rotate multiple announcements without cluttering the layout.
• Disable “Show title” on smaller tiles if you want a cleaner, image-only look — you can toggle this off in each tile’s settings.
• Test on mobile — the Hero web part is responsive, but images can shift depending on the layout. Always preview on a smaller screen before publishing.
• Don’t use text-heavy background images — the text overlay on the Hero tile can be hard to read if the background image has a lot of competing visual elements. Use solid, simple backgrounds or a blurred/dark image.

Conclusion

The SharePoint Online Hero web part is one of the most powerful tools you have for making your SharePoint pages look polished and professional. Whether you use the classic Tiles layout, the storytelling Layers layout, or the brand-new Carousel with its three unique styles, the Hero web part gives you a lot of flexibility without requiring any custom code.

Start simple — get your images right, add clear titles, and use the Call to Action button. Once you’re comfortable, explore the Carousel layout for a more dynamic, modern feel.

If you have any questions about setting up the Hero web part, drop a comment below and I’ll be happy to help!

You may also like the following tutorials:

• Quick Links Web Part in SharePoint Online
• SharePoint Script Editor Web Part
• SharePoint Page Viewer Web Part
• How to Use SharePoint Group Calendar Web Part?