Eye catcher

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

Short description

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

When and how to use it

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.


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



  • Height depends on content


  • 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