Page Recipes
Content Showcase Recipe
Build a rich content display page with landing tiles, pages rollup, content cards, and slider.
Content5 Web Parts45-90 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)
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 | Site Pages |
| Template | Description |
| Items Per Row | 4 |
| Show Overlay | Yes |
| Title Icon | ViewAll |
| Chrome Type | None |
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 | Site Pages |
| Template | Cards |
| Items Per Page | 4 |
| Sort By | Modified |
| Title Icon | Page |
| Chrome Type | Title and Border |
4
Add Content Cards to Right Column
Right Column: Bonzai Content Cards
| Property | Value |
|---|---|
| Title | Featured Resources |
| Cards | 4 manual cards |
| Layout | Grid |
| Title Icon | GridViewMedium |
| Chrome Type | Title and Border |
Content Cards are manually configured
Unlike other web parts, Content Cards are configured manually with title, description, link, and optional image for each card.
5
Add Section 3: Slider
Add a full-width section for the rotating slider.
Add web part: Bonzai Slider
| Property | Value |
|---|---|
| Title | Highlights |
| List Name | Site Pages |
| Showcase Value | Slider |
| Auto-play | Yes |
| Interval | 5 seconds |
| Show Navigation | Yes |
| Title Icon | Slider |
| Chrome Type | None |
6
Publish and Test
- Save and publish the page
- Add to site navigation
- Verify all web parts display content correctly
- Test slider auto-rotation and navigation controls
Showcase Values
This page uses Showcase column values to filter content:
| Web Part | Showcase Value | Purpose |
|---|---|---|
| Landing | (uses all pages) | Banner grid tiles |
| Slider | Slider | Rotating highlight content |
| Pages Rollup | (sorted by date) | Recent pages |
About the Showcase column
The Showcase column is a choice column on Site Pages that categorizes content for different web parts. Common values: News Rollup, Slider, Spotlight, Landing.
Final Checklist
- ☐ Landing banner showing tile grid
- ☐ Pages Rollup displaying recent pages
- ☐ Content Cards configured with resources
- ☐ Slider rotating through highlights
- ☐ Page added to navigation
- ☐ Responsive layout on mobile