How to build a section page

How to build a section page

A section page allows users to dive deeper into an area. The user has chosen to know more, and the content is unfolded in more detail.

The primary focus is readability and comprehension. The section page should create a calm environment for users to be able to quickly skim, related and relevant content. It should always provide a next step. Section pages should link to the different subpages in that section.

Many different modules can be used on a section page, but they should always be used in a wide setting. Read more about the grid here.

1) Top header
Always start the page with either a Horizontal teaser or a Top header image.

2) Wide modules
A section page should always only consist of wide modules not narrow modules.
Read more about the grid here.

3) 50% or 100% modules
You can use both 50% and 100% wide modules, but a good variety is best. Read more about the grid here.

4) Create variation
After using a 100% teaser use a 2 column to create some variation.

5) Expand / collapse
When using the Expand / collapse module, make sure the content next to it will not stretch when tabs are expanded. A 1 column coloured teaser is preferable.

6) 2 columns that look like 1
You can make a 2-column teaser look like a 1 column using the same colours.

7) Circle teaser

Use the circle teaser module to highlight a few areas. This module is also good to create some white space on the page.

8) Horizontal teaser
The Horizontal teaser is always 100% and can only be used in wide. Read more about the grid here.

9) Splashes
Splashes can be used to highlight an area. It comes in different colours. Always make the text as big as possible.

10) Social Media
You can choose to include it on a page or not. It’s always sand with aubergine icons.

11) Onwards links
Only to be used on the bottom of a page and work best with icons. They should always have a white filled background. Text should be minimal.

12) Footer
The footer content can be different from site to site but should always be there.

View real example

Example of an incorrect section page


It is difficult to build a good section page, because it consists of many different modules that have to all fit together. The typical mistake is mixing the wide and narrow modules, and not being consistent about what level you design to. Read more about the page hierarchy here.

1) Top header
Always start the page with either a Horizontal teaser or a Top header image. If choosing a Top header image, don’t use 2 lines.

2) Wide modules
A section page should always only consist of wide modules not narrow modules.
Read more about the grid here.

3) No narrow modules
Don’t use a narrow text module on a white background on a section page, as it looks like an article. Read more about the grid here.

4) Expand / Collapse
Don’t have two of the Expand / Collapse modules next to each other.

5) No centered or left aligned text in narrow
Don’t use centered or left aligned text in a wide coloured content module. The modules are not created for that and it creates a zig zag effect.

6) Create variation
Don´t stack too many 2 column teasers on top of each other.

7) Expand / Collapse
Be carefull not to have too many drop downs in the Expand / Collapse module, and be aware of the module next to it will stretch depending on the amount of drop downs.

8) Create variation
Don’t use too many of the same modules underneath each other. Like here, where 3 of the 2-column teasers are in a row.

9) Circle teaser
You can use circle teasers to create variation and white space to a section page.

10) No centered text
Don’t use centered text in a wide coloured content module.

11) Expand / collapse in wide
Don’t use the Expand / collapse or the link module in a wide 100% because the line length gets too long.

12) Video format
When using a video in a horizontal teaser, make sure it’s cropped in the right size, and that the focus area is good and not hidden.

13) Onwards links
Only to be used on the bottom of a page and work best with icons. They should always have a white filled background. Text should be minimal.

14) Footer
The footer is missing

View real example