1
2  <a href="#" class="c-btn">Default Button</a>
3

1
2  <a href="#" class="c-btn c-btn--primary">Primary button</a>
3

1
2  <a href="#" class="c-btn c-btn--secondary">Secondary button</a>
3

1
2  <a href="#" class="c-btn c-btn--primary c-btn--puffy">Puffy button</a>
3

1
2  <a href="#" class="c-btn c-btn--micro">Micro button</a>
3

1
2  <a href="#" class="c-btn c-btn--primary" disabled>Disabled button</a>
3

1
2  <a href="#" class="c-btn c-btn--primary c-btn--hover-scale">Scale on hover</a>
3

1
2  <a href="#" class="c-btn c-btn--primary c-btn--shadow">Shadow</a>
3

1
2  <div class="c-check">
3    <input type="checkbox" id="checkbox_1" class="c-check__input">
4    <label class="c-check__label" for="checkbox_1">A checkbox</label>
5  </div>
6

 1
 2  <div class="c-check c-check--radio">
 3    <input name="my_radio" type="radio" id="radio_1" class="c-check__input">
 4    <label class="c-check__label" for="radio_1">A radio input</label>
 5  </div>
 6  <div class="c-check c-check--radio">
 7    <input name="my_radio" type="radio" id="radio_2" class="c-check__input">
 8    <label class="c-check__label" for="radio_2">A radio input</label>
 9  </div>
10

 1
 2  <div class="c-dropdown js-dropdown">
 3    <a href="#" class="c-dropdown__trigger js-dropdown-trigger">Click me</a>
 4    <ul class="c-dropdown__menu js-dropdown-menu" hidden>
 5      <li class="c-dropdown__item">
 6        <a href="#" class="c-dropdown__link">About</a>
 7      </li>
 8      <li class="c-dropdown__item">
 9        <a href="#" class="c-dropdown__link">FAQ</a>
10      </li>
11    </ul>
12  </div>
13

 1
 2  <div class="c-dropdown js-dropdown">
 3    <a href="#" class="c-btn c-dropdown__trigger js-dropdown-trigger">Click me</a>
 4    <ul class="c-dropdown__menu js-dropdown-menu" hidden>
 5      <li class="c-dropdown__item">
 6        <a href="#" class="c-dropdown__link">About</a>
 7      </li>
 8      <li class="c-dropdown__item">
 9        <a href="#" class="c-dropdown__link">FAQ</a>
10      </li>
11    </ul>
12  </div>
13

 1
 2  <div class="c-dropdown c-dropdown--right js-dropdown">
 3    <a href="#" class="c-btn c-dropdown__trigger js-dropdown-trigger">Click me</a>
 4    <ul class="c-dropdown__menu js-dropdown-menu" hidden>
 5      <li class="c-dropdown__item">
 6        <a href="#" class="c-dropdown__link">About</a>
 7      </li>
 8      <li class="c-dropdown__item">
 9        <a href="#" class="c-dropdown__link">FAQ</a>
10      </li>
11    </ul>
12  </div>
13

 1
 2  <div class="c-dropdown c-dropdown--center js-dropdown">
 3    <a href="#" class="c-btn c-dropdown__trigger js-dropdown-trigger">Click me</a>
 4    <ul class="c-dropdown__menu js-dropdown-menu" hidden>
 5      <li class="c-dropdown__item">
 6        <a href="#" class="c-dropdown__link">About</a>
 7      </li>
 8      <li class="c-dropdown__item">
 9        <a href="#" class="c-dropdown__link">FAQ</a>
10      </li>
11    </ul>
12  </div>
13

 1
 2  <div class="c-dropdown c-dropdown--full js-dropdown">
 3    <a href="#" class="c-btn c-dropdown__trigger js-dropdown-trigger">Click me</a>
 4    <ul class="c-dropdown__menu js-dropdown-menu" hidden>
 5      <li class="c-dropdown__item">
 6        <a href="#" class="c-dropdown__link">About</a>
 7      </li>
 8      <li class="c-dropdown__item">
 9        <a href="#" class="c-dropdown__link">FAQ</a>
10      </li>
11    </ul>
12  </div>
13

 1
 2  <label for="sample-input">Sample label</label>
 3  <div class="c-input-group">
 4    <div class="c-input-group__left">
 5      <button class="c-btn c-btn--micro">Button</button>
 6    </div>
 7    <div class="c-input-group__input">
 8      <input id="sample-input" type="text" class="c-text-input" placeholder="John Doe">
 9    </div>
10  </div>
11

 1
 2  <label for="sample-input">Sample label</label>
 3  <div class="c-input-group">
 4    <div class="c-input-group__right">
 5      <button class="c-btn c-btn--micro">Button</button>
 6    </div>
 7    <div class="c-input-group__input">
 8      <input id="sample-input" type="text" class="c-text-input" placeholder="John Doe">
 9    </div>
10  </div>
11

 1
 2  <label for="sample-input">Sample label</label>
 3  <div class="c-input-group">
 4    <div class="c-input-group__left">
 5      <button class="c-btn c-btn--micro">Button</button>
 6    </div>
 7    <div class="c-input-group__right">
 8      <button class="c-btn c-btn--micro">Button</button>
 9    </div>
10    <div class="c-input-group__input">
11      <input id="sample-input" type="text" class="c-text-input" placeholder="John Doe">
12    </div>
13  </div>
14

 1
 2  <div class="c-pill">
 3    <div class="c-pill__item">
 4      <input name="my_radio" type="radio" id="radio_1" class="c-pill__input">
 5      <label class="c-pill__label" for="radio_1">A radio input</label>
 6    </div>
 7    <div class="c-pill__item">
 8      <input name="my_radio" type="radio" id="radio_2" class="c-pill__input">
 9      <label class="c-pill__label" for="radio_2">A radio input</label>
10    </div>
11  </div>
12

1
2  <label for="sample-range">Amount</label>
3  <div class="c-range js-range">
4    <input type="range" value="25" min="0" max="500" class="c-range__input js-range-input" id="sample-range">
5    <span class="c-range__output js-range-output">25</span>
6  </div>
7

1
2  <label for="sample-input">Options</label>
3  <select class="c-select" id="sample-input">
4    <option>Option 1</option>
5    <option>Option 2</option>
6    <option>Option 3</option>
7    <option>Option 4</option>
8  </select>
9

1
2  <label for="sample-input">Options</label>
3  <select class="c-select" id="sample-input">
4    <option selected disabled>Please pick an option</option>
5    <option>Option 2</option>
6    <option>Option 3</option>
7    <option>Option 4</option>
8  </select>
9

1
2  <label for="sample-input">Options</label>
3  <select class="c-select" id="sample-input" disabled>
4    <option>Option 1</option>
5    <option>Option 2</option>
6    <option>Option 3</option>
7    <option>Option 4</option>
8  </select>
9

1
2  <label for="sample-input">Name</label>
3  <input id="sample-input" type="text" class="c-text-input" placeholder="John Doe">
4

1
2  <label for="sample-area">Comments</label>
3  <textarea id="sample-area" type="text" class="c-text-input c-text-input--multi" placeholder="Write your comment..."></textarea>
4

1
2  <label for="sample-input">Name</label>
3  <input id="sample-input" type="text" class="c-text-input" placeholder="John Doe" disabled>
4