Form

Split input

Combining a input text field with a button. Used on newsletter signup. Works with adding large class on text input and button element, but remember to add it on both.

<form action="">
  <div class="input-split">
    <label for="search" class="visuallyhidden">Nyhetsbrev</label>
    <input class="" type="email" id="search" placeholder="Søk på dips.no">
    <button type="submit" class="">Søk</button>
  </div>
</form>

Split input block

Same as split input, but on smaller screens the button get below the input field.

<form action="">
  <div class="input-split--block">
    <label for="newsletter" class="visuallyhidden">Nyhetsbrev</label>
    <input class="" type="email" id="newsletter" placeholder="Skriv inn epost...">
    <button type="submit" class="cta">Hold meg oppdatert</button>
  </div>
</form>