Introduction

The Widget Header is the optional header of a widget on the home page of the app, above its cells. It gives the list a context, with a title and a link that leads to the full section.

Anatomy

The title and the link

The header is made of the title of the widget and, optionally, a link on the opposite side. The link reads "View all" and takes the user to the section the widget displays. In the back office, the font, the size on each device and the color of the title and of the link are set for each widget.

Dynamic height

The header has no fixed height. It grows with the size of its title and the number of lines it takes.

Properties

Shape

The Shape atom of the app applies to the header, with Sharp, Rounded or Round corners.

The header takes it only when the widget has side margins and no background or border of its own. When the widget has a background or a border, it carries the shape itself, and the header, at its top, follows its upper corners. Without side margins, the header keeps square corners.

Border

In the back office, the header can take a border color. The Border then runs on all four sides when the widget has side margins, and only on the top and bottom sides when it has none.

Shadow

The header can carry a level 2 Shadow when the shadow of the widget is enabled. It appears only when the header has a background or a border and the widget itself has neither.

Background

The header takes its own Background, a color with its opacity, set in the back office. Without one, it stays transparent.

Layout

Spacing

When the header or the widget has a background or a border, the header keeps a padding on every side, 1G on the left and on the right, and a vertical padding above and below the title. When both are transparent and the widget has margins, only the padding below the title remains, and the title lines up with the edge of the cells. Without side margins, the title keeps 1G from the edge of the screen.

Alignment

The title can be aligned left, center or right. Aligned left, the title has the link on its right. Aligned right, the row is reversed and the link moves to the left. Centered, the title sits in the middle of the header and the link stays on the right, unless the title runs on several lines. The link then moves below it, centered too. On the left or on the right, a title on several lines keeps the link vertically centered.

Margins and full screen

By default, a widget takes the margins set for the whole app. In the back office, they can also be customized for each widget, on each side and for each device. Without side margins, the header spans the full width of the screen.

On laptop and desktop screens, the content sits in a central column, and a widget can also be set to full screen. The background of its header then extends beyond this column, while the title and the link stay aligned with it.