Defaults

Forms

Input

<div class="form-group">
	<label class="field-label" for="text">Text</label>
	<input type="text" id="text" placeholder="Lorem ipsum dolor sit amet">
</div>
<div class="form-group">
	<label class="field-label" for="email">Disabled email</label>
	<input type="email" id="email" value="hello@mailbox.io" disabled>
</div>
<div class="form-group">
	<label class="field-label" for="number">Number</label>
	<input type="number" id="number" placeholder="42" min="0" max="50">
</div>
<div class="form-group">
	<label class="field-label" for="password">Password</label>
	<input type="password" id="password" placeholder="Password">
</div>
<div class="form-group">
	<label class="field-label" for="file">File</label>
	<input type="file" id="file">
</div>
<div class="form-group">
	<label class="field-label" for="date">Date</label>
	<input type="date" id="date">
</div>
<div class="form-group">
	<label class="field-label" for="date">Date & time local</label>
	<input type="datetime-local" id="date">
</div>
Toggle code

Select

Notice: some browsers don’t care about border-radius property applied to select.

<select>
	<option selected></option>
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
Toggle code

Textarea

Use the rows attribute to make it higher.

<textarea></textarea>
Toggle code

Checkbox And Radio

<div class="form-group">
	<label for="checkbox-4">
		<input id="checkbox-4" type="checkbox"> Checkbox
	</label>
	<label for="checkbox-5">
		<input id="checkbox-5" type="checkbox"> Checkbox
	</label>
	<label for="checkbox-6">
		<input id="checkbox-6" type="checkbox"> Checkbox
	</label>
</div>
<div class="form-group">
	<label for="radio-4">
		<input id="radio-4" name="radios-inline" type="radio"> Radio
	</label>
	<label for="radio-5">
		<input id="radio-5" name="radios-inline" type="radio"> Radio
	</label>
	<label for="radio-6">
		<input id="radio-6" name="radios-inline" type="radio"> Radio
	</label>
</div>
Toggle code

Checkbox And Radio Inline

<div class="form-group">
	<label for="checkbox-1" class="label--inline">
		<input id="checkbox-1" type="checkbox"> Checkbox
	</label>
	<label for="checkbox-2" class="label--inline">
		<input id="checkbox-2" type="checkbox"> Checkbox
	</label>
	<label for="checkbox-3" class="label--inline">
		<input id="checkbox-3" type="checkbox"> Checkbox
	</label>
</div>
<div class="form-group">
	<label for="radio-1" class="label--inline">
		<input id="radio-1" name="radios" type="radio"> Radio
	</label>
	<label for="radio-2" class="label--inline">
		<input id="radio-2" name="radios" type="radio"> Radio
	</label>
	<label for="radio-3" class="label--inline">
		<input id="radio-3" name="radios" type="radio"> Radio
	</label>
</div>
Toggle code

Input And Select Size

Select since 1.2.0

<div class="form-group">
	<input type="text" class="input--small" placeholder="Small">
</div>
<div class="form-group">
	<input type="text" placeholder="Default">
</div>
<div class="form-group">
	<input type="text" class="input--large" placeholder="Large">
</div>

<div class="form-group">
	<select class="select--small">
		<option selected>Small</option>
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
</div>
<div class="form-group">
	<select>
		<option selected>Default</option>
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
</div>
<div class="form-group">
	<select class="select--large">
		<option selected>Large</option>
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
</div>
Toggle code

Headings

You can also apply these styles to other elements with .h1, .h2, …

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<h5>Lorem ipsum dolor sit amet</h5>
<h6>Lorem ipsum dolor sit amet</h6>
Toggle code

Lists

Descriptions

Lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Ipsum
A ab minima, deleniti sint quibusdam incidunt obcaecati animi
Dolor
Nulla doloremque accusantium minus molestiae ipsa dicta
Lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Ipsum
A ab minima, deleniti sint quibusdam incidunt obcaecati animi
Dolor
Nulla doloremque accusantium minus molestiae ipsa dicta
<dl>
	<dt>Lorem</dt>
	<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit</dd>
	<dt>Ipsum</dt>
	<dd>A ab minima, deleniti sint quibusdam incidunt obcaecati animi</dd>
	<dt>Dolor</dt>
	<dd>Nulla doloremque accusantium minus molestiae ipsa dicta</dd>
</dl>

<dl class="dl--inline">
	<dt>Lorem</dt>
	<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit</dd>
	<dt>Ipsum</dt>
	<dd>A ab minima, deleniti sint quibusdam incidunt obcaecati animi</dd>
	<dt>Dolor</dt>
	<dd>Nulla doloremque accusantium minus molestiae ipsa dicta</dd>
</dl>
Toggle code

Ordered

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
    1. Vivamus hendrerit arcu.
    2. Praesent id metus massa.
    3. Class aptent taciti sociosqu.
  4. Quisque eget odio ac lectus vestibulum faucibus.
<ol>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>
		Vestibulum auctor dapibus neque.
		<ol>
			<li>Vivamus hendrerit arcu.</li>
			<li>Praesent id metus massa.</li>
			<li>Class aptent taciti sociosqu.</li>
		</ol>
	</li>
	<li>Quisque eget odio ac lectus vestibulum faucibus.</li>
</ol>
Toggle code

Unordered

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
    • Vivamus hendrerit arcu.
    • Praesent id metus massa.
    • Class aptent taciti sociosqu.
  • Quisque eget odio ac lectus vestibulum faucibus.
<ul>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>
		Vestibulum auctor dapibus neque.
		<ul>
			<li>Vivamus hendrerit arcu.</li>
			<li>Praesent id metus massa.</li>
			<li>Class aptent taciti sociosqu.</li>
		</ul>
	</li>
	<li>Quisque eget odio ac lectus vestibulum faucibus.</li>
</ul>
Toggle code

Paragraph

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.

<p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor,
	lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
	nibh, ut fermentum massa justo sit amet risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.</p>
Toggle code

Table

Table Heading 1 Table Heading 2 Table Heading 3
Table Cell 1 Table Cell 2 Table Cell 3
Table Cell 1 Table Cell 2 Table Cell 3
Table Cell 1 Table Cell 2 Table Cell 3
Table Cell 1 Table Cell 2 Table Cell 3
Table Footer 1 Table Footer 2 Table Footer 3
<table>
	<thead>
		<tr>
			<th>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
		</tr>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
		</tr>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
		</tr>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</th>
		</tr>
	</tfoot>
</table>
Toggle code