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.
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).
- 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