第一吃瓜网

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.

Scroll to Top