Contrast

Improve the appearance of elements when placing them on colored backgrounds or images.

Usage

To apply this component, just add the .uk-contrast class to a container or the element whose color you would like to adjust. Text, Buttons, the nav side from the Nav component, the subnav line and subnav pill from the Subnav component, Icons, default forms from the Form component as well as the list line from the List component will automatically change their appearence.

This comes in really handy when placing content inside differently colored blocks from the Block component or on top of images.

Example

Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Form

Button

Icon

Subnav

Markup

<div class="uk-contrast">...</div>