{% include parts/input-datalist.html %}
{% include parts/input-range.html %}

<div class="mb-3">
	<label class="form-label">Progress</label>
	{% include ui/progress.html class="mb-2" %}
	{% include ui/progress.html indeterminate=true color="green" %}
</div>


<div class="mb-3">
	<label class="form-label">Form buttons</label>
	<div class="btn-list">
		{% include ui/button.html color="secondary" block=true icon="brand/github" icon-color="github" text="Login with Github" %}
		{% include ui/button.html color="secondary" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
	</div>
</div>

<div class="mb-3">
	<label class="form-label">Form control rounded</label>
	<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
	{% include ui/form/input-icon.html class="form-control-rounded" %}
</div>

<div class="mb-3">
	<label class="form-label">Form control flush</label>
	<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
</div>