Web Parts
Landing
Display content tiles in grid layouts for landing page banners, with configurable overlays and content targeting.
ContentFeature Parity: 95%
Get Landing Working in 3 Steps
10-20 minutes
Prerequisites
- Bonzai 2 package installed on your site
- A SharePoint list with landing items (default: Bonzai_Landing)
1
Add the web part
Edit your page and add "Bonzai Landing" to a full-width section.
2
Select your list source
Pick a site (or enter a manual URL), then choose your landing list from the List picker.
3
Configure grid layout
Set items per row (1-6), choose a template (Default, Description, or Classic), and configure overlay and tile height.
When to Use This Web Part
Use this when you need to...
- Create landing page tile banners
- Display category navigation tiles
- Show featured content in a grid
- Build department or topic entry points
Best page locations
- Homepage — main navigation grid
- Landing pages — category tiles
- Department pages — sub-section links
Consider alternatives when...
- • News articles — use News Rollup
- • Rotating content — use Slider
Related web parts:
Pages Rollup — general page listingsSlider — rotating banner content
Grid Layouts
Landing supports 1-6 items per row. Use wider layouts for prominent content:
- 1 column: Full-width hero banner
- 2 columns: Large feature tiles
- 3-4 columns: Standard navigation grid
- 5-6 columns: Compact category tiles
Responsive columns
The configured
itemsPerRow is a maximum. Landing measures the container at runtime and reduces the column count automatically when there isn't room for a minimum tile width (derived from the selected template aspect ratio and tile height).Templates
Three display templates are available:
- Default (Overlay): Image tiles with a title overlay rendered on top of the image. Uses a 3:2 minimum tile aspect ratio.
- Description View: Image tiles with the title and description rendered in a content block below the image. Uses a 16:9 minimum tile aspect ratio.
- Classic (Centered Overlay): No-radius tiles with a centered overlay and no hover effect — a flatter, grid-style look with a tighter gap. Uses the same 3:2 minimum tile aspect ratio as the Default template.
Tile Interaction
- Each tile is a clickable button (
role="button") that is keyboard-accessible via Enter. - Clicking a tile navigates to its
LinkUrl. When the item'sOpenInNewWindowfield is true, the link opens in a new tab; otherwise it replaces the current page. - If an image fails to load or no image is configured, a placeholder icon is shown so the tile stays clickable.
Common Configurations
Copy these ready-to-use configurations:
Homepage Navigation
Main navigation grid for homepage
Best for: Homepage
Configuration
| title | Explore |
| templateName | default |
| itemsPerRow | 4 |
| showOverlay | On |
Department Tiles
Category tiles with descriptions
Best for: Landing page
Configuration
| title | Departments |
| templateName | description |
| itemsPerRow | 3 |
| tileHeight | 200 |
Hero Banner
Full-width single tile hero
Best for: Page header
Configuration
| itemsPerRow | 1 |
| showOverlay | On |
| overlayFontSize | 24 |
| hueIntensity | 40 |
Classic Grid
Flat, square tiles with centered overlay
Best for: Directory page
Configuration
| templateName | classic |
| itemsPerRow | 6 |
| showOverlay | On |
| tileHeight | 160 |
Best Practices
Tune overlay and hue together
For the Default and Classic templates, leave "Show Overlay" on so the tile title stays readable, and raise "Image Hue Intensity" when your images are light or busy. The Description template ignores Show Overlay because its title is rendered below the image.
Consistent image sizes
Use images with the same aspect ratio for a clean grid. If that isn't possible, set a Tile Height so every tile's image area is exactly the same size regardless of the source image dimensions.
Reference
Required List Schema
Create a SharePoint list (default name: Bonzai_Landing) with these columns:
- Create a list named Bonzai_Landing (or select another list in the property pane).
- Add required Title entries for each tile.
- Add Image and LinkUrl columns for visuals and navigation.
- Optional: add Description, SortOrder, OpenInNewWindow, and TargetAudience for richer behavior.
Expected column names (quick reference)
Landing discovers common column names automatically. If you used custom names, rename your columns to match one of the supported names below.
| Purpose | Supported column names | Example |
|---|---|---|
| Background image | ImageUrl, Image, BannerImageUrl, ThumbnailUrl, Picture, Image_x0020_Url, ImageURL, Thumbnail, Photo, Icon | Image (SharePoint Image column) |
| Link URL | LinkUrl, Link, Url, URL, Link_x0020_Url | LinkUrl |
| Description | Description, Body, Summary, PageDescription | Description |
| Sort order | SortOrder, Order, Sort_x0020_Order, DisplayOrder | SortOrder |
| Open in new window | OpenInNewWindow, OpenInNewTab, Open_x0020_In_x0020_New_x0020_Window | OpenInNewWindow |
| Target audience | TargetAudience, Audience, Target_x0020_Audience | TargetAudience |
| Column | Type | Required | Description |
|---|---|---|---|
| Title | Single line of text | Yes | Tile title (also used as overlay text and tile accessible name) |
| Description | Multiple lines of text | No | Tile description (rendered only in the Description template; also accepts Body, Summary, or PageDescription) |
| Image | Image (SharePoint Image column) | No | Tile background image (recommended — modern Image column format with attachment payloads is supported) |
| ImageUrl | Hyperlink or URL | No | Alternative image URL column (used when Image is not present) |
| LinkUrl | Hyperlink or URL | No | Tile click destination. When empty, the tile renders without navigation. |
| OpenInNewWindow | Yes/No | No | When true, opens the tile link in a new tab; otherwise navigates in the current window |
| SortOrder | Number | No | Display order (items are sorted ascending by SortOrder, then Title). Up to 200 items are returned. |
| TargetAudience | Single line of text | No | Comma-separated SharePoint group names. Only applied when Content Targeting is enabled. |
Property Pane Configuration
Display Settings
| Property | Type | Default | Description |
|---|---|---|---|
title | Text | (empty) | Web part title shown above the grid. Leave empty to hide the header row entirely. |
titleUrl | Text | (empty) | Optional URL to make the title clickable (opens in a new tab). |
titleIconOption | Dropdown | custom | Controls the title icon: custom (show a configurable icon) or none (hide the icon). |
titleIconName | Text | ViewAll | Fluent UI icon name used when titleIconOption is custom. Only shown if a title is set. |
titleIconUrl | Text | (empty) | Custom image URL that overrides titleIconName when provided. |
templateName | Dropdown | default | Display template: default (overlay), description (text below image), or classic (centered overlay, flat style). |
itemsPerRow | Dropdown (1-6) | 3 | Maximum columns in the grid. Reduced automatically on narrow containers. |
showOverlay | Toggle | true | Show the title overlay on images (Default and Classic templates only). |
overlayFontSize | Slider (12-32, step 2) | 18 | Font size in pixels for the overlay title text. |
hueIntensity | Slider (0-100, step 5) | 20 | Darkening applied to the tile image (used by the overlay contrast layer). 0 = none, 100 = full. |
tileHeight | Slider (0-400, step 10) | 0 | Fixed height in pixels for each tile's image area. 0 lets the tile use the template's default aspect ratio. |
Data Source
| Property | Type | Default | Description |
|---|---|---|---|
siteUrlMode | Dropdown | picker | How the source site is selected: picker (site picker) or manual (enter a URL). |
selectedSites | Site Picker | [] | Site selected via the picker (used when siteUrlMode is picker). Single-select. |
siteUrl | Text | (empty) | Manual site URL (used when siteUrlMode is manual). Empty falls back to the current site. |
listId | List Picker (GUID) | (none) | GUID of the SharePoint list to query. Populated from the list picker. |
listName | Text | Bonzai_Landing | Display name of the selected list; used as a fallback lookup when listId is not set. |
enableContentTargeting | Toggle | false | When on, filters items whose TargetAudience matches one of the current user's SharePoint group memberships. |
Layout
| Property | Type | Default | Description |
|---|---|---|---|
fixedHeight | Slider (0-1000, step 25) | 0 | Pins the whole web part to a fixed height in pixels with vertical scrolling. 0 auto-sizes to content. |
Advanced
| Property | Type | Default | Description |
|---|---|---|---|
description | Text (Multiline) | (empty) | Optional description for this web part. |
helpUrl | Text | (empty) | Optional link to help documentation. |
Features Checklist
- ✅ Default, Description, and Classic templates
- ✅ Configurable items per row (1-6), reduced automatically on narrow containers
- ✅ Image overlay with configurable font size (12-32 px) and hue intensity (0-100)
- ✅ Per-tile height override (0-400 px) with template-specific aspect ratios
- ✅ Site picker or manual site URL for cross-site lists
- ✅ Content targeting by SharePoint group membership
- ✅ Fixed-height container with vertical scrolling (0-1000 px)
- ✅ Custom title with link, Fluent UI icon name, or custom icon URL (blank title hides the header row)
- ✅ Keyboard-accessible tiles (Enter to navigate) with optional open-in-new-tab per item
- ✅ Robust image parsing for modern Image columns, hyperlink fields, and attachment payloads