Sections for authors

A section groups part of a page and gives it a purpose: a card, a block that folds away, a list of the site's latest posts. In the cratly editor you add one with the container button in the toolbar, or by selecting content and wrapping it. The dialog asks for the type — each type is described below — and offers the options that type has.

How a section looks is up to your site's design. This page says what each type is for; your site may look quite different from what the words suggest, and may bring types of its own that are not listed here.

Section

A part of the page with a topic of its own, usually opened by a heading. Use it to group what belongs together, and to arrange its first block — an image, usually — and the text after it with a layout.

Article

A piece that stands on its own and would make sense elsewhere too: a post, a news item, a review. It offers the same layouts as a section.

Aside

Content beside the main text that the text could do without: a note, a box of related links, a short biography. It offers the same layouts as a section.

Group

Holds content together only to arrange it — an image with the paragraph flowing around it, say, or a heading with some text in one cell of a grid. A group means nothing of its own: content with a topic of its own is better a section, and content that stands on its own an article. It offers the same layouts as a section.

Layout

Sections, articles, asides and groups arrange their first block and the content after it in one of five ways, offered as buttons:

Choice	What you get
Default	The block stands above the content.
Text flowing around it, block on the left or right	The block sits at one side, the text flows around it and on below it.
Side by side, block on the left or right	Block and text stand in two columns; the text does not run below the block.

On a narrow screen — a phone, mostly — the block stands above the content again, whichever layout you chose.

Header, Footer, Main, Navigation

These mark the parts of a page the browser and screen readers find their way by: introductory content, closing information, the main content, and a group of links. Your site's design usually provides them already, so you will rarely need them inside a page.

Card

A unit of its own — an image, a heading and a few lines, say — set apart from the text around it. Cards side by side go into a grid.

Links to picks a page of your site: the whole card then leads there, and a "Read more" link is added. Screen readers announce it together with the title of that page, so several cards in a row can be told apart. Links you write into the card keep working.

Details

Content collapsed under a title until the reader opens it — answers in a FAQ, say, or information only some readers need.

• Title is always visible; clicking it opens or closes the content.
• Expanded at first shows the content right away.
• Accordion: details with the same accordion name close each other, so only one of them is open at a time.

Browsers such as Chrome and Edge also find collapsed content when a reader searches the page, and open it.

Grid

Puts the blocks inside it side by side in up to two, three or four columns, starting a new row when one is full. Every paragraph, image or embedded container fills one cell — to put a heading and some text into one cell, wrap them in a container first: a group, a card, a section, whichever fits. On a narrow screen the grid drops columns by itself.

A grid of images with captions makes a gallery. Give each image its caption in the image dialog; it is shown below the image.

Page list

Lists pages of your site — the latest posts of a blog, the sub-pages of a topic. Anything you write inside the section is shown above the list.

• Which pages: relative to the page you are on, 1 lists its sub-pages, 0 the pages beside it. Alternatively, pick a page under Pages below this page, or a level of the site under Level from the site root.
• Order, Number of entries and Skip entries choose what is listed; with Entries per page, readers page through a long list.
• Show dates, Show introductory texts and Show teaser images add more to each entry.

Video

A video in the text, with controls to play it. Pick the video file and, if you like, a poster image shown before it plays. Describe it under Accessible label when the text around does not say what the video shows.

Cover

An image or a video across the whole width and height of the window, usually at the top of a page, with whatever you write inside the section laid on top of it.

• Focal point keeps the important part of the picture in view when a window crops it, for example center top.
• Description says what the picture shows, for those who cannot see it; leave it empty when it is decoration.
• Content on top tells whether your text is light over a dark picture or dark over a bright one.