# Migration Guide to Version 3.0.0

An overview of a few things you will need to accommodate in your update to the next major version. In general, we worked hard to ensure backwards compatibility so your existing markup should continue to work. However, if you want to make use of our updated assets, make sure to follow along here.

## Typo

All headlines have increased in size which might or might not break your page layout.

`fineprint` has been renamed to `font-hint`.

## Forms

The standard form theme (`form-theme-standard`) is now white, making the white form theme obsolete. Please transition away from `form-theme-white`.

### Text inputs and select fields

To upgrade to the new design:

- To make use of putting icons inside of text inputs, use a wrapper `div` around them with the class `text-input-container`.
- To make use of the updated look of select fields, use a wrapper `div` around them with the class `select-container`.
- Radio buttons and checkboxes get wrapper `div`s around them with the class `radio-button-container` or `checkbox-container`.
- Form items should use the new `gutter-form` to make use of the new horizontal and vertical distances between form elements.
- Migrate away from `input-unit` and `unit-icon`. Replace with `input-icon-right`. See updated input markup code example.

Best practice: Combine every `input` element with its corresponding `label` element by using `id` for `input` and corresponding `for` for `label`. This makes sure users can click on a label and thereby select an input field. See updated input markup code example.

Vertical margins and paddings have increased. Check to see whether this change breaks your layout.

## Updated input markup

### 2.4

    <input type="text" class="input-text input-unit" /><span class="unit-icon fa fa-euro"></span>

  ### 3.0

      <div class="input-text-container">
        <label class="input-label" for="text-input-2">First name</label>
        <span class="input-icon-left fa fa-user"></span>
        <input type="text" id="text-input-2" class="input-text" placeholder="John" value="" />
      </div>