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
• Horizontal - Masonry layout with horizontal card items (image on left, content on right — matching the list layout appearance)

Cards settings:

Table

Display records in rows and columns like a spreadsheet.

Best for:

• Data-heavy content
• Comparison views
• Pricing tables
• Inventory lists

Table settings:

Vertical Alignment

Control the vertical alignment of content inside table cells. This is useful when rows have mixed content heights — for example, a row with a tall image alongside short text fields. Set to Middle to vertically centre content, or Bottom to align to the bottom of each cell.

Row Grouping

Group your table rows by any column to organise data into collapsible sections. When a Group by column is selected, rows with the same value are grouped together under a header showing the group name and item count.

• Click the group header to collapse or expand that group
• Use the Order setting to sort groups alphabetically (A→Z or Z→A) or keep the original source order
• Group headers inherit your table header’s background and text colours

Table header settings (via Styles & Settings):

Column Width

You can customise the width of individual columns in the table layout. Click on any field (including the item title) to open its settings, then adjust the Column Width dropdown.

Kanban

Display records grouped into columns by a category field, similar to a Trello or project management board.

Best for:

• Product roadmaps
• Project tracking
• Status workflows
• Pipeline management

How it works:

Records are automatically grouped into columns based on the values in your selected Group By column. For example, if you group by a “Status” field with values like “Planned”, “In Progress”, and “Completed”, each status becomes its own column.

Kanban settings:

Column Header Styling

Customise the appearance of kanban column headers via Styles & Settings:

Colour modes explained:

• Single - One background and text colour for all column headers
• Source - Automatically uses colours from your data source’s field options (works with Airtable and Notion select/multi-select fields)
• Multi - Define your own set of colours that cycle across columns in order

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
• Spacing - Adjust column gap and row gap between items (available for Cards, List, and Kanban layouts)

Spacing

Control the gap between items in your layout. Open Styles & Settings and expand the Spacing accordion.

Available sizes: None, Extra Small, Small, Compact, Medium, Large, Extra Large (and Huge/Massive for Cards row gap).

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

1. Open your widget in the Creator
2. Go to the Details tab
3. Toggle Enable Details Page on
4. Select a URL Slug Column - this column’s values will be used in the page URLs

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