Page Recipes
Content Showcase Recipe
Build a rich content display page with landing tiles, pages rollup, content cards, image link gallery, and slider.
Content5 Web Parts60-120 min (first time)
Overview
This recipe creates a visually rich content showcase page perfect for department landing pages, resource centers, or content hubs. It combines multiple content display formats for maximum visual impact.
Page Layout
Section 1: Full Width — Landing Web Part (Banner Tiles)
Left (50%) — Pages Rollup
Right (50%) — Content Cards
Section 3: Full Width — Slider (Highlights)
Section 4: Full Width — Image Link Gallery (Quick Links)
Step-by-Step Setup
1
Create the Content Showcase Page
- Go to Site Contents → Site Pages → + New → Page
- Name the page "Content Showcase"
- Add to site navigation
2
Add Section 1: Landing Banner
Add a full-width section for the landing tiles banner.
Add web part: Bonzai Landing
| Property | Value |
|---|---|
| Title | Welcome |
| List Name | Bonzai_Landing (or any landing list with tile items) |
Template (templateName) | description (image with title + description below) |
Items Per Row (itemsPerRow) | 4 |
Show Overlay (showOverlay) | On |
Title Icon Name (titleIconName) | ViewAll |
Tile Height (tileHeight) | 0 (use template default aspect ratio) or 180-220 px for a uniform grid |
Landing uses its own list schema
The Landing web part expects columns like Title, Image (or ImageUrl), LinkUrl, and optional Description / SortOrder / OpenInNewWindow / TargetAudience. The default list name is
Bonzai_Landing, but any list that exposes those fields works.Use 4 items per row for a balanced grid
3
Add Section 2: Two Columns (50%/50%)
Add a two-column section for Pages Rollup and Content Cards.
Left Column: Bonzai Pages Rollup
| Property | Value |
|---|---|
| Title | Recent Pages |
List Name (listName) | Site Pages (leave empty to auto-try Pages / SitePages / Site Pages) |
Template (templateName) | card (grid of card thumbnails) |
Items Per Row (itemsPerRow) | 2 (narrow column) |
Items Per Page (itemsPerPage) | 4 |
Sort By (sortBy) | modified |
Show Paging (showPaging) | On |
Title Icon Name (titleIconName) | Page |
Chrome Type (chromeType) | titleAndBorder |
Items Per Row only applies in Card template
itemsPerRow is accepted at 2, 3, or 4 and only affects the card template. In a narrow 50% column, 2 reads best.4
Add Content Cards to Right Column
Right Column: Bonzai Content Card
Content Cards reads items from a SharePoint list — one list item becomes one card. Each card can show an icon (image URL or Fluent UI icon name), a title, an optional description, and an optional call-to-action link.
| Property | Value |
|---|---|
| Title | Featured Resources |
Title Icon Option (titleIconOption) | custom |
Title Icon Name (titleIconName) | GridViewMedium |
Site URL Mode (siteUrlMode) | picker (or manual for a URL) |
List (listId / listName) | Your Content Cards source list (e.g. Bonzai_ContentCards) |
Sort By (sortBy) | SortOrder (falls back to Title / Modified) |
Max Items Per Row (maxItemsPerRow) | 2 (narrow column) — range 1-6 |
Items To Show (itemsToShow) | 4 |
Icon Position (iconPosition) | top-left |
Icon Size (iconSize) | 48 |
Show Card Shadow (showCardShadow) | On |
Card Hover Effect (cardHoverEffect) | On |
Content Cards is list-driven
Unlike the older Quick Links pattern, Content Cards reads from a SharePoint list. Create a list with at minimum a
Title column; add optional Description, LinkUrl, LinkText, IconUrl or IconName, Category, SortOrder, and OpenInNewTab columns for richer cards. See the Content Cards docs for supported column aliases.Filter by category (optional)
Add a
Category column (Choice recommended) and set selectedCategories in the property pane to show a curated subset — for example ["HR", "Finance"].5
Add Section 3: Slider
Add a full-width section for the rotating slider.
Add web part: Bonzai Slider
| Property | Value |
|---|---|
| Title | Highlights |
List (listId / listName) | Site Pages |
Showcase Value (showcaseValue) | Slider (default) |
Auto Play (autoPlay) | On |
Auto Play Interval (autoPlayInterval) | 5 (seconds, range 2-30) |
Transition Animation (transitionAnimation) | fade |
Auto Loop (autoLoop) | On |
Slide Click Behavior (slideClickBehavior) | entireSlide |
Show Overlay (showOverlay) | On |
Fixed Height (fixedHeight) | 500 |
Image Fit (imageFit) | cover |
Slide Image Source (slideImageSource) | BannerImage (full-resolution) |
Title Icon Name (titleIconName) | Slider (default) |
Navigation controls are built in
Dot and arrow controls render automatically — they are not a property-pane toggle. The slider also pauses on hover and skips auto-play entirely when only one slide is available.
6
Add Section 4: Image Link Gallery (optional)
Add a full-width section for a responsive grid of clickable image tiles.
Add web part: Bonzai Image Link Gallery
| Property | Value |
|---|---|
| Title | Quick Links |
Data Source Mode (dataSourceMode) | list (SharePoint list) or manual (manual images) |
List Name (listName) — list mode | Your image/link list |
Image Source Mode (imageSourceMode) — list mode | listField (banner auto-detect) or custom (pick a column) |
Items Per Row (itemsPerRow) | 4 (range 1-6) |
Tile Height (tileHeight) | 220 (px, range 100-500) |
Show Title (showTitle) | On (renders the overlay title) |
Image Fit (imageFit) | cover |
Hover Effect (hoverEffect) | zoom |
Border Radius (borderRadius) | 6 |
Show Paging (showPaging) | On |
Items Per Page (itemsPerPage) | 12 (range 3-50) |
Open Links In New Window (openInNewWindow) | On (can be overridden per item) |
Chrome Type (chromeType) | titleAndBorder |
Title Icon Name (titleIconName) | PhotoCollection (default) |
Manual mode supports dividers
Switch
dataSourceMode to manual to curate images directly in the web part settings (with support for divider/section header rows) — no list needed.7
Publish and Test
- Save and publish the page
- Add to site navigation
- Verify all web parts display content correctly
- Test slider auto-rotation (it pauses on hover) and dot/arrow navigation
- Confirm the Image Link Gallery tiles are clickable and open as configured
Content Curation at a Glance
Each web part on this page sources items differently — here is how they select what to show:
| Web Part | Source list | How items are selected |
|---|---|---|
| Landing | Bonzai_Landing (or any tile list) | All items from the list, sorted by SortOrder then Title (up to 200). Optional Content Targeting by SharePoint group. |
| Pages Rollup | Site Pages / Pages | Published pages only, server-sorted by sortBy (modified / created / title). Drafts/folders always hidden. |
| Content Cards | Your Content Cards list | All items (or filtered by selectedCategories), sorted by SortOrder / Title / Modified. |
| Slider | Site Pages (modern news pages only) | Items where the Showcase column equals showcaseValue (default Slider). Optional selectedTags pre-filter. |
| Image Link Gallery | Any list, or manual images | List mode: banner image auto-detect + optional category/tag filters. Manual mode: curated items added in the property pane (supports dividers). |
About the Showcase column (Slider only)
The Slider reads the Showcase column on Site Pages and includes items whose value matches the configured
showcaseValue. Internal column names Showcase, Showcase_x003f_, Featured, and Featured_x003f_ are all recognised.Final Checklist
- ☐ Landing banner showing tile grid (from a Landing-style list)
- ☐ Pages Rollup displaying recent published pages in Card template
- ☐ Content Cards reading from a SharePoint list with icons and CTA links
- ☐ Slider rotating through pages tagged with the configured Showcase value
- ☐ Image Link Gallery rendering clickable image tiles (list or manual mode)
- ☐ Page added to navigation
- ☐ Responsive layout on mobile (Content Cards collapses to 2/1 cols; Landing auto-fits)