Header 1

Header 2

Header 3

Header 4

Header 5
Header 6


<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non soluta maxime quae repellat esse commodi quisquam at culpa. Esse molestias perferendis harum animi possimus numquam et veritatis error repellat iure.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non soluta maxime quae repellat esse commodi quisquam at culpa. Esse molestias perferendis harum animi possimus numquam et veritatis error repellat iure.

Ludus verear eam ex, has cu reque euismod. Lorem singulis sit cu, paulo cetero erroribus duo an, cu vide cibo mundi sea. Mei consulatu repudiandae ad. Modo suscipiantur vix ut, illud doctus audiam id vel, et dolor fastidii perpetua mel.



<p class="font-bold">Bold paragraph</p>
<p class="font-medium">Medium paragraph</p>
<p>Standard paragraph</p>
  • Un-ordered list item
  • Un-ordered list item
  • Un-ordered list item
  • Un-ordered list item


<ul>
	<li>Un-ordered list item</li>
	<li>Un-ordered list item</li>
	<li>Un-ordered list item</li>
	<li>Un-ordered list item</li>
</ul>
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
  4. Ordered list item


<ol>
	<li>Ordered list item</li>
	<li>Ordered list item</li>
	<li>Ordered list item</li>
	<li>Ordered list item</li>
</ol>
# First Name Last Name Age
1 John Doe 31
2 Jane Doe 28
3 John Smith 48 


<table>
	<thead>
		<tr>
			<th>#</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Age</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>John</td>
			<td>Doe</td>
			<td>31</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Jane</td>
			<td>Doe</td>
			<td>28</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>John</td>
			<td>Smith</td>
			<td>48</td>
		</tr>
	</tbody>
</table>
Learn more Learn more

Learn more Learn more

Learn more Learn more

Learn more Learn more

Learn more Learn more

Learn more 


<a href="#" class="btn">Learn more</a>
<a href="#" class="btn btn--rounded">Learn more</a>
<a href="#" class="btn btn--black">Learn more</a>
<a href="#" class="btn btn--rounded btn--black">Learn more</a>
<a href="#" class="btn btn--ghost">Learn more</a>
<a href="#" class="btn btn--rounded btn--ghost">Learn more</a>
<a href="#" class="btn btn--ghost btn--black">Learn more</a>
<a href="#" class="btn btn--ghost btn--black btn--rounded">Learn more</a>
<a href="#" class="btn btn--disabled">Learn more</a>
<a href="#" class="btn btn--disabled btn--rounded">Learn more</a>
<a href="#" class="btn-text">Learn more</a>




<form>

	<label for="first-name">First name</label>

	<input class="st-form" type="text" name="first-name" placeholder="John">

	<label for="first-name">Password</label>

	<input class="st-form"  type="password" name="password" placeholder="Password">

	<label>Type something</label>

	<textarea class="st-form"  name="name" rows="4" placeholder="Something interesting"></textarea>

	<select class="st-form" >
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
	</select>

	<label class="checkbox">
		<input type="checkbox" name="checkbox">Checkbox
	</label>

	<label class="radio">
		<input type="radio" name="radio">Radio
	</label>

	<label class="radio">
		<input type="radio" name="radio">Input
	</label>

	<input type="submit" value="Send form" class="btn--rounded">

</form>