Form Elements

Forms & Inputs

Standard Input

Height: 35px
Font-size: 0.85em
Line-height: 1.6em
Border: 1px solid #dfdfdf

Example

Usage

input is used mostly for marketing.

<input type="text" placeholder="A text input">
			      

Validation Feedback

Height: 35px
Font-size: 0.85em
Line-height: 1.6em
Border: 1px solid #e74c3c

Example

Usage

.form-error is used for validation.

<input type="text" placeholder="A form error!" class="form-error">
<label><span class="form-error"><strong>Error!</strong> This field did not validate! Try again.</span></label>
			      

Search Bar

Border-radius: 2px
Background-image: search-icon.png
Line-height: 1.6em
Border: 1px solid #dfdfdf

Example

Usage

input#s is used for searching on any landing pages or other online marketing sites.

<input type="text" class="field" name="s" id="s" placeholder="Search">
			      

Search Bar Small - .search-sm

Height: 25px
Background-image: search-icon.png
Line-height: 1.6em
Border: 1px solid #dfdfdf

Example

Usage

.search-sm is used for search bars in the navigation and the product.

<input type="text" class="field search-sm" name="s" id="s" placeholder="Search">
			      

Flat Buttons

Large Buttons

Width: 150px
Height: 60px
Line-height: 45px
Font-size: 0.9em

Example Button Text

Usage

.btn-large is used with main marketing site sections and callouts.

<a href="#" class="btn blue btn-large">Button Text</a>
			      

Medium Buttons

Width: 130px
Height: 50px
Line-height: 20px
Font-size: 0.75em

Example Button Text

Usage

.btn-medium is used between content, typically in CTAs that go between sections in the marketing site and for modals.

<a href="#" class="btn blue btn-medium">Button Text</a>
			      

Small Buttons

Width: 100px
Height: 35px
Line-height: 28px
Font-size: 0.6em

Example Button Text

Usage

.btn-small is used with forms, inside the product, and on non-marketing site ads under 500x500px.

<a href="#" class="btn blue btn-small">Button Text</a>
			      

Radio Buttons

Border-radius: 5px
Background-color: #e7e7e7
Width: 65px
Height: 40px

Example

Select your answer:

Usage

.radio-btn is used for radio buttons.

<div class="radio-btn">
	<p>Select your answer:</p>
	<input type="radio" id="radio1" name="radios" value="all" checked>
	   <label class="radio-first" for="radio1">Yes</label>
	<input type="radio" id="radio2" name="radios"value="false">
	   <label for="radio2">No</label>
	<input type="radio" id="radio3" name="radios" value="true">
	   <label class="radio-last" for="radio3">Maybe</label>
</div>
			      

Checkboxes

Background: #e4e3e3
Width: 15px
Height: 15px
Border-radius: 4px

Example
Checkbox 1

Usage

.checked is used for checkboxes.

<div class="checked">
	<span class="squaredFour">Checkbox 1</span>
	<div class="squaredFour">
		<input type="checkbox" value="None" id="squaredFour" name="check" />
		<label for="squaredFour"></label>
	</div>
</div>