Checkbox

<div style="max-width: 400px; padding: 1em;">
    <label class="cb" for="checkbox-0">
        <input id="checkbox-0" name="public_notices" type="checkbox" value="public_notices" class="cb-f ">
        <span class="cb-l">Public Notices</span>
    </label>
    <label class="cb" for="checkbox-1">
        <input id="checkbox-1" name="public_notices" type="checkbox" value="public_notices" class="cb-f " checked>
        <span class="cb-l">Intergovernmental Relations</span>
    </label>
    <label class="cb" for="checkbox-2">
        <input id="checkbox-2" name="public_notices" type="checkbox" value="public_notices" class="cb-f ">
        <span class="cb-l">Here is a really long label that will wrap at some point.</span>
    </label>
    <label class="cb" for="checkbox-3">
        <input id="checkbox-3" name="public_notices" type="checkbox" value="public_notices" class="cb-f cb-f--err">
        <span class="cb-l">This one’s an error</span>
    </label>
    <label class="cb" for="checkbox-4">
        <input id="checkbox-4" name="public_notices" type="checkbox" value="public_notices" class="cb-f cb-f--err" checked>
        <span class="cb-l">Also an error</span>
    </label>
</div>