Forms
Text Inputs & Textarea
Error: Please check your entry information, we found an error
<div>
<label for="requried-text-input">Required Text Input</label>
<input type="text" name="requried-text-input" id="requried-text-input">
</div>
<div>
<label for="non-requried-text-input">
Non-required Text Input <span class="input-helper-text">Optional</span>
</label>
<input type="text" name="non-requried-text-input" id="non-requried-text-input">
</div>
<div>
<label for="text-area">Text Area</label>
<textarea name="text-area" id="text-area" rows="8" cols="80"></textarea>
</div>
<div class="break"></div>
<div class="has-error">
<p>Error: Please check your entry information, we found an error</p>
<label for="error-state-text-input">Error State Text Input</label>
<input type="text" name="non-requried-text-input" id="error-state-text-input" value="Lorem Ipsum dolar">
</div>
Copied!
Checkboxes
<fieldset>
<legend>Contextual title for group</legend>
<ul>
<li>
<input type="checkbox" name="checkbox-option-1" id="checkbox-option-1">
<label for="checkbox-option-1">Checkbox Option 1</label>
</li>
<li>
<input type="checkbox" name="checkbox-option-2" id="checkbox-option-2">
<label for="checkbox-option-2">Checkbox Option 2</label>
</li>
<li>
<input type="checkbox" name="checkbox-option-3" id="checkbox-option-3">
<label for="checkbox-option-3">Checkbox Option 3</label>
</li>
</ul>
</fieldset>
Copied!
Search
<section class="search-section">
<div role="search">
<form class="search-form">
<input type="search" name="search" aria-label="Search" placeholder="Search">
<button class="button button--icon" type="submit">
<svg version="1.1" width="25" height="33" viewBox="0 0 25 33" aria-labelledby="title" aria-describedby="description" role="img">
<title id="title">Search</title>
<desc id="description">Magnifying glass</desc>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-510.000000, -1093.000000)">
<g transform="translate(42.000000, 899.000000)">
<g transform="translate(477.500000, 207.500000) scale(-1, 1) translate(-477.500000, -207.500000) translate(466.000000, 191.000000)">
<path d="M6.26086957,18.5483871 L8.34782609,18.5483871 L8.34782609,31.9677419 L6.26086957,31.9677419 L6.26086957,18.5483871 Z M8.34782609,18.5483871 L10.4347826,18.5483871 L10.4347826,31.9677419 L8.34782609,31.9677419 L8.34782609,18.5483871 Z" id="Combined-Shape" fill="#FFFFFF" transform="translate(8.347826, 25.258065) rotate(15.000000) translate(-8.347826, -25.258065) "></path>
<ellipse stroke="#FFFFFF" stroke-width="4" transform="translate(11.501952, 12.378275) rotate(15.000000) translate(-11.501952, -12.378275) " cx="11.5019518" cy="12.3782749" rx="7.39130435" ry="7.29032258"></ellipse>
</g>
</g>
</g>
</g>
</svg>
</button>
</form>
</div>
</section>
Copied!
Selects
<label for="select-input">Select Input</label>
<div class="styled-select">
<select id="select-input" name="section1">
<option label="Choose Something" disabled selected>Choose Something</option>
<option label="Option 1.1">Option 1.1</option>
<option label="Option 1.2">Option 1.2</option>
</select>
</div>
Copied!