Focus bar block

A block to enhance and highlight information (such as numbers and results) relating to the page content.

Short description

To have the ability to give sections of content more attention than plain text. It can also be used to visualize highlighted information horizontally.

When and how to use it

The Focus bar should mostly be used together with the Welcome block. The purpose of that is to introduce the reader to the main points of the content below. For example, if the page is about sustainability, then the Focus bar might present numbers and results that SEB is proud about regarding this area. The block also has a pictogram picker, so that each section might use a pictogram to illustrate its subject.

Behaviour

Background colour is always grey. The block expands in both directions, to full width. The height is dynamic, but has a max height. When the ‘Focus bar’ block is next to a ‘Welcome block’, there is no space separating them. They are completely adjacent. However, if the ‘Focus bar’ block is used next to any other block, it will have normal spacing to its neighbors.

The block can contain 2 to 4 sections of information. In desktop, they will simply try to be as centralized as possible horizontally. However when in the tablet viewport, if there are 4 sections, they will display in a 2 by 2 orientation.

In the mobile viewport the sections will be oriented in a vertical fashion.

Do's and don'ts

Do

  • It should contain short amounts text – since the block will be as tall as the longest text in a section which can create unbalance against the other sections.

Don't

  • Never more than one ‘Focus bar’ per page.

 

Desktop

Mobile

Specification