Opening image, 16:9

How a page is built

This is a sample page: it shows the text styles the site provides, so you can check readability, line height and rhythm before writing the real content.

The body of the page is built with the same blocks as the home page: text, images, quotes, notes. The table of contents beside it is generated from the second-level headings.

Text and formatting

A paragraph can hold a link in the text, a word in bold and a technical term such as appsettings.json.

  • Bulleted lists leave some room between items
  • Body text uses the secondary colour, bold text the main one
  • Links use the readable accent colour

A backoffice built around its users is a backoffice people actually use.

— Stefano Beretta

Lists and tables

For a procedure, a numbered list works best:

  1. Create the page under Home
  2. Fill in category, title and introduction
  3. Build the content with blocks and publish
BlockUse
Rich textParagraphs, headings, lists, tables
QuoteA highlighted sentence
AlertA note or a warning

Notes and asides

When a piece of information deserves to sit outside the flow of the text, use a note: it stays visible without interrupting the reading.