Anatomy
A highlight block serves as a container that can house content such as text, images, or other components. Therefore, it doesn’t have a specific structure apart from the container itself.
As stated, content such as text, images, or other components such as a button or NBA can be presented in a highlight block. This means that any number of configurations is possible, for example, like the one below.
Types
There is one variable aspect to a highlight block: colour. There are several colour options available, depending on the type of highlight it should communicate. By default, a highlight block is presented in blue since its main use case is to highlight information. Other options are yellow, red and green.
Just like the Notification, a colour is linked to its purpose. As mentioned, a highlight block is mostly used to highlight information. Therefore, blue is the default type. For content that should have a warning state use yellow, for an error state use red and for a success state use green.
