Layouts

Form layouts

Form layouts consists of containers as .form-control, .form-label and .form-text.

The main container .form-control has form component as children. Alongside form component other containers .form-label and .form-text can be used to display additional information. The .form-label contains basic label for form controls.

Vertical

Vertical layout is the most basic form layout and can be created by following principles shown in example below. In case you need more form components for one form label, you can use vertical block layout. This layout can be created by using additional class .form-block as shown on example below.

<!-- vertical layout -->
<div class="row">
  <div class="col col--l-6 col--s-2">
    <div class="form-control ...">></div>
    ...
    <hr />
    ...
  </div>
</div>

Multicolumn

Multicolumn layout can be created easily by combining Grid with form layout as shown in example below. Different size of gutters between form columns can be achieved with .row--form modificator on .row element.

<div class="row">
  <div class="col col--l-3 col--m-5 col--s-6 col--2">
    <div class="form-control ...">
      ...
    </div>
  </div>
  ...
  <div class="col col--l-1 col--m-2 col--s-6 col--2">
    <div class="form-control ...">
      ...
    </div>
  </div>
</div>