Interactive testing environment for react-shared components
Current: Default
A flexible layout component for organizing content items with masonry or stacked display modes.
Customize the ContentLayout properties and see the changes in real-time.
Different display modes for organizing content.
Uses MasonryWall component for Pinterest-style layout with automatic column distribution.
Vertical stack with ContentDivider between items (except for button-only layouts).
First content item
Second content item
Third content item
Fourth content item
Special handling when all items are buttons - uses grid layout with configurable columns.
When theme config specifies single column for buttons.
Default grid layout with 2 columns, last item spans full width if odd number.
ContentLayout supports an optional header prop.
Optional header content for the layout section.
First content item
Second content item
Third content item
Fourth content item
Complete list of props and their descriptions.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ContentLayoutItem[] | required | Array of items to render. Each item must have an id and optional data.button.layout property |
| layout | 'masonary' | 'stacked' | 'masonary' | Display mode: masonry for Pinterest-style layout, stacked for vertical list with dividers |
| children | (item) => ReactNode | required | Render function that receives each item and returns the content to display |
| header | ReactNode | undefined | Optional header content displayed above items |
| className | string | undefined | Additional CSS classes for the root element |
The component automatically detects when all items have data.button.layout === 'button' and applies special grid layout with configurable columns (single/double).
In masonry mode, items are distributed across columns using the MasonryWall component for optimal space utilization.
In stacked mode, ContentDivider is automatically inserted between items (except for button-only layouts and after the last item). A final Divider is added at the end.
The component respects theme configuration for layout mode and column settings through useThemeLayout and useTheme hooks.
The component includes responsive spacing and layout adjustments. Button grids use gap-sitebutton-gap for consistent spacing.