Markup mostly forms

Based on "How to structure an HTML form".

Payment form

Required fields are followed by * .

Contact information

Plain fieldset:

Title

Fieldset with class form__fieldset--horizontal and span child (cannot change fieldset's display property):

Title

Fieldset with class form__fieldset--horizontal with span child and inputs in span:

Title

Fieldset with class form__fieldset--horizontal with span child and inputs in span and legend width:

Title

Plain label:

Expanded input by using class form__label--full-width on label:

Label top-aligned by using class form__label--top-aligned on label:

Label top-aligned by using class form__label--top-aligned on label:

Payment information

Using aligned input fields.

Inline Forms

Plain

Title

As panel

Title

Vertical as panel

Top-align and as panel:

Title
Title