Defaults

Typography

Headings

Frowzy things plumb vex’d Jack Q

Frowzy things plumb vex’d Jack Q

Frowzy things plumb vex’d Jack Q

Frowzy things plumb vex’d Jack Q

Frowzy things plumb vex’d Jack Q
Frowzy things plumb vex’d Jack Q
<h1>Frowzy things plumb vex’d Jack Q</h1>
<h2>Frowzy things plumb vex’d Jack Q</h2>
<h3>Frowzy things plumb vex’d Jack Q</h3>
<h4>Frowzy things plumb vex’d Jack Q</h4>
<h5>Frowzy things plumb vex’d Jack Q</h5>
<h6>Frowzy things plumb vex’d Jack Q</h6>
Toggle code

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia libero ipsa, eius, fugiat optio quos doloribus blanditiis numquam exercitationem assumenda maxime ratione veritatis sunt quis repudiandae quasi corporis harum ab. Incidunt libero quo dolores, nobis, commodi ipsam laboriosam sunt. Natus accusamus iste animi eum repellat totam commodi molestias ratione earum beatae assumenda atque rerum eveniet doloremque labore accusantium nobis dolore ex aperiam, dolorem ab laboriosam fuga in blanditiis tempore?

Distinctio magni assumenda nam repudiandae excepturi incidunt hic modi, aspernatur soluta. Consectetur consequatur voluptate ad! Assumenda quia impedit voluptate est, nemo praesentium. Minus quam enim eos totam, ea repellendus officiis possimus labore expedita recusandae ducimus ipsa accusamus quaerat atque commodi dolore esse vero quas molestias quia! Perferendis, autem alias earum quam, doloremque laboriosam.

<p class="text-large">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia libero ipsa, eius, fugiat optio quos doloribus blanditiis numquam exercitationem assumenda maxime ratione veritatis sunt quis repudiandae quasi corporis harum ab. Incidunt libero quo dolores,
	nobis, commodi ipsam laboriosam sunt. Natus accusamus iste animi eum repellat totam commodi molestias ratione earum beatae assumenda atque rerum eveniet doloremque labore accusantium nobis dolore ex aperiam, dolorem ab laboriosam fuga in blanditiis tempore?</p>
<p>Distinctio magni assumenda nam repudiandae excepturi incidunt hic modi, aspernatur soluta. Consectetur consequatur voluptate ad! Assumenda quia impedit voluptate est, nemo praesentium. Minus quam enim eos totam, ea repellendus officiis possimus labore
	expedita recusandae ducimus ipsa accusamus quaerat atque commodi dolore esse vero quas molestias quia! Perferendis, autem alias earum quam, doloremque laboriosam.</p>
Toggle code

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

<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 rows="4"></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

<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

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

Tables

Base

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

Styled

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 class="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

Small

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 class="table table--small">
	<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