<div class="u-p-large u-mb-large" style="background-color: #EBF1FC">
    <span class="c-badge">Primary</span>
    <span class="c-badge c-badge--topdeal">Top deal</span>
    <span class="c-badge c-badge--benefit">Benefit</span>
    <span class="c-badge c-badge--money">Money</span>
    <span class="c-badge c-badge--rating">Rating</span>
    <span class="c-badge"><i class="c-badge__icon c-badge__icon--left icon-tick"></i> With icon left</span>
    <span class="c-badge">With icon right <i class="c-badge__icon c-badge__icon--right icon-tick"></i></span>
</div>

<div class="u-p-large" style="background-color: #EBF1FC">
    <span class="c-badge c-badge--pill">Pill primary</span>
    <span class="c-badge c-badge--pill c-badge--topdeal">Pill top deal</span>
    <span class="c-badge c-badge--pill c-badge--benefit">Pill benefit</span>
    <span class="c-badge c-badge--pill c-badge--money">Pill money</span>
    <span class="c-badge c-badge--pill c-badge--rating">Pill rating</span>
    <span class="c-badge c-badge--pill"><i class="c-badge__icon c-badge__icon--left icon-tick"></i>Pill with icon left</span>
    <span class="c-badge c-badge--pill">Pill with icon right <i class="c-badge__icon c-badge__icon--right icon-tick"></i></span>
</div>

<div class="u-mb-large">
    <button class="c-button">button</button>
    <button class="c-button c-button--secondary">secondary</button>
    <button class="c-button c-button--tertiary">tertiary</button>
    <button class="c-button c-button--accent">accent</button>
    <button class="c-button c-button--grey">grey</button>
    <div class="u-p u-mt-large" style="background-color: #f5f5f5">
        <h4 class="u-mb-small">Background</h4>
        <button class="c-button c-button--accent-bordered">accent bordered</button>
        <button class="c-button c-button--grey-bordered">grey bordered</button>
        <button class="c-button c-button--accent-dashed">accent dashed</button>
    </div>
</div>

<div class="u-mb-large">
    <h1 class="u-mv">Disabled</h1>
    <button class="c-button" disabled>button</button>
    <button class="c-button c-button--secondary" disabled>secondary</button>
    <button class="c-button c-button--tertiary" disabled>tertiary</button>
    <button class="c-button c-button--accent" disabled>accent</button>
    <button class="c-button c-button--grey" disabled>grey</button>
    <div class="u-p u-mt-large" style="background-color: #EBF1FC">
        <h4 class="u-mb-small">Background</h4>
        <button class="c-button c-button--accent-bordered" disabled>bordered</button>
        <button class="c-button c-button--grey-bordered" disabled>grey bordered</button>
        <button class="c-button c-button--accent-dashed" disabled>dashed</button>
    </div>
</div>


<div class="u-mb-large">
    <h1 class="u-mv">Sizes</h1>
    <button class="c-button c-button--large">large</button>
    <button class="c-button c-button--small">small</button>
</div>

<div class="c-form__field">
    <input type="text" class="c-input c-input--small" placeholder="c-input--small">
</div>
<div class="c-form__field">
    <input type="text" class="c-input" placeholder="c-input - Default input">
</div>
<div class="c-form__field">
    <input type="text" class="c-input c-input--large" placeholder="c-input--large">
</div>

<h1 class="u-mb-large">Select</h1>
<div class="c-form__field">
    <select class="c-input c-input--small">
        <option>c-input--small</option>
        <option>c-input--small</option>
    </select>
</div>
<div class="c-form__field">
    <select class="c-input">
        <option>c-input - Default select</option>
        <option>c-input - Default select</option>
    </select>
</div>
<div class="c-form__field">
    <select class="c-input c-input--large">
        <option>c-input--large</option>
        <option>c-input--large</option>
    </select>
</div>

<h1 class="u-mb-large">
    With custom icon
</h1>
<div class="c-form__field">
    <div class="c-input__icon-over c-input__icon-over--right">
        <select class="c-input c-input--small">
            <option>c-input--large</option>
            <option>c-input--large</option>
        </select>
        <i class="c-input__icon c-input__icon--right icon-caret u-text-accent"></i>
    </div>
</div>
<div class="c-form__field">
    <div class="c-input__icon-over c-input__icon-over--right">
        <select class="c-input c-input">
            <option>c-input--large</option>
            <option>c-input--large</option>
        </select>
        <i class="c-input__icon c-input__icon--right icon-caret u-text-accent"></i>
    </div>
</div>
<div class="c-form__field">
    <div class="c-input__icon-over c-input__icon-over--right">
        <select class="c-input c-input--large">
            <option>c-input--large</option>
            <option>c-input--large</option>
        </select>
        <i class="c-input__icon c-input__icon--right icon-caret u-text-accent"></i>
    </div>
</div>

<h1 class="u-mb-large">Inputs with icons</h1>
<div class="c-form__field">
    <label for="text2" class="c-label">Input with icon left and right</label>
    <div class="c-input__icon-over c-input__icon-over--left c-input__icon-over--right">
        <i class="c-input__icon c-input__icon--left icon-adults"></i>
        <input type="text" id="text1" class="c-input" placeholder="Placeholder">
        <i class="c-input__icon c-input__icon--right icon-adults"></i>
    </div>
</div>
<div class="c-form__field">
    <label for="text2" class="c-label">Input with icon left</label>

    <div class="c-input__icon-over c-input__icon-over--left">
        <i class="c-input__icon c-input__icon--left icon-adults"></i>
        <input type="text" id="text2" class="c-input" placeholder="Placeholder">
    </div>
</div>
<div class="c-form__field">
    <label for="text2" class="c-label">Input with icon right</label>

    <div class="c-input__icon-over c-input__icon-over--right">
        <input type="text" id="text3" class="c-input" placeholder="Placeholder">
        <i class="c-input__icon c-input__icon--right icon-adults"></i>
    </div>
</div>
<div class="c-form__field">
    <label for="text2" class="c-label">
        Element that simulates an input with icon right and icons inside <br/>
        * requires some custom alignments when icons are bigger
    </label>
    <div class="c-input__icon-over c-input__icon-over--right">
        <div type="text" class="c-input c-input--large">
            <i class="icon-adults"></i>
            <span>lorem</span>
            <i class="icon-adults"></i>
            <span>ipsum</span>
        </div>
        <i class="c-input__icon c-input__icon--right icon-adults"></i>
    </div>
</div>

<h1 class="u-mb-large">Input state</h1>
<div class="c-form__field">
    <input type="text" class="c-input" disabled placeholder="Disabled input">
</div>
<div class="c-form__field">
    <input type="text" class="c-input" readonly placeholder="Readonly input">
</div>
<div class="c-form__field">
    <select class="c-input" disabled>
        <option>Disabled select</option>
        <option>Disabled select</option>
    </select>
</div>
<div class="c-form__field">
    <select class="c-input" readonly="">
        <option>Readonly select</option>
        <option>Readonly select</option>
    </select>
</div>

<div class="c-form__field">
    <input type="text" class="c-input c-input--small c-input--has-error" placeholder="c-input--small">
    <span class="c-form-state c-form-state--error c-form-state--icon c-form-state--left">
        Error message with icon - aligned left
    </span>
</div>
<div class="c-form__field">
    <input type="text" class="c-input c-input--has-error" placeholder="c-input" value="c-input">
    <span class="c-form-state c-form-state--error">
        Default error message
    </span>
</div>
<div class="c-form__field">
    <input type="text" class="c-input c-input--large c-input--has-error" placeholder="c-input--large">
    <span class="c-form-state c-form-state--error c-form-state--icon c-form-state--right">
        Error message with icon - aligned right
    </span>
</div>

<div class="u-mb">
    <div class="c-panel">
        <div class="c-panel__head">
            Panel heading
        </div>
        <div class="c-panel__content">
            Panel content <br/>
            Some quick example text to build the panel content.<br/>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        </div>
    </div>
</div>

<div class="u-mb">
    <div class="c-panel c-panel--grey">
        <div class="c-panel__head">
            Panel grey heading
        </div>
        <div class="c-panel__content">
            Panel grey content <br/>
            Some quick example text to build the panel content.<br/>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        </div>
    </div>
</div>

<div class="u-mb">
    <div class="c-panel c-panel--benefit">
        <div class="c-panel__head">
            Panel benefit heading
        </div>
        <div class="c-panel__content">
            Panel benefit content <br/>
            Some quick example text to build the panel content.<br/>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        </div>
    </div>
</div>