• CSS
• Layout
• Typography
• Buttons
• Form elements
• Images
• Pagination
• Badges

Form elements

Note: some support for iOS Safari has been added.

Input, label, textarea & select

Button

Label Textarea label Label Select inside a label

Check me Check me too~

<form>
    <p>
        <input class="zo-input zo-input--singleLine" placeholder="Type some text." />
        <input class="zo-btn zo-btn--primary" type="submit" value="Input button" />
    </p>
    <p>
        <input class="zo-input zo--radius zo-input--singleLine" placeholder="Type some text." />
        <button class="zo-btn zo-btn--primary zo--radius" type="button">Button</button>
    </p>
    <label class="zo-label zo-label--hasContentBox">
        Label
        <input class="zo-input zo--radius zo-label__input zo-input--singleLine" placeholder="Input inside a label" />
    </label>
    <label class="zo-label zo-label--hasContentBox">
        Textarea label
        <textarea class="zo-input zo--radius zo-label__input" placeholder="Textarea inside a label"></textarea>
    </label>
    <label class="zo-label zo-label--hasSelect">
        Label
        <select class="zo-select zo--radius zo-label__select">
            <option>Select inside a label</option>
        </select>
    </label>
    <p>
        <label class="zo-checkLabel"><input class="zo-check" type="checkbox" /> Check me</label>
        <label class="zo-checkLabel"><input class="zo-check" type="checkbox" /> Check me too~</label>
    </p>
</form>

Input groups

Input groups are not supported natively as in Bootstrap, but can be mimicked using the grid system.

Note: levels of nesting vary between different types of form elements because of different box-sizing models they follow.

Addon

Button

Button I am a select box

$ Button

<form>
    <p class="zo-g">
        <span class="zo-g__col zo-g__col--s9 zo-g__col--m10">
            <span class="zo-label zo-g__inputBox zo-label--hasContentBox">
                <input class="zo-input zo-input--singleLine zo-label__input zo-g__input zo--radiusLeft zo-input--borderlessRight" placeholder="Input with an addon" id="testInput" />
            </span>
        </span>
        <label class="zo-g__col zo-g__col--s3 zo-g__col--m2" for="testInput">
            <span class="zo-addon zo--radiusRight">Addon</span>
        </label>
    </p>
    <p class="zo-g">
        <span class="zo-g__col zo-g__col--s9 zo-g__col--m10">
            <label class="zo-label zo-g__inputBox zo-label--hasContentBox">
                <input class="zo-input zo-input--singleLine zo-label__input zo-g__input zo--radiusLeft zo-input--borderlessRight" placeholder="Input inside a group" />
            </label>
        </span>
        <button class="zo-btn zo-btn--primary zo-g__col zo-g__col--s3 zo-g__col--m2 zo-g__btn zo--radiusRight" type="button">Button</button>
    </p>
    <p class="zo-g">
        <button class="zo-btn zo-btn--primary zo-g__col zo-g__col--s3 zo-g__col--m2 zo-g__btn zo--radiusLeft" type="button">Button</button>
        <span class="zo-g__col zo-g__col--s9 zo-g__col--m10">
            <select class="zo-select zo-g__select zo--radiusRight zo-input--borderlessLeft">
                <option>I am a select box</option>
            </select>
        </span>
    </p>
    <p class="zo-g">
        <label class="zo-g__col zo-g__col--s2 zo-g__col--m1" for="testInput1">
            <span class="zo-addon zo--radiusLeft">$</span>
        </label>
        <span class="zo-g__col zo-g__col--s7 zo-g__col--m9">
            <span class="zo-label zo-g__inputBox zo-g__inputBox--middle zo-label--hasContentBox">
                <input class="zo-input zo-input--singleLine zo-label__input zo-g__input zo-input--borderlessLeft zo-input--borderlessRight" placeholder="Input with an addon" id="testInput1" />
            </span>
        </span>
        <button class="zo-btn zo-btn--primary zo-g__col zo-g__col--s3 zo-g__col--m2 zo-g__btn zo--radiusRight" type="button">Button</button>
    </p>
</form>

Inside a navbar

A simple form can also be put inside a navbar.

<div class="zo-navbar zo-navbar--dark zo-navbar--bordered zo--radius">
    <div class="zo-container">
        <a href="#" class="zo-navbar__link zo-navbar__toggle zo-navbar__link--bgDark" role="button" data-zo-navbar="#formNav"></a>
        <h2 class="zo-navbar__brand">
            <a href="/zoaui/" class="zo-navbar__link zo-navbar__brand__link zo-navbar__link--bgDark">ZoaUI</a>
        </h2>
        <div class="zo-navbar__nav zo-navbar__nav--bgDark" id="formNav">
            <ul class="zo-navbar__list">
                <li class="zo-navbar__item">
                    <a href="/zoaui/css/" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">CSS</a>
                </li>
                <li class="zo-navbar__item">
                    <a href="/zoaui/js/" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">JavaScript</a>
                </li>
            </ul>
            <ul class="zo-navbar__list zo-navbar__list--right">
                <li class="zo-navbar__item">
                    <form class="zo-g zo-navbar__form zo-navbar__form--compressed">
                        <div class="zo-g__col zo-g__col--s9 zo-g__col--m8">
                            <label class="zo-label zo-label--hasContentBox zo-g__inputBox">
                                <input class="zo-input zo-input--singleLine zo-input--compressed zo-g__input zo-label__input zo-input--borderless zo--radiusLeft" placeholder="Text" />
                            </label>
                        </div>
                        <input type="submit" value="Submit" class="zo-g__btn zo-btn zo-btn--compressed zo-btn--info zo-g__col zo-g__col--s3 zo-g__col--m4 zo--radiusRight" />
                    </form>
                </li>
            </ul>
        </div>
    </div>
</div>