Elements

Elements include input forms and buttons. Let's start off with buttons

Example: Buttons

Primary Button Basic Button Link Button Custom Button Custom Button Custom Rounded Button Cool Button
<button class="btn-primary">Primary Button</button> <button>Basic Button</button> <button class="btn-link mv2">Link Button</button> <span class="hand bg-red dim white ph3 pv2 dib mv2">Custom Button</span> <span class="hand ba bw1 b-green dim green ph3 pv2 dib mv2">Custom Button</span> <span class="hand ba bw1 b-orange dim orange ph3 pv2 br2 dib mv2">Custom Rounded Button</span> <span class="hand bg-green white ph4 pv3 grow dib mv2 br-pill small ttu tracked-mega b shadow-1 mh2">Cool Button</span>

As you can see, there are easy to use defaults for the first three buttons. If you want a bit more, then you can apply several atomic css classes to create custom button, with many possiblilities. These atomic css classes are explained further in utilities.

Example: Forms

<div> <label class="mt2">Text Input Label</label> <input type="text" /> <p>Helper text if necessary.</p> </div> <div> <label class="mt2">Password</label> <input type="password" /> <p>Error messages when appropriate.</p> </div> <div> <label class="mt2" for="first-name">First Name</label> <input type="text" id="first-name" /> </div> <div> <label class="mt2" for="last-name">Last Name</label> <input type="text" id="last-name" /> </div> <div> <label class="mt2" for="email">Email</label> <input type="email" id="email" /> </div> <div> <label class="mt2" for="gender">Dropdown</label> <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> <div> <label class="mt2">Radio Buttons</label> <input type="radio" /> Label 1 <input type="radio" /> Label 2 <input type="radio" /> Label 3 </div>

Pretty standard form elements. If this seems too long vertically for you, you can easily nest it in a grid.