Purpose Website UI Kit

Tongues

Cute tongue shaped elements that can be applied on any section for a better delimitation and extra functionality, such as smooth scroll and adding any icon inside using our font library.

Example

<div class="row">
    <div class="col-md-6">
        <div class="p-5 rounded bg-primary">
            <a href="#" class="tongue tongue-bottom scroll-me"><i class="fas fa-angle-down"></i></a>
        </div>
    </div>
    <div class="col-md-6">
        <div class="p-5 rounded bg-primary">
            <a href="#" class="tongue tongue-top scroll-me"><i class="fas fa-angle-up"></i></a>
        </div>
    </div>
</div>

Color variations

<div class="position-relative p-5">
    <a href="#" class="tongue tongue-bottom tongue-primary scroll-me"><i class="fas fa-angle-down"></i></a>
</div>
<div class="position-relative p-5">
    <a href="#" class="tongue tongue-bottom tongue-info scroll-me"><i class="fas fa-angle-down"></i></a>
</div>
<div class="position-relative p-5">
    <a href="#" class="tongue tongue-bottom tongue-success scroll-me"><i class="fas fa-angle-down"></i></a>
</div>
<div class="position-relative p-5">
    <a href="#" class="tongue tongue-bottom tongue-warning scroll-me"><i class="fas fa-angle-down"></i></a>
</div>
<div class="position-relative p-5">
    <a href="#" class="tongue tongue-bottom tongue-danger scroll-me"><i class="fas fa-angle-down"></i></a>
</div>