Help center › Apps

Layout: columns, tabs, cards and lists

Columns and Tabs hold other blocks, arranging them in columns or under tabs. Use Expandable sections and FAQ for collapsible content, Cards for an overview page, Timeline or Stacking cards for a process, Table and Pros and cons for data; Spacer and Divider set the rhythm.

Blocks that hold other blocks

  • Columns – one, two or three columns: one column (panel), 50 / 50, 33 / 67, 67 / 33, 40 / 60, 60 / 40, 33 / 33 / 33. You can set the gap, vertical alignment, mobile order and an offset (a staggered pair), and per column a background, padding, corners, shadow and border. Add blocks into the columns with Add block. If you switch to fewer columns, the last column's blocks are deleted – you are warned first.
  • Tabs – clickable tabs, each with its own blocks; the tab alignment is adjustable.

Collapsible content and Q&A

  • Expandable sections – topics stacked in panels that open on click. Layout: a list or cards next to the title; a row can expand or act as a link; it can start open and be numbered.
  • FAQ – frequently asked questions with collapsible answers; search field, row frame, numbering and colours are adjustable.

Cards and processes

  • Cards – a card grid as a grid, swipeable row, featured + grid or mosaic, in 2–4 columns. A card is either your own, or a chosen news item, event or page that updates itself when that content changes. If the chosen content is not published, visitors do not see the card – the editor warns you.
  • Stacking cards – cards that layer on top of each other as the visitor scrolls; for a process or a short story.
  • Timeline – events in order: vertical, horizontal or path.

Data and comparison

  • Table – rows and columns, with a header row, stripes, borders and a header colour.
  • Pros and cons – two lists side by side (pros and cons, who it is for and who not): columns, magazine or table.

Small pieces

  • Spacer – empty vertical space in four sizes.
  • Divider – a line or ornament in several styles.
  • Tags – a row of clickable tags: pill, outlined or underlined.
  • Scrolling ticker – words scrolling continuously; speed, direction, separator and a pause control are adjustable.
  • Breadcrumb – the path from the home page to the current page, automatically from the pages' parent page setting, or from pages you pick.
  • Page header – for the top of news and events: takes the title, lead, date, venue and image from the content itself; change them in the content's settings.