<button class="c-button">button</button>
<a class="c-button">a-button</a>
<span class="c-button">span-button</span>

<section class="c-card">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit fugit alias tenetur quam voluptatum animi quos numquam illo. Maiores, doloribus!</p>
</section>

<form class="c-form"
      action="">
  <fieldset class="c-form__group">
    <legend class="c-form__group-title">Radio buttons</legend>
      <div class="c-form__control checkables-inline">
        <label>
          <input type="radio" name="sex" value="male">
          Male
        </label>
        <label>
          <input type="radio" name="sex" value="female">
          Female
        </label>
      </div>
  </fieldset>
  <fieldset class="c-form__group">
    <legend class="c-form__group-title">Checkbox buttons</legend>
      <div class="c-form__control checkables-stacked">
        <label>
          <input type="checkbox" name="motors" value="harley-davidson">
          Harley Davidson
        </label>
        <label>
          <input type="checkbox" name="motors" value="suzuki">
          Suzuki
        </label>
      </div>
  </fieldset>
  <fieldset class="c-form__group">
    <legend class="c-form__group-title">Select your pokemon</legend>
      <label class="c-form__control">
        Choose your favorite
        <select name="select">
          <option value="value1">Pikachu</option>
          <option value="value2" selected>Charmander</option>
          <option value="value3">Bulbasaur 3</option>
        </select>
      </label>
      <label class="c-form__control">
        Choose your enemies
        <select multiple name="select">
          <option value="value1">Magcargo</option>
          <option value="value2" selected>Metang</option>
          <option value="value3">Lugia</option>
          <option value="value3">Grimer</option>
          <option value="value3">Arceus</option>
        </select>
      </label>
  </fieldset>
  <fieldset class="c-form__group">
    <legend class="c-form__group-title">Complete your account</legend>
      <label class="c-form__control">Name
        <input type="text" name="name" placeholder="John Doe" required>
      </label>
      <label class="c-form__control">Age
        <input type="number" name="age" min="1">
      </label>
      <label class="c-form__control">Favorite color
        <input type="color" name="fav-color" value="#a9dd3b">
      </label>
      <label class="c-form__control">Last time you sneezed
        <input type="date" name="sneezed">
      </label>
      <label class="c-form__control">How hot are you
        <input type="range" name="hot" value="5" min="0" max="10" step="1">
      </label>
      <label class="c-form__control">Email
        <input type="email" name="email" placeholder="name@email.com">
      </label>
      <label class="c-form__control">Password
        <input type="password" name="password">
      </label>
  </fieldset>
  <fieldset class="c-form__group">
    <legend class="c-form__group-title">Tell something about yourself</legend>
      <label class="c-form__control">
        It all started when..
        <textarea></textarea>
      </label>
  </fieldset>
  <fieldset class="c-form__group">
    <legend class="c-form__group-title">Now allowed</legend>
      <label class="c-form__control">
        Doesn't work
        <input type="text" name="name" placeholder="Nope" disabled>
      </label>
      <label class="c-form__control">
        Can't select
        <select name="select" disabled>
          <option value="value1" selected>Nope</option>
          <option value="value3">Noping</option>
          <option value="value3">Hell no</option>
        </select>
      </label>
      <label class="c-form__control">
        Can't select
        <select multiple name="select" disabled>
          <option value="value1">Nope</option>
          <option value="value2" selected>No</option>
          <option value="value3">Nah</option>
          <option value="value3">Noping</option>
          <option value="value3">Hell no</option>
        </select>
      </label>
  </fieldset>
  <fieldset class="c-form__group">
    <legend class="c-form__group-title">Labels on the left</legend>
      <div class="c-form__control input-inline">
        <div class="g-row12">
          <div class="g-col4--xs">
            <label>Name</label>
          </div>
          <div class="g-col8--xs">
            <input type="text" name="name" placeholder="John Doe">
          </div>
        </div>
      </div>
      <div class="c-form__control input-inline">
        <div class="g-row12">
          <div class="g-col4--xs">
            <label>Longer name</label>
          </div>
          <div class="g-col8--xs">
            <input type="text" name="name" placeholder="John Doe">
          </div>
        </div>
      </div>
      <div class="c-form__control input-inline">
        <div class="g-row12">
          <div class="g-col4--xs">
            <label>Even longer name</label>
          </div>
          <div class="g-col8--xs">
            <input type="text" name="name" placeholder="John Doe">
          </div>
        </div>
      </div>
  </fieldset>
</form>

<form class="c-form"
     action="">
 <fieldset class="c-form__group">
   <legend class="c-form__group-title">Show me the money</legend>
     <label class="c-form__control">
       How much can you lose?
       <div class="c-input-group">
         <span class="c-input-group__label">€</span>
         <input class="c-input-group__field" type="number" placeholder="over 9000!">
         <div class="c-input-group__button">
           <button>This much</button>
         </div>
       </div>
     </label>
 </fieldset>
</form>