Page Sections can be created by both developers and authors, enabling the creation of unique layouts in seconds.


There are six section layouts to choose from when adding a new section.

  • Single Column

  • Two Columns

  • Three Columns

  • Sidebar right

  • Sidebar left

There are also two options to affect section width

  • Fullwidth makes the section reach the edges of the screen without any padding. Usually only used for structural elements like headers and footers, or in cases where each component on the page creates its own container.

  • Gapless removes the default padding applied between section columns. Usually used when placing components side-by-side.

Note that placing a component intended for a fullwidth section inside of a smaller column may cause it to appear broken. A future version of primo will allow you to define which section type and column widths a component may be placed into.

Styling Sections

By default, sections are wrapped in a .container tag which can be modified from the [Tailwind]( configuration to control padding and centering (Fullwidth sections don't have .container ).