Contextual Backgrounds
A Contextual Background is way to display and draw attention to a small snippet of important information. It places your content inside a color block. Depending on which color you choose, the font color will change to either white or black.
Do not change your text color in the WYSIWYG editor if you chose this option. They’re specifically picked for accessibility reasons.
Due to their strong color palette, it is better to use Contextual Backgrounds with smaller bits of information rather than long paragraphs.
Using this option is one of the few instances excluding a subtitle might be preferable.
Contextual Background - Default
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.
Contextual Background - Primary
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.
Contextual Background - Secondary
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.
Contextual Background - Success
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.
Contextual Background - Warning
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.
Contextual Background - Info
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.
Contextual Background - Danger
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.
Contextual Background - White
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.
Contextual Background - Black
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.