Services page

A services page is a menu. Visitors should be able to scan it in ten seconds, find the thing they need and click through.

Sketch of a services page with three service cards

The card grid

Use one card per service: an icon or small image, a name, two lines on what it is and who it's for, and a link to the detail page. Build the grid with a container set to Grid (three columns desktop, two tablet, one mobile) or a row container with wrapping children of equal width.

The Icon Box widget covers icon, title and text in one; for a card with a link at the bottom, a container with Icon, Heading, Text Editor and Button widgets gives more control. Make the whole card clickable by setting the container's link (available on containers) rather than adding several separate links.

Write the cards from the visitor's side

"Bookkeeping" says what you do. "Monthly bookkeeping for shops and cafés, so your VAT return is ready on time" says what they get. Keep each card to the same length so the grid stays even.

Below the grid

  • How we work: three or four numbered steps.
  • Who it's for: the types of client or industry you serve.
  • Questions: an accordion with the five questions you're asked most (see support / FAQ block).
  • Call to action.

Each service then gets its own page; see the service detail layout.

Questions

How many services should I list?

Three to six reads well. If you have more, group them into categories, each with its own section or page.