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
Choose your landing list from the List picker. Optionally select a view.
3
Configure grid layout
Set items per row (1-6), choose a template (Default or Description), and configure overlay settings.
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
Templates
Two display templates are available:
- Default: Image tiles with title overlay
- Description: Image tiles with title and description overlay
Recent Updates
- Supports SharePoint Image column values (modern Image field format) including attachment payloads.
- Improved image parsing to avoid broken tile thumbnails.
- Tiles now use a subtle 20% black overlay for better text contrast.
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 |
| overlayFontSize | 18 |
Hero Banner
Full-width single tile hero
Best for: Page header
Configuration
| itemsPerRow | 1 |
| showOverlay | On |
| overlayFontSize | 24 |
Compact Navigation
Many category tiles
Best for: Directory page
Configuration
| templateName | default |
| itemsPerRow | 6 |
| showOverlay | On |
Best Practices
Use overlay for readability
Enable "Show Overlay" to darken images and improve title visibility.
Consistent image sizes
Use images with the same aspect ratio for a consistent grid layout.
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 |
|---|---|---|
| Link URL | LinkUrl, Link, Url, URL | LinkUrl |
| Background image | Image, ImageUrl, BannerImageUrl, ThumbnailUrl, Picture, Photo, Icon | Image (SharePoint Image column) |
| Column | Type | Required | Description |
|---|---|---|---|
| Title | Single line of text | Yes | Tile title |
| Description | Multiple lines of text | No | Tile description (Description template; also accepts Body/Summary) |
| Image | Image (SharePoint Image column) | No | Tile background image (recommended, supports attachment payloads) |
| ImageUrl | Hyperlink or URL | No | Alternative image URL column |
| LinkUrl | Hyperlink or URL | No | Tile click destination |
| OpenInNewWindow | Yes/No | No | Open tile links in a new tab |
| SortOrder | Number | No | Display order (optional) |
| TargetAudience | Single line of text | No | Comma-separated SharePoint group names |
Property Pane Configuration
Basic Settings
| Property | Type | Description |
|---|---|---|
title | Text | Web part title |
titleUrl | Text | Optional URL to make the title clickable |
templateName | Dropdown | Display template: Default or Description |
itemsPerRow | Dropdown | Grid columns (1-6) |
showOverlay | Toggle | Dark overlay on images for text readability |
overlayFontSize | Slider (12-32) | Font size for overlay text |
Data Source Settings
| Property | Type | Description |
|---|---|---|
siteUrl | Text | Site URL where the list is located (empty = current site) |
listId | List Picker | Source list for landing items (default: Bonzai_Landing) |
viewId | View Picker | View to filter items (depends on selected list) |
enableContentTargeting | Toggle | Filter content by SharePoint group membership |
Layout Settings
| Property | Type | Description |
|---|---|---|
fixedHeight | Slider (0-1000) | Fixed height in pixels (0 = auto) |
Advanced Settings
| Property | Type | Description |
|---|---|---|
description | Text (Multiline) | Web part description |
helpUrl | Text | Help documentation URL |
Features Checklist
- ✅ Default and Description templates
- ✅ Configurable items per row (1-6)
- ✅ Image overlay with configurable font size
- ✅ View-based filtering
- ✅ Content targeting by SharePoint group
- ✅ Fixed height option
- ✅ Custom title with link (blank title hides header row)