Labels

Label above input

<p>
    <label for="a">Label</label>
    <input id="a" type="text">
</p>

Label beside input

<p class="inline-container">
    <label class="label--inline" for="b">Label</label>
    <input id="b" type="text">
</p>

Required label

<p>
    <label class="label--required" for="g">Label</label>
    <input id="g" required type="text">
</p>

Note

This is a note. 

<p>
    <label for="h">Label</label>
    <input id="h" type="text">
    <span class="note">This is a note.</span>
</p>

Alert

This is an alert. 

<p>
    <label for="i">Label</label>
    <input id="i" type="text">
    <span class="note note--alert">This is an alert.</span>
</p>

Multiple labels aligned beside inputs

This is a note.
<div class="form">
    <div class="form__row">
        <div class="form__column form__column--label">
            <label class="form__label" for="j">First name</label>
        </div>
        <div class="form__column">
            <input id="j" type="text">
        </div>
    </div>
    <div class="form__row">
        <div class="form__column form__column--label">
            <label class="form__label" for="k">Email</label>
        </div>
        <div class="form__column">
            <input id="k" type="text">
            <div class="note">This is a note.</div>
        </div>
    </div>
    <div class="form__row">
        <div class="form__column form__column--label">
            <label class="form__label" for="l">URL</label>
        </div>
        <div class="form__column">
            <input id="l" type="text">
        </div>
    </div>
    <div class="form__row">
        <div class="form__column form__column--label">
            <label class="form__label" for="m">Enable</label>
        </div>
        <div class="form__column">
            <input id="m" type="checkbox">
        </div>
    </div>
    <div class="form__row">
        <div class="form__column form__column--label">
            <label class="form__label" for="n">Color</label>
        </div>
        <div class="form__column">
            <select id="n">
                <option>red</option>
                <option>blue</option>
            </select>
        </div>
    </div>
    <div class="form__row">
        <div class="form__column form__column--label">
            <label class="form__label" for="o">Comments</label>
        </div>
        <div class="form__column">
            <textarea id="o"></textarea>
        </div>
    </div>
</div>