Sections

Joe Julian Updated by Joe Julian

Sections ↕

Sections bridge the gap between vertical layouts and maximising the available space on the page. They split the page into cards that can be read individually in a vertical layout. The cards are then automatically arranged horizontally in rows to make the best use of any remaining space on the page.

We believe this gives the best balance between having an accessible page for infrequent users and making it easy for frequent users to quickly access data.

When setting up sections we'd suggest the following:

  1. Keep sections succinct

👪 Sections work best when they contain a family of related fields, such as a section to pull together all the fields related to someone's address. This image shows a good use of sections to pull together related families of fields.

An exemplar image of a good use of small groups within well defined sections
  1. Keep sections roughly equal sizes

📏 Sections on the same tab work best together when they have roughly the same number of elements. Because sections are arranged in rows, having one section significantly larger than another can introduce space back onto the page. Below is an example of how this can happen with unevenly populated sections.

An image to illustrate whitespace introduced by different sizes of section
It's much more important to make your sections have a related family of fields than equal sizes. Reducing cognitive load and the improving the ease of information foraging should always be the priority over taking up available space on the page.
  1. Let sections do the horizontal arranging

⛔ Sections work best when they do not contain large horizontal groups. They were designed to answer the question of how to fill up empty space horizontally along the page. If a group is trying to achieve the same goal, then the two features effectively work against each other. In these cases you may find this causes the elements in a group to wrap onto a new row inside the section (as seen in the Wrapping animation).

It is better to use groups for small groupings in a vertical layout and sections for making effective use of the empty space on the page.

In certain situations the best use of sections may actually be to not use groups at all...

An image using only sections and no groups
Click here for guidance creating Sections

Was this article useful?

Groups

Contact