Titles

Each page, modal pop-up, or widget must contain a title to structure the page. It is important to help users quickly identify where they are, and to introduce the subject of the page.

h1 title

The h1 title is displayed on each page of the document management view. Try to always provide one.

h2 title

As an alternative to h1, since the platform is not necessarily parsed by Google engines, the h2 title can be used as main title, with a border.

h3 title

The default h3 title is used as a subtitle, structuring the content with its neutral bottom border.

h3.summaryTitle

This h3.summaryTitle is commonly used in all the widgets on the Summary view of a document, or in your custom tab designed in Studio.

h4 title

A small title with a bottom border, designed to be used to structure small paragraphs.

h5 title

An equivalent to a h4 title, without a border, to structure content included under a h4 title.

h6 title

The smallest title you can use before a paragraph, or in boxes like .foldableBox or .bubbleBox.

Titles with actions

Each h1 title of a page can be displayed with a set of actions or links on the same line. There are three ways to display actions on the same line as the main title.

Page title with Back link

Back to the list

The h1 title and the .action_bar .directoryBack action class are included in a .globalActionBar div class. A .clear div class is used is used before closing the .globalActionBar div class to stop the floating behavior of blocks.

Plus
- Download
- Follow
- Export
- Print

For now, here is how Studio is generating the actions: in a div without class, the h1 is included in a .titleBlock form class. Then, a .globalActions div class contains another .globalActions div class, which contains a .contextActions div class. In the .contextActions div class, each action is a .widgetPanel .actionsWidgetPanel div class, and the dropdown menu is a .actionList ul class. A .clear div class is used after the form closing tag to stop the floating behavior of blocks.