# 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.

`<h6>` now looks the same as `<h5>`.

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

Font sizes have changed:

Old (Mobile/Desktop)
New
XS
1.1rem/1.1rem
1.2rem
S
1.3rem/1.3rem
1.4rem
Standard
1.4rem/1.4rem
1.4rem
M
1.4rem/1.8rem
1.8rem
L
1.8rem/2.1rem
2.0rem
XL
2.0rem/2.6rem
2.4rem
XXL
2.3rem/3.2rem
3.2rem
XXXL
3.2rem/4.2rem
4.0rem

In case you have to have different font sizes for different states, you can prefix the font-size with the state, like so: `palm-font-xl`, `lap-font-m`, or `desk-font-xs`.

Note: According to the Cosma design guidelines, there should be no different font sizes per state. We are providing them here to make the migration of existing projects easier. When in doubt, talk to your designer.

## 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 `input-text-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.

## Updated input markup

### 2.4

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

  ### 3.0

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