Layouts
Choose how your records are displayed with different layout options for both item lists and details pages.
Item List Layouts
Configure how records appear in your main browsable view.
List
Display records in a vertical list format.
Best for:
- Job boards
- Event listings
- News articles
- Simple directories
Style options:
- Stacked - Traditional vertical list
- Columns - Two-column layout
- Accordion - Expandable/collapsible items
Cards
Display records in a responsive grid of cards.
Best for:
- Product catalogues
- Team directories
- Image galleries
- Portfolio items
Style options:
- Grid - Equal-height cards in rows
- Masonry - Pinterest-style variable-height layout
Cards settings:
| Setting | Options |
|---|---|
| Cards per row | 1, 2, 3, 4, 5, or 6 |
| Alignment | Left, Centre, or Right (Grid only) |
Table
Display records in rows and columns like a spreadsheet.
Best for:
- Data-heavy content
- Comparison views
- Pricing tables
- Inventory lists
Table header settings:
| Setting | Options |
|---|---|
| Background colour | Custom colour picker |
| Text colour | Custom colour picker |
| Font size | Small, Medium, Large |
| Font weight | Normal, Medium, Semi Bold, Bold |
| Text style | UPPERCASE, Capitalize, Normal |
Additional Styles and Settings
Access these settings via Styles & Settings in the Layout section:
- Item Container - Enable/disable wrapper, set corner radius and background colour
- Border - Add borders with custom colour and width
- Drop Shadow - Add shadows in various sizes
Details Page Layouts
Configure the layout for individual record pages. Each item in your list can have its own dedicated details page with a unique URL.
Enabling the Details Page
- Open your widget in the Creator
- Go to the Details tab
- Toggle Enable Details Page on
- Select a URL Slug Column - this column’s values will be used in the page URLs
Choose a column with unique values for the URL slug (like a name or ID) to ensure each item has its own distinct URL.
Layout Types
Full Width
Content spans the full width of the page.
Best for:
- Long-form content
- Articles and blog posts
- Simple product pages
Two Column
Content is split into two columns with the cover image on one side.
Best for:
- Product pages
- Team member profiles
- Portfolio pieces
Additional setting:
- Reverse Layout - Swap the position of the image and content columns
Sidebar
Content with a sidebar for additional information.
Best for:
- Documentation
- Property listings
- Detailed product specs
Details Container Styling
Access these settings via Styles & Settings in the Layout section:
- Content Width - Full Width, Medium, or Large
- Page Container - Enable/disable wrapper with custom corners and colour
- Border - Add borders with custom colour and width
- Drop Shadow - Add shadows in various sizes