Form elements

All the form elements across the site should conform to these patterns.

Buttons

Our buttons come in Primary, Secondary and Tertiary flavours, two available colours for each.

Primary Buttons

<div class="gel-layout">

    <button class="btn btn--primary btn--cerulean">Cerulean</button>
    <button class="btn btn--primary btn--cerulean" disabled>Disabled</button>

</div>

<div class="gel-layout">

    <button class="btn btn--primary btn--slate">Slate</button>
    <button class="btn btn--primary btn--slate" disabled>Disabled</button>

</div>

<div class="gel-layout">

    <button class="btn btn--primary btn--cerulean--negative">Cerulean Negative</button>
    <button class="btn btn--primary btn--cerulean--negative" disabled>Disabled</button>

</div>

<div class="gel-layout">

    <button class="btn btn--primary btn--slate--negative">Slate Negative</button>
    <button class="btn btn--primary btn--slate--negative" disabled>Disabled</button>

</div>

Secondary Buttons

<div class="gel-layout">

    <button class="btn btn--secondary btn--cerulean">Cerulean</button>
    <button class="btn btn--secondary btn--cerulean" disabled>Disabled</button>

</div>

<div class="gel-layout">

    <button class="btn btn--secondary btn--slate">Slate</button>
    <button class="btn btn--secondary btn--slate" disabled>Disabled</button>

</div>

<div class="gel-layout">

    <button class="btn btn--secondary btn--cerulean--negative">Cerulean Negative</button>
    <button class="btn btn--secondary btn--cerulean--negative" disabled>Disabled</button>

</div>

<div class="gel-layout">

    <button class="btn btn--secondary btn--slate--negative">Slate Negative</button>
    <button class="btn btn--secondary btn--slate--negative" disabled>Disabled</button>

</div>

Tertiary Buttons

<div class="gel-layout">

    <button class="btn btn--tertiary btn--cerulean">Cerulean</button>
    <button class="btn btn--tertiary btn--cerulean" disabled>Disabled</button>

</div>

<div class="gel-layout">

    <button class="btn btn--tertiary btn--slate">Slate</button>
    <button class="btn btn--tertiary btn--slate" disabled>Disabled</button>

</div>

<div class="gel-layout">

    <button class="btn btn--tertiary btn--cerulean--negative">Cerulean Negative</button>
    <button class="btn btn--tertiary btn--cerulean--negative" disabled>Disabled</button>

</div>

<div class="gel-layout">

    <button class="btn btn--tertiary btn--slate--negative">Slate Negative</button>
    <button class="btn btn--tertiary btn--slate--negative" disabled>Disabled</button>

</div>

Icon Buttons

Icons on buttons can come before or after the button text, depending on desired prominence.

<div class="gel-layout">

    <button class="btn btn--primary btn--slate icon--data--before">Markets Data</button>
    <button class="btn btn--primary btn--slate icon--data--before" disabled>Disabled</button>

</div>

<div class="gel-layout">

    <button class="btn btn--secondary btn--slate icon--chevron-down--after">Toggle</button>
    <button class="btn btn--secondary btn--slate icon--chevron-down--after" disabled>Disabled</button>

</div>

<div class="gel-layout">
    <button type="button" class="btn btn--secondary btn--slate btn--icon--menu">Toggle Navigation</button>
</div>

Inputs

Small Input

<form class="gel-layout"> <!-- gel-layout class is a temporary namespacing for new design styles -->
    <label for="search-text" class="is-vishidden">Search the AFR</label>
    <input type="text" name="search-text" id="search-text" class="search-text" placeholder="Search">
</form>