Form Grids
Form grids are used to create the base structure of the content-form component as well as layout additional components and elements used within a form.
Base grid
The base structure for content-forms.
<form class="c-content-form">
<h2 class="c-content-form__title">Form title</h2>
<fieldset>
<legend class="c-content-form__legend">Form Legend</legend>
<div class="c-content-form__group">
Content group content
</div>
</fieldset>
<div class="c-content-form__group c-content-form__group--action">
Content action content - footer
</div>
</form>
Top level grid
The top level grid has two columns and comprises of a label on the left and form elements on the right.
Notice that the .c-content-form__label--align-top modifier example removes the margin top. This is useful when there are multiple sub column items.
<form class="c-content-form o-form-two-column">
<fieldset>
<div class="c-content-form__group">
<span class="o-form-two-column--first c-content-form__label [modifier class]">
<label for="top-level">First column label</label>
</span>
<span class="o-form-two-column--second">
<input id="top-level" type="text" placeholder="Second column content - input" title="">
</span>
</div>
</fieldset>
</form>
Second level grid system
The second level grid can be nested within any .o-form-two-column--second. It can also be full width if you are nesting it within a fieldset or at a higher level under the top level grid. See full width grid details.
It should be used for:
- formatting of a large amount of checkboxes
- order forms that require columns
<form class="c-content-form">
<fieldset>
<div class="c-content-form__group">
<div class="[modifier class]">
<div class="o-form-sub__col o-form-sub__col--first">
<div class="o-form-sub__col-item">
<div class="o-form-sub__col-item">
First column
</div>
<div class="o-form-sub__col-item">
First column
</div>
</div>
</div>
<div class="o-form-sub__col o-form-sub__col--second">
<div class="o-form-sub__col-item">
<div class="o-form-sub__col-item">
Second column
</div>
<div class="o-form-sub__col-item">
Second column
</div>
</div>
</div>
<div class="o-form-sub__col o-form-sub__col--third">
<div class="o-form-sub__col-item">
<div class="o-form-sub__col-item">
Third column
</div>
<div class="o-form-sub__col-item">
Third column
</div>
</div>
</div>
<div class="o-form-sub__col o-form-sub__col--fourth">
<div class="o-form-sub__col-item">
<div class="o-form-sub__col-item">
Fourth column
</div>
<div class="o-form-sub__col-item">
Fourth column
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
Full width grid
This is to be used within the base grid, within a .c-content-form__group.
In most cases, it is used to place extra explanatory text within a form. Text and basic formatting is allowed in this zone.
To add full width content within a form, place a new <div> with the class of .o-form-two-column--full-width within a .c-content-form__group <div>. You can view an example of this under the typography grid section.
Inline and block layout
The modifier classes can be applied as per the demo below to force the label and input to be inline or block level style.
<form class="c-content-form o-form-two-column">
<fieldset>
<div class="c-content-form__group">
<span class="o-form-two-column--first c-content-form__label">
<label for="inline-block">First column label</label>
</span>
<span class="o-form-two-column--second [modifier class]">
<input id="inline-block" type="text" placeholder="Second column content - input" title="">
</span>
</div>
<div class="c-content-form__group [modifier class]">
<div class="o-form-two-column--second">
<div class="[modifier class]__item">
<label for="inline-block2">Input</label>
<input name="flyers" type="text" id="inline-block2" title="">
</div>
</div>
</div>
</fieldset>
</form>
Fieldsets
The below demonstrates fieldsets and how they should be nested.
Nested fieldsets should only be used on forms within the main content zone - not the right sidebar.
It is recommended to only use nested fieldsets with the legend markup for groups of radio buttons and check boxes and only if the functionality is not obvious by reading the labels for the buttons.
Refer to the form grid options on this page for variations in layout of form elements.
<form class="c-content-form">
<h2 class="c-content-form__title">Form title</h2>
<fieldset>
<legend class="c-content-form__legend">Form legend</legend>
<div class="c-content-form__group">
Content group content
<fieldset>
<legend class="c-content-form__legend">Fieldset legend</legend>
<div class="c-content-form__group">
Content group content
</div>
<div class="c-content-form__group">
<fieldset>
<legend class="c-content-form__legend">Fieldset legend</legend>
<div class="c-content-form__group">
Content group content
</div>
</fieldset>
</div>
</fieldset>
</div>
</fieldset>
</form>
Radio/checkbox inline
The radio/checkbox inline grid shows how to layout inline radio and checkbox input types with their related label. Radio and Checkbox can be placed within a sub column grid system as well.
<form class="c-content-form o-form-two-column">
<fieldset>
<div class="c-content-form__group c-inline-form">
<span class="o-form-two-column--first c-content-form__label">
<label for="checkbox">First column label</label>
</span>
<span class="o-form-two-column--second">
<div class="c-inline-form__item">
<label>
<input id="checkbox" name="flyers" type="radio" title="">
Radio
</label>
</div>
<div class="c-inline-form__item">
<label>
<input name="flyers" type="checkbox" title="">
Checkbox
</label>
</div>
<div class="c-inline-form__item">
<label>
<input name="flyers" type="radio" title="">
Radio
</label>
</div>
<div class="c-inline-form__item">
<label>
<input name="flyers" type="checkbox" title="">
Checkbox
</label>
</div>
</span>
</div>
</fieldset>
</form>
Typography grid
Typography grids for content-form comprises of right column paragraph, full width paragraph and also the "help text" which relates to the input directly above the paragraph.
<form class="c-content-form o-form-two-column">
<fieldset>
<div class="c-content-form__group c-inline-block-form">
<div class="o-form-two-column--first c-content-form__label">
<label for="typography">Label text</label>
</div>
<div class="o-form-two-column--second">
<div class="c-inline-block-form__item">
<input id="typography" type="text" placeholder="Given name" title="">
</div>
<p class="c-content-form__help-text">This is help text which relates to the above form elements and sits within its parent container. </p>
</div>
</div>
<div class="c-content-form__group">
<div class="o-form-two-column--second">
<p>Right column text row. Consectetur adipiscing elit. In volutpat, nibh id faucibus feugiat, tortor metus commodo est, sed congue nunc nisl vel tortor. </p>
</div>
</div>
<div class="c-content-form__group">
<div class="o-form-two-column--full-width">
<p>Full width text row. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat, nibh id faucibus feugiat, tortor metus commodo est, sed congue nunc nisl vel tortor. </p>
</div>
</div>
</fieldset>
</form>