Web Parts
Spotlight Rollup
Feature employees or content with image-focused card or image layouts, supporting comments and likes.
ContentFeature Parity: 95%
Get Spotlight Rollup Working in 3 Steps
10-20 minutes
Prerequisites
- Bonzai 2 package installed on your site
- Site Pages or a custom list with banner images
1
Create spotlight content
Create Site Pages with banner images. Optionally create a filtered view for spotlight items.
2
Add Spotlight Rollup to your page
Edit the page, click +, search for "Spotlight Rollup", and add it.
3
Configure and publish
Select your list, choose a view to filter, set template (Card or Image), and publish.
When to Use This Web Part
Use this when you need to...
- Highlight employee achievements and recognitions
- Feature team members or new hires
- Showcase special projects or initiatives
- Create a "Featured" section on your homepage
- Display promotional content with large images
Best page locations
- Homepage — featured content hero section
- About Us page — team highlights
- Recognition page — employee of the month
- Project pages — showcasing achievements
Consider alternatives when...
- • News articles — use News Rollup
- • Generic page listings — use Pages Rollup
- • Small profile grids — use People Listing
Related web parts:
News Rollup — time-based news contentPages Rollup — general page listingsPeople Listing — team member grid from a list
Recent Updates
- Image selection prefers higher-resolution page images to avoid low-res thumbnails.
Step-by-Step Configuration
1
Create spotlight content pages
Go to Site Pages and create pages for each spotlight item. Add large banner images.
Use 350x197 pixel images for best results in the rollup.
2
Create a view for filtering (optional)
Create a SharePoint view in Site Pages to filter spotlight items (e.g., by category or promoted state).
3
Add the web part to your page
Edit your target page (e.g., homepage), click +, and add "Spotlight Rollup".
4
Configure the data source
In the property pane, select your list (e.g., Site Pages) and optionally select a view.
5
Choose a template
Select Card or Image template based on your design needs.
6
Set items per page and row
Configure how many spotlight items to display (3-6 is typical for homepage) and items per row (2-4).
7
Enable promoted filtering (optional)
Toggle "Show Promoted Only" to feature only items marked as promoted.
8
Publish
Save and publish the page. Spotlight items should appear with large images.
Common Configurations
Homepage Feature
Large spotlight cards for the homepage
Best for: Homepage hero section
Configuration
| title | Featured |
| listName | Site Pages |
| templateName | card |
| itemsPerPage | 3 |
| itemsPerRow | 3 |
| chromeType | none |
Employee Recognition
Highlight employee achievements
Best for: Recognition/HR pages
Configuration
| title | Employee Spotlight |
| templateName | image |
| itemsPerPage | 4 |
| showPromotedOnly | On |
Team Highlights
Feature team members
Best for: About Us page
Configuration
| title | Our Team |
| templateName | card |
| itemsPerPage | 6 |
| itemsPerRow | 3 |
| showComments | Off |
Featured Projects
Showcase project achievements
Best for: Portfolio pages
Configuration
| title | Featured Projects |
| itemsPerPage | 4 |
| itemsPerRow | 2 |
Best Practices
Use high-quality images
Spotlight is image-focused. Use professional, high-resolution images sized at 350x197 pixels for consistent, crisp display.
Keep titles concise
Spotlight titles display on image overlays. Keep them short (3-5 words) for readability.
Rotate featured content regularly
Update your spotlight content weekly or monthly to keep the homepage fresh and engaging.
Reference
Site Pages Schema
Spotlight Rollup reads from a selected list (commonly Site Pages). If no list is selected, it returns no items. Use these columns to curate spotlight items:
- Select Site Pages (or a custom list) in the property pane.
- Add a Showcase column (Choice or Text) and set value Spotlight on spotlight items.
- Add banner images to pages for best visuals.
- Optional: add Category or Promoted fields if you use filtered views.
| Column | Type | Required | Notes |
|---|---|---|---|
| Title | Single line of text | Yes | Default column |
| Banner Image | Image | No | Used for card/image layouts |
| Showcase | Choice or Text | Yes | Set to Spotlight (PromotedState also supported) |
| Category | Choice | No | Optional for filtered views |
| PromotedState | Number | No | Optional for promoted filtering |
Property Pane Configuration
Title Settings
| Property | Type | Description |
|---|---|---|
title | Text | Web part title displayed above the content |
titleUrl | Text | Optional URL to make the title clickable |
titleIconOption | Dropdown | Title icon mode: Custom or None |
titleIconName | Icon Picker | Fluent UI icon picker (default: Lightbulb) |
titleIconUrl | Text | Custom icon URL (overrides icon name) |
description | Text (Multiline) | Optional description below the title |
showMoreText | Text | Text for the "Show More" link (default: See all) |
showMoreUrl | Text | URL for the "Show More" link (empty = hidden) |
Data Source Settings
| Property | Type | Description |
|---|---|---|
siteUrl | Text | Site URL where the list is located (empty = current site) |
listName | List Picker | Source list (e.g., Site Pages) |
viewName | View Picker | View to filter items (depends on selected list) |
showPromotedOnly | Toggle | Show only promoted/featured items |
sortBy | Dropdown | Sort by: Modified, Created, or Title |
Display Settings
| Property | Type | Description |
|---|---|---|
templateName | Dropdown | Display template: Card or Image |
itemsPerRow | Dropdown | Items per row (2-4), only for Card template |
itemsPerPage | Slider (1-20) | Number of items to display |
showComments | Toggle | Show comment count (default: On) |
showLikes | Toggle | Show like count (default: On) |
fixedHeight | Slider (0-800) | Fixed height in pixels (0 = auto) |
chromeType | Dropdown | Chrome type: None, Title Only, Border Only, Title and Border |
Features Checklist
- ✅ Card and Image display templates
- ✅ Image-focused layouts
- ✅ View-based filtering
- ✅ Promoted item filtering
- ✅ Comments and likes display
- ✅ Multiple sort options
- ✅ Configurable items per row (Card template)
- ✅ Custom title with icon and link
- ✅ Show more link