# 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

Show code

    <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

Show code

    <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>