Page Banner
Full-width hero banner for News and Event pages. Automatically reads page metadata and renders the right layout based on the page’s content type.
Get Page Banner Working in 3 Steps
Prerequisites
- Bonzai 2 package installed on your site
- A modern page created from a supported page type (News Page or Event Page)
Use a supported page type
Create a News Page (recommended) or an Event Page in the Site Pages library. The banner only renders on supported page content types.
Add the web part (full-width recommended)
Edit the page and add “Bonzai Page Banner”. For best results, place it in a Full-width section.
Adjust layout + visibility
Use the property pane to control height, overlay darkness, and which metadata/actions display for the detected page type.
When to Use This Web Part
Use this when you need to...
- Add a consistent, branded hero banner to News pages
- Show event details (date/location) as a structured panel on Event pages
- Enable quick engagement actions on News pages (likes/comments/share)
Best page locations
- News pages — hero image + title + category/author + like/comment actions
- Event pages — hero image + title + add-to-calendar + date/location panel
Consider alternatives when...
- • Standard site pages without a supported content type (the banner intentionally won’t render)
- • Page rollups (use News Rollup / Events Rollup instead)
Related web parts:
How it Works
- Detects page type: Reads the current page’s content type and chooses the correct banner layout automatically.
- Reads metadata from the page item: Uses dynamic field discovery to find common columns across different site setups (for example: image, category, author, and event date fields).
- News banner actions: Like/unlike and comment count use SharePoint list item APIs. “Comment” scrolls to the comments section on the page.
- Event banner actions: “Add to Calendar” supports Outlook/Office 365 (Graph), Google Calendar link, and an .ics download.
Spotlight pages
Graph permission required for Outlook add-to-calendar
Common Configurations
Copy these ready-to-use configurations:
News Hero (Recommended)
News layout with engagement actions
| bannerHeight | 280 |
| overlayOpacity | 70 |
| showDate | On |
| showCategory | On |
| showAuthor | On |
| showShareButton | On |
Event Hero + Details
Event layout with date/location panel
| bannerHeight | 320 |
| overlayOpacity | 65 |
| showAddToCalendar | On |
| showDatePanel | On |
| showLocation | On |
Minimal Banner
Title-first layout with less overlay
| bannerHeight | 240 |
| overlayOpacity | 45 |
| showCategory | Off |
| showAuthor | Off |
Reference
Property Pane Configuration
Page Banner shows different property groups depending on what page type it detects (News/Spotlight vs Event).
Layout
| Property | Type | Description |
|---|---|---|
bannerHeight | Slider | Banner height in pixels (recommended 240–320). |
overlayOpacity | Slider | Dark overlay strength (0–100) to improve text readability on images. |
defaultImageUrl | Text | Fallback image URL when the page has no banner image set. |
Visibility (News / Spotlight)
| Property | Type | Description |
|---|---|---|
showDate | Toggle | Show the published date above the title. |
showCategory | Toggle | Show the category label (if present on the page item). |
showAuthor | Toggle | Show “Posted By {author}”. |
showShareButton | Toggle | Show the Share button. |
Visibility (Event)
| Property | Type | Description |
|---|---|---|
showAddToCalendar | Toggle | Show the “Add To Calendar” action. |
showShare | Toggle | Show the Share button (Event layout). |
showDatePanel | Toggle | Show the Date & Location panel below the banner. |
showLocation | Toggle | Show the location row (when a location value exists). |
eventDateFormat | Dropdown | Controls how event date ranges are displayed (Full / Smart / Custom). |
Colours
| Property | Type | Description |
|---|---|---|
dateColor | Text | Overrides the accent color used for the date + author link. |
activeButtonColor | Text | News layout: Like button active color. |
buttonColor | Text | Event layout: Action button color. |
accentBorderColor | Text | Event layout: Left accent border color for the Date & Location panel. |