Tongues

Get more attention and add scroll functionality inside any section. You can customize the colors and icons.

How it works

A tongue element is applied on a section where you want to get more attention for what will follow. It works with the scroll-to component in order to add a smooth transition to another section inside the page.

Example

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

Variations

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