Special Inputs
Search Fields
Search fields are one of the biggest helper for users on your website. We have two flavors included. The first looks like the button is inside the input field one can be used by giving the .form-component element the class .input--search and instead of the label put a button inside.
The second search field type looks more traditional and can be used by using the class .input--with-nested-element on the .form-component element
Example
Imports
- SASS:
@import "base"; @import "imports/modules/forms";
Code
<div class="form-component input--medium input--search">
<input type="text" placeholder="Search">
<button type="submit" class="btn"><i class="fa fa-search"></i></button>
</div>
<div class="form-component input--medium input--with-nested-element">
<input type="text" id="send-cart" placeholder="Find stuff"/>
<button type="submit" class="btn">Search</button>
</div>Other Input Fields
Input fields can be combined with icons to indicate their function. You can use them by wrapping a font-awesome icon and an input field with the class .input--with-icon or .input--with-icon--rev if you want the icon at the end of the input field.
Example
Imports
- SASS:
@import "base"; @import "imports/modules/forms";
Code
<div class="form-component input--medium">
<div class="input--with-icon">
<i class="fa fa-user"></i>
<input type="text" placeholder="Username">
</div>
</div>
<div class="form-component input--medium">
<div class="input--with-icon">
<i class="fa fa-key"></i>
<input type="password" placeholder="Password">
</div>
</div>
<div class="form-component input--medium">
<div class="input--with-icon--rev">
<i class="fa fa-lock"></i>
<input type="text" placeholder="Keyphrase">
</div>
</div>