Appearance
Layout Blocks
Layout blocks arrange other blocks. They hold no content of their own; you drop other blocks inside them.
Group
The Group is the main building block of a page. It is a horizontal band that runs from edge to edge, with its own background, border and padding, and it holds the blocks you put inside it.
Most pages are a stack of Groups: one for the hero, one for featured products, one for a newsletter signup, and so on.
| Setting | What it does |
|---|---|
| Layout | Constrained centers the blocks inside at the chosen width. Full width lets them run the whole width of the band. |
| Content Width | The width used by a constrained layout: Narrow (768px), Default (1152px) or Site (1440px). These follow the widths in Design Settings. |
| Vertical Padding | Space above and below the blocks: None, Small, Medium or Large |
| Side Padding | Default keeps the side gutters. Choose None for a Group placed inside another Group, which already has them. |
| Block Spacing | Space between the blocks inside, from top to bottom |
| Minimum Height (px) | Makes the band at least this tall, for example for a hero with a background image. 0 means as tall as its content. |
| Content Position | Where the blocks sit when the band is taller than they are: Top, Center or Bottom |
| Text Color | Text color for everything inside, for example white text on a dark background |
| Background Color | Fills the band from edge to edge |
| Background Image | An image over the background color. Choose how it fills the band with Background Size and which part stays visible with Background Position. |
| Overlay (%) | Darkens the background image so text on it stays readable |
| Border | A thin line at the top, bottom, both or all sides |
| Corners | Rounded corners, useful for a Group used as a card inside another Group |
| HTML Element and HTML Anchor | For search engines and screen readers, and for links that jump to this section, such as #faq |
Building a boxed section
Put a Group with a background color and rounded corners inside another Group. The outer Group sets the width and spacing, and the inner one becomes a card.
Row
A Row places blocks side by side in equal columns. On smaller screens the columns stack.
| Setting | What it does |
|---|---|
| Columns (desktop) | Number of columns from 1024px wide, 1 to 6 |
| Columns (tablet) | Columns between 768px and 1024px. Empty uses the desktop count, up to 3. |
| Columns (mobile) | Columns below 768px. Empty stacks everything in one column. |
| Vertical Alignment | How blocks of different heights line up: Stretch, Top, Center or Bottom |
| Gap (px) | Space between the columns |
Column
Use Columns inside a Row when the columns should have different widths. A Column's Span sets how many of the Row's columns it covers. For example, in a Row with 3 columns, a Column with span 1 next to a Column with span 2 gives a one-third and two-thirds layout. On tablets and phones each Column takes one column.
Tabs and Tab
Tabs show one panel at a time. Add a Tab inside the Tabs block for each panel, give it a Title, and put any blocks inside it. A Tab with nothing inside is not shown.
| Setting | What it does |
|---|---|
| Orientation | Horizontal puts the tab titles above the panel. Vertical puts them in a column beside it on large screens. |
On product pages, Tabs are the usual place for the description, the specifications and the reviews.
Spacer
An empty block that adds vertical space between two blocks. Set the space in Height (px).
Divider
A horizontal line between two blocks. Spacing sets the room above and below the line.