Contrast

Contrast gebruik je als je elementen van je website wilt benadrukken of "beter uit de verf wilt laten komen", je elementen zijn dan te zien in een gekleurde achtergrond.

Hoe te gebruiken

Voor het Contrast component moet de .uk-contrast class gebruikt worden. Tekst, Buttons en alle andere elementen kunnen hierbinnen gebruikt worden.

Voorbeeld

Example

Tekst

Tekst: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Form

Button

Icon

Subnav

Markup

Hieronder staat de code van bovenstaand voorbeeld.

<div class="uk-block uk-block-secondary uk-contrast">
    <div class="uk-container">
        <div class="uk-grid uk-grid-match" data-uk-grid-margin="">
            <div class="uk-width-medium-1-3">
                <div class="uk-panel">

                    <h3>Text</h3>
                    <p>Tekst: Lorem ipsum <a href="#">dolor sit</a> amet, consectetur adipisicing elit.</p>

                    <h3>Form</h3>
                    <form class="uk-form">
                        <div class="uk-form-row"><input type="text" placeholder=":focus" /></div>
                    </form>
                </div>
            </div>
            <div class="uk-width-medium-1-3">
                <div class="uk-panel">

                    <h3>Button</h3>
                    <p>
                        <button class="uk-button">Button</button>
                        <button class="uk-button uk-button-primary">Button</button>
                    </p>

                    <h3>Icon</h3>
                    <p>
                        <a href="#" class="uk-icon-hover uk-icon-medium uk-icon-github"></a>
                        <a href="#" class="uk-icon-hover uk-icon-medium uk-icon-twitter"></a>
                        <a href="#" class="uk-icon-button uk-icon-dribbble"></a>
                        <a href="#" class="uk-icon-button uk-icon-html5"></a>
                    </p>
                </div>
            </div>
            <div class="uk-width-medium-1-3">
                <div class="uk-panel">

                    <h3>Subnav</h3>
                    <ul class="uk-subnav uk-subnav-pill">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li class="uk-disabled"><a href="#">Disabled</a></li>
                    </ul>
                    <ul class="uk-nav uk-nav-side">
                        <li class="uk-nav-header">Nav Side</li>
                        <li class="uk-nav-divider"></li>
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>