Bonzai 2 - Modern SharePoint Intranet

Display items from a SharePoint list as a responsive grid of cards with icons, descriptions, and call-to-action links.

ContentFeature Parity: 85%

Get Content Cards Working in 3 Steps

15-25 minutes

Prerequisites

Bonzai 2 package installed on your site
A SharePoint list with at least a Title column (recommended: also add Description, LinkUrl, and an icon column)

Create your list

Create a list that stores the card content (Title is required; Description, LinkUrl, IconUrl/IconName, Category, SortOrder, and OpenInNewTab are optional).

Add the web part

Edit your page and add “Bonzai Content Card”.

Select site + list

Pick the site (via site picker or manual URL) and select the list. Then set title/icon, items per row (1–6), sort order, category filters, and optional 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:

Advanced Links — you want curated links with tile/list layouts and targetingLanding — you want image tiles with overlay templates

How it Works

Each list item becomes one card. A card can show an icon (image URL or Fluent UI icon name), a title, an optional description, and an optional call-to-action link. The web part can also render an optional header row above the grid with its own title, link, and Fluent UI icon.

Cards are laid out in a CSS grid with your configured Items Per Row (1–6). Clicking the CTA link navigates to the item's LinkUrl; the OpenInNewTab field controls whether it opens in a new tab.

Flexible column names (field discovery)

Content Cards can work with different column naming conventions. If your columns are named differently (for example, Body instead of Description), the web part tries to detect the best match automatically. See the Supported column names table below for the full list of accepted aliases.

Responsive grid

The configured Items Per Row is the desktop maximum. The grid collapses automatically on smaller viewports: 2 columns below 768 px and 1 columnbelow 480 px.

Required List Schema

Only Title is required. Add any optional columns below to enrich your cards:

Column	Type	Required	Notes
Title	Single line of text	Yes	Card title (uses the list item's built-in Title field)
Description	Multiple lines of text	No	Card body text
LinkUrl	Hyperlink or single line of text	No	Destination URL. Relative URLs are resolved against the source site.
LinkText	Single line of text	No	Button/link label (defaults to “Learn More”)
IconUrl	Hyperlink or single line of text	No	Image URL for the card icon (takes precedence over IconName)
IconName	Single line of text	No	Fluent UI icon name (used only if IconUrl is empty)
OpenInNewTab	Yes/No	No	Open LinkUrl in a new tab (also accepts text values “Yes”/“true”/“1”)
Category	Choice or Text	No	Optional category filtering. Choice is recommended — the filter dropdown is built from the column's choices; for Text columns, distinct values from the first 200 items are used.
SortOrder	Number	No	Optional ordering (ascending; lower first)

Supported column names (aliases)

Field discovery matches on either internal name or display name (case-insensitive). If you can't rename a column, use one of these supported aliases:

Field	Supported column names
Description	`Description`, `Body`, `CardDescription`
Icon URL	`IconUrl`, `IconURL`, `Icon_x0020_URL`, `CardIconUrl`, `ImageUrl`
Icon Name (Fluent)	`IconName`, `FluentIcon`, `CardIconName`
Link URL	`LinkUrl`, `LinkURL`, `Link_x0020_URL`, `Url`, `URL`, `CardLinkUrl`
Link Text	`LinkText`, `Link_x0020_Text`, `CardLinkText`, `ButtonText`
Category	`Category`, `CardCategory`
Sort Order	`SortOrder`, `Sort_x0020_Order`, `Order0`, `ItemOrder`
Open in new tab	`OpenInNewTab`, `Open_x0020_In_x0020_New_x0020_Tab`, `NewTab`

Common Configurations

Copy these ready-to-use configurations:

Resource Grid

Dense grid of tools, links, or resources

Best for: Homepage

Configuration

maxItemsPerRow	4
itemsToShow	12
cardHoverEffect	On
iconPosition	top-left
sortBy	SortOrder

Category-Filtered Cards

Curated subset of a larger list

Best for: Department page

Configuration

maxItemsPerRow	3
selectedCategories	["HR","Finance"]
sortBy	SortOrder
showPaging	Off

Compact Link Grid

Dense grid of short links with paging

Best for: Directory page

Configuration

maxItemsPerRow	6
iconSize	32
cardPadding	12
showPaging	On
itemsPerPage	12

Feature Cards (centered)

Fewer, larger cards with centered icons

Best for: Hub landing

Configuration

maxItemsPerRow	3
iconPosition	top-center
iconSize	64
cardPadding	28
showCardShadow	On

Left-Icon List Cards

Horizontal layout with icon on the left

Best for: Policy / help index

Configuration

maxItemsPerRow	2
iconPosition	left
iconSize	40
cardBorderStyle	solid
cardBorderWidth	1

Troubleshooting

Still need help? Contact Bonzai Support

Reference

Property Pane Configuration

Title & Navigation

Property	Type	Default	Description
`title`	Text	(empty)	Optional header shown above the grid. Leave empty to hide the header row.
`titleUrl`	Text	(empty)	Optional URL that turns the header title into a link.
`titleIconOption`	Dropdown	`none`	Controls the title icon: `custom` (show a configurable icon) or `none` (hide the icon).
`titleIconName`	Icon Picker	(empty)	Fluent UI icon name used when `titleIconOption` is `custom`.

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.
`selectedCategories`	Multi-select	`[]`	Categories to include. Options are loaded dynamically from the list's Category column (Choice values or distinct text values from the first 200 items).
`sortBy`	Dropdown	`SortOrder`	Sort order: `SortOrder` (ascending), `Title` (ascending), or `Modified` (descending). Falls back to Title ascending if the chosen field isn't available.

Display

Property	Type	Default	Description
`maxItemsPerRow`	Slider (1-6, step 1)	`4`	Number of columns in the grid at desktop widths. Collapses to 2 below 768 px and 1 below 480 px.
`itemsToShow`	Slider (1-50, step 1)	`8`	Maximum number of items to render when paging is off.
`showPaging`	Toggle	`false`	Enable client-side pagination. When on, up to 500 items are fetched and paged locally.
`itemsPerPage`	Slider (4-24, step 1)	`8`	Items per page when pagination is enabled.
`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.
`containerPadding`	Slider (0-40, step 2)	`0`	Inner padding (px) around the entire card grid container.
`borderRadius`	Slider (0-20, step 1)	`0`	Corner radius (px) for the outer container.

Card Styling

Property	Type	Default	Description
`cardBorderStyle`	Dropdown	`solid`	Border style for each card: `solid`, `dashed`, `dotted`, or `none`.
`cardBorderWidth`	Slider (0-4, step 1)	`1`	Border width in pixels. Ignored when `cardBorderStyle` is `none`.
`cardBorderColor`	Text	(theme default)	CSS color for the card border. Leave empty to use the theme default.
`cardPadding`	Slider (8-40, step 2)	`20`	Inner padding (px) for each card.
`cardBorderRadius`	Slider (0-20, step 1)	`4`	Corner radius (px) for each card.
`showCardShadow`	Toggle	`false`	Apply a subtle drop shadow to each card.
`cardHoverEffect`	Toggle	`true`	Elevate/highlight cards on hover.

Text Sizing

Property	Type	Default	Description
`titleFontSize`	Slider (12-24, step 1)	`16`	Font size in pixels for the card title.
`descriptionFontSize`	Slider (10-18, step 1)	`14`	Font size in pixels for the card description.
`linkFontSize`	Slider (10-18, step 1)	`14`	Font size in pixels for the CTA link/button text.

Icon

Property	Type	Default	Description
`iconSize`	Slider (24-80, step 4)	`48`	Width/height in pixels for card icons (applies to both image icons and Fluent UI icons).
`iconColor`	Text	(brand color)	CSS color for Fluent UI icons. Does not affect image icons.
`iconPosition`	Dropdown	`top-left`	Icon placement within the card: `top-left` (stacked, icon above content), `top-center` (stacked, centered content), or `left` (horizontal, icon beside content).

Use image icons for best visual consistency

If you want consistent sizing across different icons, prefer IconUrl (image) over IconName (Fluent UI). When both are set, IconUrl wins.

Keep descriptions short

Cards work best with 1–2 lines of description text. Longer content will make the grid feel uneven — consider setting a fixedHeight on the container if your descriptions vary significantly.

Features Checklist

Responsive CSS grid with 1–6 items per row (auto-collapses to 2 cols < 768 px, 1 col < 480 px)
Optional header with title, link, and Fluent UI icon
Site picker or manual URL for cross-site lists
Dynamic field discovery (matches common column aliases on internal or display name)
Category filter dropdown populated from list Choice column or distinct text values
Sort by SortOrder, Title, or Last Modified
Per-item icon: image URL (IconUrl) or Fluent UI icon name (IconName)
Three icon layouts: top-left, top-center, left
Fully configurable card styling (border style/width/color, padding, radius, shadow, hover)
Independent font sizes for title, description, and CTA link
Client-side pagination with Previous/Next controls (up to 500 items fetched)
Fixed-height container with vertical scrolling (0–1000 px)
Per-item OpenInNewTab support (opens with rel="noopener noreferrer")

Tip

If you're using icon images, store them in a site asset library and use URLs that are accessible to everyone who will view the page.