No notes defined.
<div class="grid grid-3-cols">
<div>
<div class="box box--padded">
<form class="">
<fieldset>
<legend class="">Form in a box</legend>
<div class="form__item">
<label for="input">Email</label>
<input type="email" id="input" placeholder="Email">
</div>
<div class="form__item">
<label for="select">Example select</label>
<select id="select">
<option value="">Choose...</option>
<optgroup label="Option group 1">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</optgroup>
<optgroup label="Option group 2">
<option value="">Option 4</option>
<option value="">Option 5</option>
<option value="">Option 6</option>
</optgroup>
</select>
</div>
</fieldset>
<input type="submit" value="Signup" class="button">
</form>
</div>
</div>
<div>
<div class="box box--padded box--bg-offwhite">
<form class="">
<fieldset>
<legend class="">Form in a box</legend>
<div class="form__item">
<label for="input">Email</label>
<input type="email" id="input" placeholder="Email">
</div>
<div class="form__item">
<label for="select">Example select</label>
<select id="select">
<option value="">Choose...</option>
<optgroup label="Option group 1">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</optgroup>
<optgroup label="Option group 2">
<option value="">Option 4</option>
<option value="">Option 5</option>
<option value="">Option 6</option>
</optgroup>
</select>
</div>
</fieldset>
<input type="submit" value="Signup" class="button">
</form>
</div>
</div>
<div>
<div class="box box--padded box--bg-slate">
<form class="">
<fieldset>
<legend class="">Form in a box</legend>
<div class="form__item">
<label for="input">Email</label>
<input type="email" id="input" placeholder="Email">
</div>
<div class="form__item">
<label for="select">Example select</label>
<select id="select">
<option value="">Choose...</option>
<optgroup label="Option group 1">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</optgroup>
<optgroup label="Option group 2">
<option value="">Option 4</option>
<option value="">Option 5</option>
<option value="">Option 6</option>
</optgroup>
</select>
</div>
</fieldset>
<input type="submit" value="Signup" class="button">
</form>
</div>
</div>
</div>
<div class="slab slab--bg-offwhite">
<div class="wrap">
<p class="intro">Some examples of sensibly/mildly reset/rebooted form styles</p>
<form class="">
<fieldset>
<legend class="">Example legend</legend>
<div class="form__item">
<label for="input">Example input</label>
<input type="text" id="input" placeholder="Example input">
</div>
<div class="form__item">
<label for="select">Example select</label>
<select id="select">
<option value="">Choose...</option>
<optgroup label="Option group 1">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</optgroup>
<optgroup label="Option group 2">
<option value="">Option 4</option>
<option value="">Option 5</option>
<option value="">Option 6</option>
</optgroup>
</select>
</div>
<fieldset class="form__group">
<legend>Checkboxes: default</legend>
<label>
<input type="checkbox" value="">
Check this checkbox
</label>
<label>
<input type="checkbox" value="">
Check this checkbox
</label>
</fieldset>
<fieldset class="form__group form__group--inline">
<legend>Checkboxes: inline</legend>
<span class="form__item">
<input type="checkbox" value="" id="checkbox1a"><label for="checkbox1a">Check this checkbox</label>
</span>
<span class="form__item">
<input type="checkbox" value="" id="checkbox2a"><label for="checkbox2a">Check this checkbox</label>
</span>
<span class="form__item">
<input type="checkbox" value="" id="checkbox3a"><label for="checkbox3a">Check this longer labelled checkbox</label>
</span>
<span class="form__item">
<input type="checkbox" value="" id="checkbox4a"><label for="checkbox4a">Check this checkbox</label>
</span>
</fieldset>
<fieldset class="form__group">
<legend>Radios: label-wrapped format</legend>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Option one is this and that
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</fieldset>
<fieldset class="form__group">
<legend>Radios: label-for format (with new-line indent)</legend>
<div class="form__item">
<input type="radio" name="optionsRadiosb" id="optionsRadios1b" value="option1a" checked="">
<label for="optionsRadios1b">Option one is this and that</label>
</div>
<div class="form__item">
<input type="radio" name="optionsRadiosb" id="optionsRadios2b" value="option2a">
<label for="optionsRadios2b">Option two is something else that's also super long to demonstrate this option of wrapping to a new line indented to the input, of these fancy form
controls</label>
</div>
<div class="form__item">
<input type="radio" name="optionsRadiosb" id="optionsRadios3b" value="option3a" disabled>
<label for="optionsRadios3b">Option three is disabled</label>
</div>
</fieldset>
<fieldset class="form__group form__group--inline">
<legend>Radios: inline</legend>
<span class="form__item">
<input type="radio" name="optionsRadiosa" id="optionsRadios1a" value="option1a" checked="">
<label for="optionsRadios1a">Option one is this and that</label>
</span>
<span class="form__item">
<input type="radio" name="optionsRadiosa" id="optionsRadios2a" value="option2a">
<label for="optionsRadios2a">Option two is something else that's also super long</label>
</span>
<span class="form__item">
<input type="radio" name="optionsRadiosa" id="optionsRadios3a" value="option3a" disabled>
<label for="optionsRadios3a">Option three is disabled</label>
</span>
</fieldset>
<div class="form__item">
<label for="textarea">Example textarea</label>
<textarea id="textarea" rows="3"></textarea>
</div>
<div class="form__item">
<label for="date">Example date</label>
<input type="date" id="date">
</div>
<div class="form__item">
<label for="time">Example time</label>
<input type="time" id="time">
</div>
<div class="form__item">
<label for="output">Example output</label>
<output name="result" id="output">100</output>
</div>
<div class="form__item">
<button type="submit">Button submit</button>
<input type="submit" value="Input submit button">
<input type="reset" value="Input reset button">
<input type="button" value="Input button">
</div>
<div class="form__item">
<button type="submit" disabled>Button submit</button>
<input type="submit" value="Input submit button" disabled>
<input type="reset" value="Input reset button" disabled>
<input type="button" value="Input button" disabled>
</div>
<div class="form__item">
<button type="submit" class="button">Most important button style</button>
<input type="submit" value="Lower priority button style" class="button button--outline">
<input type="reset" value="Lower priority button style" class="button button--outline-slate">
</div>
<div class="form__item">
<button type="submit" disabled class="button">Button submit</button>
<input type="submit" value="Input submit button" class="button button--outline" disabled>
<input type="reset" value="Input reset button" class="button button--outline-slate" disabled>
<input type="button" value="Input button" class="button" disabled>
</div>
</fieldset>
</form>
</div>
</div>
<div class="slab slab--bg-slate">
<div class="wrap">
<p class="intro">Some examples of sensibly/mildly reset/rebooted form styles</p>
<form class="">
<fieldset>
<legend class="">Example legend</legend>
<div class="form__item">
<label for="input">Example input</label>
<input type="text" id="input" placeholder="Example input">
</div>
<div class="form__item">
<label for="select">Example select</label>
<select id="select">
<option value="">Choose...</option>
<optgroup label="Option group 1">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</optgroup>
<optgroup label="Option group 2">
<option value="">Option 4</option>
<option value="">Option 5</option>
<option value="">Option 6</option>
</optgroup>
</select>
</div>
<fieldset class="form__group">
<legend>Checkboxes: default</legend>
<label>
<input type="checkbox" value="">
Check this checkbox
</label>
<label>
<input type="checkbox" value="">
Check this checkbox
</label>
</fieldset>
<fieldset class="form__group form__group--inline">
<legend>Checkboxes: inline</legend>
<span class="form__item">
<input type="checkbox" value="" id="checkbox1a"><label for="checkbox1a">Check this checkbox</label>
</span>
<span class="form__item">
<input type="checkbox" value="" id="checkbox2a"><label for="checkbox2a">Check this checkbox</label>
</span>
<span class="form__item">
<input type="checkbox" value="" id="checkbox3a"><label for="checkbox3a">Check this longer labelled checkbox</label>
</span>
<span class="form__item">
<input type="checkbox" value="" id="checkbox4a"><label for="checkbox4a">Check this checkbox</label>
</span>
</fieldset>
<fieldset class="form__group">
<legend>Radios: label-wrapped format</legend>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Option one is this and that
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</fieldset>
<fieldset class="form__group">
<legend>Radios: label-for format (with new-line indent)</legend>
<div class="form__item">
<input type="radio" name="optionsRadiosb" id="optionsRadios1b" value="option1a" checked="">
<label for="optionsRadios1b">Option one is this and that</label>
</div>
<div class="form__item">
<input type="radio" name="optionsRadiosb" id="optionsRadios2b" value="option2a">
<label for="optionsRadios2b">Option two is something else that's also super long to demonstrate this option of wrapping to a new line indented to the input, of these fancy form
controls</label>
</div>
<div class="form__item">
<input type="radio" name="optionsRadiosb" id="optionsRadios3b" value="option3a" disabled>
<label for="optionsRadios3b">Option three is disabled</label>
</div>
</fieldset>
<fieldset class="form__group form__group--inline">
<legend>Radios: inline</legend>
<span class="form__item">
<input type="radio" name="optionsRadiosa" id="optionsRadios1a" value="option1a" checked="">
<label for="optionsRadios1a">Option one is this and that</label>
</span>
<span class="form__item">
<input type="radio" name="optionsRadiosa" id="optionsRadios2a" value="option2a">
<label for="optionsRadios2a">Option two is something else that's also super long</label>
</span>
<span class="form__item">
<input type="radio" name="optionsRadiosa" id="optionsRadios3a" value="option3a" disabled>
<label for="optionsRadios3a">Option three is disabled</label>
</span>
</fieldset>
<div class="form__item">
<label for="textarea">Example textarea</label>
<textarea id="textarea" rows="3"></textarea>
</div>
<div class="form__item">
<label for="date">Example date</label>
<input type="date" id="date">
</div>
<div class="form__item">
<label for="time">Example time</label>
<input type="time" id="time">
</div>
<div class="form__item">
<label for="output">Example output</label>
<output name="result" id="output">100</output>
</div>
<div class="form__item">
<button type="submit">Button submit</button>
<input type="submit" value="Input submit button">
<input type="reset" value="Input reset button">
<input type="button" value="Input button">
</div>
<div class="form__item">
<button type="submit" disabled>Button submit</button>
<input type="submit" value="Input submit button" disabled>
<input type="reset" value="Input reset button" disabled>
<input type="button" value="Input button" disabled>
</div>
<div class="form__item">
<button type="submit" class="button">Most important button style</button>
<input type="submit" value="Lower priority button style" class="button button--outline">
<input type="reset" value="Lower priority button style" class="button button--outline-slate">
</div>
<div class="form__item">
<button type="submit" disabled class="button">Button submit</button>
<input type="submit" value="Input submit button" class="button button--outline" disabled>
<input type="reset" value="Input reset button" class="button button--outline-slate" disabled>
<input type="button" value="Input button" class="button" disabled>
</div>
</fieldset>
</form>
</div>
</div>
<div class="slab slab--bg-slate-light">
<div class="wrap">
<p class="intro">Some examples of sensibly/mildly reset/rebooted form styles</p>
<form class="">
<fieldset>
<legend class="">Example legend</legend>
<div class="form__item">
<label for="input">Example input</label>
<input type="text" id="input" placeholder="Example input">
</div>
<div class="form__item">
<label for="select">Example select</label>
<select id="select">
<option value="">Choose...</option>
<optgroup label="Option group 1">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</optgroup>
<optgroup label="Option group 2">
<option value="">Option 4</option>
<option value="">Option 5</option>
<option value="">Option 6</option>
</optgroup>
</select>
</div>
<fieldset class="form__group">
<legend>Checkboxes: default</legend>
<label>
<input type="checkbox" value="">
Check this checkbox
</label>
<label>
<input type="checkbox" value="">
Check this checkbox
</label>
</fieldset>
<fieldset class="form__group form__group--inline">
<legend>Checkboxes: inline</legend>
<span class="form__item">
<input type="checkbox" value="" id="checkbox1a"><label for="checkbox1a">Check this checkbox</label>
</span>
<span class="form__item">
<input type="checkbox" value="" id="checkbox2a"><label for="checkbox2a">Check this checkbox</label>
</span>
<span class="form__item">
<input type="checkbox" value="" id="checkbox3a"><label for="checkbox3a">Check this longer labelled checkbox</label>
</span>
<span class="form__item">
<input type="checkbox" value="" id="checkbox4a"><label for="checkbox4a">Check this checkbox</label>
</span>
</fieldset>
<fieldset class="form__group">
<legend>Radios: label-wrapped format</legend>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Option one is this and that
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</fieldset>
<fieldset class="form__group">
<legend>Radios: label-for format (with new-line indent)</legend>
<div class="form__item">
<input type="radio" name="optionsRadiosb" id="optionsRadios1b" value="option1a" checked="">
<label for="optionsRadios1b">Option one is this and that</label>
</div>
<div class="form__item">
<input type="radio" name="optionsRadiosb" id="optionsRadios2b" value="option2a">
<label for="optionsRadios2b">Option two is something else that's also super long to demonstrate this option of wrapping to a new line indented to the input, of these fancy form
controls</label>
</div>
<div class="form__item">
<input type="radio" name="optionsRadiosb" id="optionsRadios3b" value="option3a" disabled>
<label for="optionsRadios3b">Option three is disabled</label>
</div>
</fieldset>
<fieldset class="form__group form__group--inline">
<legend>Radios: inline</legend>
<span class="form__item">
<input type="radio" name="optionsRadiosa" id="optionsRadios1a" value="option1a" checked="">
<label for="optionsRadios1a">Option one is this and that</label>
</span>
<span class="form__item">
<input type="radio" name="optionsRadiosa" id="optionsRadios2a" value="option2a">
<label for="optionsRadios2a">Option two is something else that's also super long</label>
</span>
<span class="form__item">
<input type="radio" name="optionsRadiosa" id="optionsRadios3a" value="option3a" disabled>
<label for="optionsRadios3a">Option three is disabled</label>
</span>
</fieldset>
<div class="form__item">
<label for="textarea">Example textarea</label>
<textarea id="textarea" rows="3"></textarea>
</div>
<div class="form__item">
<label for="date">Example date</label>
<input type="date" id="date">
</div>
<div class="form__item">
<label for="time">Example time</label>
<input type="time" id="time">
</div>
<div class="form__item">
<label for="output">Example output</label>
<output name="result" id="output">100</output>
</div>
<div class="form__item">
<button type="submit">Button submit</button>
<input type="submit" value="Input submit button">
<input type="reset" value="Input reset button">
<input type="button" value="Input button">
</div>
<div class="form__item">
<button type="submit" disabled>Button submit</button>
<input type="submit" value="Input submit button" disabled>
<input type="reset" value="Input reset button" disabled>
<input type="button" value="Input button" disabled>
</div>
<div class="form__item">
<button type="submit" class="button">Most important button style</button>
<input type="submit" value="Lower priority button style" class="button button--outline">
<input type="reset" value="Lower priority button style" class="button button--outline-slate">
</div>
<div class="form__item">
<button type="submit" disabled class="button">Button submit</button>
<input type="submit" value="Input submit button" class="button button--outline" disabled>
<input type="reset" value="Input reset button" class="button button--outline-slate" disabled>
<input type="button" value="Input button" class="button" disabled>
</div>
</fieldset>
</form>
</div>
</div>
<div class="grid grid-3-cols">
<div>
<div class="box box--padded">
<form class="">
<fieldset>
<legend class="">Form in a box</legend>
<div class="form__item">
<label for="input">Email</label>
<input type="email" id="input" placeholder="Email">
</div>
<div class="form__item">
<label for="select">Example select</label>
<select id="select">
<option value="">Choose...</option>
<optgroup label="Option group 1">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</optgroup>
<optgroup label="Option group 2">
<option value="">Option 4</option>
<option value="">Option 5</option>
<option value="">Option 6</option>
</optgroup>
</select>
</div>
</fieldset>
<input type="submit" value="Signup" class="button">
</form>
</div>
</div>
<div>
<div class="box box--padded box--bg-offwhite">
<form class="">
<fieldset>
<legend class="">Form in a box</legend>
<div class="form__item">
<label for="input">Email</label>
<input type="email" id="input" placeholder="Email">
</div>
<div class="form__item">
<label for="select">Example select</label>
<select id="select">
<option value="">Choose...</option>
<optgroup label="Option group 1">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</optgroup>
<optgroup label="Option group 2">
<option value="">Option 4</option>
<option value="">Option 5</option>
<option value="">Option 6</option>
</optgroup>
</select>
</div>
</fieldset>
<input type="submit" value="Signup" class="button">
</form>
</div>
</div>
<div>
<div class="box box--padded box--bg-slate">
<form class="">
<fieldset>
<legend class="">Form in a box</legend>
<div class="form__item">
<label for="input">Email</label>
<input type="email" id="input" placeholder="Email">
</div>
<div class="form__item">
<label for="select">Example select</label>
<select id="select">
<option value="">Choose...</option>
<optgroup label="Option group 1">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</optgroup>
<optgroup label="Option group 2">
<option value="">Option 4</option>
<option value="">Option 5</option>
<option value="">Option 6</option>
</optgroup>
</select>
</div>
</fieldset>
<input type="submit" value="Signup" class="button">
</form>
</div>
</div>
</div>
<div class="slab slab--bg-offwhite">
<div class="wrap">
{% include '@base' %}
</div>
</div>
<div class="slab slab--bg-slate">
<div class="wrap">
{% include '@base' %}
</div>
</div>
<div class="slab slab--bg-slate-light">
<div class="wrap">
{% include '@base' %}
</div>
</div>