Content Cards
Display items from a SharePoint list as a responsive grid of cards with icons, descriptions, and call-to-action links.
Get Content Cards Working in 3 Steps
Prerequisites
- Bonzai 2 package installed on your site
- A SharePoint list with at least Title + Link columns (recommended: also add icon + description)
Create your list
Create a list that stores the card content (Title, Description, Link URL, optional icon and category).
Add the web part
Edit your page and add “Bonzai Content Card”.
Select site + list
Pick the site (optional) and select the list. Then choose layout settings like items per row and paging.
When to Use This Web Part
Use this when you need to...
- Build a “Quick Links” grid with richer visuals than a plain link list
- Create a landing section with cards that link to key pages, tools, or resources
- Group content by category and let users filter with simple category selection
Best page locations
- Homepages — quick navigation panels
- Department pages — resource/tool collections
- Hub pages — visual link directories
Consider alternatives when...
- • Complex page layouts with tiles and overlays — use Landing
- • Curated hero/rotating banners — use Slider
- • Search-driven experiences — use Site Directory / Advanced Search
Related web parts:
How it Works
Each list item becomes one card. Cards can show an icon (image URL or Fluent icon name), a title, an optional description, and an optional call-to-action link.
Flexible column names (field discovery)
Body instead of Description), it will try to detect the best match automatically.Required List Schema
Create a SharePoint list with these columns (recommended):
| Column | Type | Required | Notes |
|---|---|---|---|
| Title | Single line of text | Yes | Card title |
| Description | Multiple lines of text | No | Card body text (also accepts common variants like Body) |
| LinkUrl | Hyperlink | No | Destination URL (relative URLs are supported) |
| LinkText | Single line of text | No | Button/link label (defaults to “Learn More”) |
| IconUrl | Hyperlink | No | Image icon URL for the card |
| IconName | Single line of text | No | Fluent icon name (used if IconUrl is empty) |
| OpenInNewTab | Yes/No | No | Open LinkUrl in a new tab |
| Category | Choice or Text | No | Optional category filtering (Choice recommended) |
| SortOrder | Number | No | Optional ordering (lower first) |
Common Configurations
- Items per row: 4
- Cards show icon + title + short description
- Hover effect enabled
- Add a Category column (Choice)
- Select one or more categories in the web part settings
- Sort by SortOrder for curated ordering
- Hide description by leaving it empty
- Use smaller icon size
- Enable paging for longer lists
Reference
Key Web Part Settings
| Setting | What it controls |
|---|---|
| Site selection | Pick a different site (optional) to source the list from |
| List | Select the SharePoint list to render as cards |
| Items per row | Grid density (1–6) |
| Items to show | How many items to load from the list |
| Paging | Enable paging and set items per page |
| Card styling | Padding, borders, corner radius, hover and shadow |
| Icon options | Icon size, color, and placement (top/left) |
| Category filter | Select which categories (from the list) to display |
Use image icons for best visual consistency
IconUrl (image) over icon font names.Keep descriptions short