Skip to main content

Layout Blocks

Layout blocks are container blocks that organize and arrange other blocks. They are the backbone of Mind's page-building system: instead of fixed section layouts, you nest containers inside one another to create columns, carousels, tabs, accordions, and floating overlays without writing code. Mind includes 6 layout blocks, plus the private child blocks they manage.

Nesting works the same way everywhere. A Layout item, Group, or Floating block can hold any theme block or app block, including another Layout or Group, so a two-column card grid is simply a Layout (2 columns) whose Layout items each contain a Group with an Image, Heading, and Button. Tabs and Collapse use their own child block types (Tab and Collapse row), and those in turn accept regular theme blocks. Every container also shares the universal controls described in Block Settings.

Layout​

block-layout.webp

The Layout block arranges its Layout items in a grid, carousel, or masonry layout with per-device column counts.

Presets:

  • Layout: An empty layout with the default column count.
  • Layout: 2 columns: Two Layout items, each with a placeholder Text block.
  • Layout: 3 columns: Three Layout items, each with a placeholder Text block.
  • Layout: 4 columns: Four Layout items, each with a placeholder Text block.

Settings:

  • Type: Grid, Carousel, or Masonry.
  • Carousel on mobile: Keep the grid on desktop but turn it into a swipeable carousel on mobile. Available when the type is Grid.
  • Columns: Number of columns on desktop and on mobile, from 1 to 12 (switch the Device selector to edit each).
  • Gap: Use the global gap from Theme settings > Layout or a custom desktop and mobile gap.
  • Width: Fill the container or set a custom width.
  • Height: Fit, Fill, or a custom height.
  • Advanced grid: Fixed row with a Height per row for desktop and mobile, so items can span rows like a bento grid.
  • Advanced carousel: Effect (Slide, Fade, Nature, Water, or Urban), speed, autoplay with a custom interval, loop, overflow hidden (all, desktop, or mobile), and auto height.
  • Padding: Device-specific top, bottom, left, and right padding.
  • Child blocks: Layout item blocks (below).

Layout item​

block-layout-item.webp

The Layout item block is one cell of a Layout. It behaves like a Group and can span several columns or rows.

Settings:

  • Width (columns) / Height (rows): How many grid columns and rows the item occupies on desktop and on mobile.
  • Link: Optional URL wrapping the whole item, with an option to open it in a new tab.
  • Layout: Direction (vertical or horizontal, with vertical on mobile), alignment, position, align text baseline, gap, wrap, reverse, clip overflow content, hide on desktop, and hide on mobile.
  • Size: Width (fit or fill), height (fit, fill, or custom), and max width for desktop and mobile.
  • Trigger on parent hover: Mark the item as the hover parent of the blocks inside it.
  • Appearance: Color scheme, background (none, color, or gradient), corner radius, and border.
  • Animation: Global preset, custom effect and duration, or none.
  • Child blocks: Any theme block or app block.
Carousel controls

The Layout block has no arrow or dot settings of its own. When the type is Carousel, add the Carousel navigation, Carousel pagination, or Carousel progress block to the same section to control it.

Group​

block-group.webp

The Group block is a flexible container that stacks child blocks vertically or lays them out horizontally. Think of it as a box you can size, color, and position anywhere.

Settings:

  • Link: Optional URL wrapping the whole group, with an option to open it in a new tab.
  • Layout: Direction (vertical or horizontal, with vertical on mobile), alignment (left, center, right, or space between), position (top, center, bottom, or space between), align text baseline, gap (-30 to 70 px), wrap, reverse, and clip overflow content.
  • Visibility: Hide on desktop and hide on mobile.
  • Size: Width (fit or fill), height (fit, fill, or custom), and max width for desktop and mobile.
  • Appearance: Color scheme, background (none, color, or gradient), corner radius, and border.
  • Trigger on parent hover: Mark the group as a hover parent, or pick its own hover type (in/out zoom, up, down, left, or right).
  • Animation: Global preset, custom effect and duration, or none.
  • Child blocks: Any theme block or app block.
Use case

A two-column "image + text" layout is a Group (direction: horizontal) containing an Image block and a second Group (direction: vertical) with Heading, Text, and Button blocks. Turn on Vertical on mobile so the columns stack on small screens.

Tabs​

block-tabs.webp

The Tabs block creates a tabbed interface where each Tab child supplies its own title and content.

Settings:

  • Active index: The tab that is open by default (1 = first tab).
  • Direction: Vertical (titles above the content) or horizontal (titles beside the content), with a vertical-on-mobile option.
  • Gap: Space between the tab titles and the content, from 10 to 100 px.
  • Reverse: Swap the order of titles and content.
  • Padding: Device-specific top, bottom, left, and right padding.
  • Child blocks: Tab blocks (below).

Tab​

block-tabs-item.webp

The Tab block is one tab: its Text is the clickable title and its child blocks are the panel content.

Settings:

  • Type: Background or Underline style for the active title.
  • Text: The tab title (rich text).
  • Typography: Preset or custom font, size, weight, line height, letter spacing, case, and wrap for the title.
  • Animation: Global preset, custom effect and duration, or none.
  • Child blocks: Any theme block.

Collapse​

block-collapse.webp

The Collapse block creates expandable content rows, ideal for FAQs, product details, and policies.

Settings:

  • Accordion: When enabled, opening one row closes the others.
  • Gap: Space between rows.
  • Appearance: Color scheme, background (none, color, or gradient), corner radius, and border.
  • Padding: Device-specific top, bottom, left, and right padding.
  • Child blocks: Collapse row blocks (below).

Collapse row​

block-collapse-row.webp

The Collapse row block is one expandable item. Its Text is the clickable title, and the theme blocks you add inside it form the expandable content.

Settings:

  • Open by default: Start with this row expanded.
  • Text: The row title.
  • Icon: Icon type (Caret or Plus), icon size, and icon color.
  • Layout: Width (fit, fill, or custom) and alignment of the title.
  • Typography: Preset or custom font, size, weight, line height, letter spacing, case, wrap, and color for the title.
  • Appearance: Color scheme, background, corner radius, and border, with Bottom border only for a divider-style list.
  • Padding and margin: Device-specific spacing around the row.
  • Child blocks: Any theme block or app block, typically a Text block.

Spacer​

block-space.webp

The Spacer block adds empty space between blocks, vertically or horizontally.

Settings:

  • Direction: Vertical (adds height) or horizontal (adds width inside a row layout).
  • Size desktop (px): Space on desktop screens.
  • Size mobile (px): Space on mobile screens.

Floating​

block-floating.webp

The Floating block is a Group that you can lift out of the normal flow and pin to any point of its parent, for overlays such as a badge on a corner of an image or a caption over a photo.

Settings:

  • Link: Optional URL wrapping the whole block, with an option to open it in a new tab.
  • Layout: Direction, alignment, position, align text baseline, gap, wrap, reverse, clip overflow content, hide on desktop, and hide on mobile.
  • Absolute: Pin the block to an anchor point of its parent (Left top, Center top, Right top, Left center, Center Center, Right center, Left bottom, Center bottom, Right bottom, or Fill) with Top, Right, Bottom, and Left offsets.
  • Layer order: Higher values bring the block in front of other elements.
  • Size: Width (fit or fill), height (fit, fill, or custom), and max width for desktop and mobile.
  • Appearance: Color scheme, background (none, color, or gradient), corner radius, and border.
  • Trigger on parent hover: Mark the block as a hover parent, or pick its own hover type (in/out zoom, up, down, left, or right).
  • Animation: Global preset, custom effect and duration, or none.
  • Child blocks: Any theme block or app block.
tip

Combine Floating with the Trigger on parent hover setting: mark the surrounding Group or Layout item as Parent, then give the Floating block a hover type such as In up so it slides in only when the visitor hovers the card.