<h1 class="display-4">Short display headline</h1>

<h1>Short display headline</h1>

<h2>Short display headline</h2>

<h3>Short display headline</h3>

<h4>Short display headline</h4>

<h5>Short display headline</h5>

<h6>Short display headline</h6>

<p class="small">Short display headline</p>

<p>Short display headline</p>

<p class="large">Short display headline</p>

<a href="">Learn more</a>
<a class="text-dark" href="">Learn more</a>
<a class="text-danger" href="">Learn more</a>
<a class="action-link" href="">Learn more</a>
<a class="transparent-link" href="">Learn more</a>
<a class="transparent-invert-link" href="">Learn more</a>
<a class="link-icon" href="#" target="_blank">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18.5C14.6944 18.5 18.5 14.6944 18.5 10C18.5 5.30558 14.6944 1.5 10 1.5C5.30558 1.5 1.5 5.30558 1.5 10C1.5 14.6944 5.30558 18.5 10 18.5ZM10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20ZM14 10L8 6V14L14 10Z" fill="#0065F2"></path>
</svg>
<span>link with icon</span>
</a>

<a class="large" href="">Learn more large</a>
<a class="text-dark large" href="">Learn more large</a>
<a class="text-danger large" href="">Learn more large</a>

<a class="action-link" href="">Learn more</a>
<a class="action-link text-dark" href="">Learn more</a>
<a class="action-link text-danger" href="">Learn more</a>

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">SecondaryButton</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-info">InfoButton</button>
<button class="btn btn-Warning">Warning Button</button>
<button class="btn btn-danger">Danger Button</button>

<button class="btn btn-primary btn-lg">Primary Button Large</button>
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-primary btn-sm">Primary Button Small</button>

<button class="btn btn-outline-primary btn-lg">Outline Primary Button Large</button>
<button class="btn btn-outline-primary">Outline Primary Button</button>
<button class="btn btn-outline-primary btn-sm">Outline Primary Button Small</button>

<button class="btn btn-primary btn-lg btn-rounded">Rounded Button Large</button>
<button class="btn btn-primary btn-rounded">Rounded Button</button>
<button class="btn btn-primary btn-sm btn-rounded">Rounded Button Small</button>

<input class="form-control form-control-sm" placeholder="Default">
input class="form-control form-control-sm" placeholder="Disabled" disabled="true">
<input class="form-control form-control-sm is-invalid" placeholder="Error" value="Error">

<input class="form-control" placeholder="Default">
input class="form-control" placeholder="Disabled" disabled="true">
<input class="form-control is-invalid" placeholder="Error" value="Error">

<input class="form-control form-control-lg" placeholder="Default">
input class="form-control form-control-lg" placeholder="Disabled" disabled="true">
<input class="form-control form-control-lg is-invalid" placeholder="Error" value="Error">

<div class="input-group">
<input class="form-control form-control-sm" placeholder="Default">
<div class="input-group-append">
<button class="btn btn-primary">Action</button>
</div>
</div>

<div class="custom-control">
<label class="custom-checkbox">
<input class="custom-control-input" type="checkbox" checked="true">
<div class="custom-control-label">Default Checkbox</div>
</label>
</div>

<div class="custom-control">
<label class="custom-checkbox">
<input class="custom-control-input" type="checkbox" disabled="true">
<div class="custom-control-label">Desable Checkbox</div>
</label>
</div>

<div class="custom-control">
<label class="custom-radio">
<input class="custom-control-input" type="radio" name="radio" checked="true">
<div class="custom-control-label">Default Radiobutton</div>
</label>
</div>

<div class="custom-control">
<label class="custom-radio">
<input class="custom-control-input" type="radio" name="radio" disabled="true">
<div class="custom-control-label">Desable Radiobutton</div>
</label>
</div>

<div class="custom-select custom-select-sm">
<select placeholder="Group">
<option value="1">Topic One</option>
<option value="2">Topic Two</option>
<option value="3">Topic Three</option>
<option value="4">Topic Four</option>
</select>
</div>

<div class="custom-select">
<select placeholder="Group">
<option value="1">Topic One</option>
<option value="2">Topic Two</option>
<option value="3">Topic Three</option>
<option value="4">Topic Four</option>
</select>
</div>

<div class="custom-select custom-select-lg">
<select placeholder="Group">
<option value="1">Topic One</option>
<option value="2">Topic Two</option>
<option value="3">Topic Three</option>
<option value="4">Topic Four</option>
</select>
</div>

<ol class="breadcrumb">
<li class="breadcrumb-item"><a class="text-dark" href=""><span>First</span></a></li>
<li class="breadcrumb-item"><a class="text-dark" href=""><span>Second</span></a></li>
<li class="breadcrumb-item active"><span>Third</span></li>
</ol>

<ul class="custom-list">
<li>First action</li>
<li>Second action</li>
<li>Third action</li>
</ul>

<ol class="custom-list">
<li>First action</li>
<li>Second action</li>
<li>Third action</li>
</ol>