Eye catcher

This block is meant to catch the attention of the viewer and then keep their interest with its content.

Guidelines

This component is meant to catch the visitor’s attention and to promote the content of the page, for example through presenting interesting facts or a quote/highlight. It is big and bright for this purpose.

Eye catcher

Usage

Use it to break up long texts and make the reading experience richer. Also, to highlight content and interesting facts that might interest a (potential) reader.

There is a tweet functionality that can be used if you feel that the content might be sharable for the readers.

Behaviour

There are no major changes (except size) between the different viewports.

Do's and don'ts

You can use more than one in the same text, but try to make them of different sizes and preferably change up the direction they extend (left and right rather than two extending to the left, for example).

Related to

 

Specification

  • Height depends on content

Colours

  • Green background #379D00, text #FFFFFF
  • Yellow background #FFC500, #000000
  • Purple background #673AB6, text #FFFFFF
  • Red background #F03529, text #FFFFFF
  • Blue backround #0092E1, text #FFFFFF 

 

Thinner and thicker versions

Eye catcher