Skip to content
STYLESCAPE

Flipper

Examples for the ss-c-flipper module.

Down

The flipper is absolutely centred in its nearest positioned parent.

HTML 
<span style="position: relative; display: inline-block; width: 2rem; height: 2rem">
            <span class="ss-c-flipper ss-c-flipper--down" aria-hidden="true">
                <span class="ss-c-flipper__icon"></span>
            </span>
        </span>

All directions

HTML 
<span style="position: relative; display: inline-block; width: 2rem; height: 2rem">
            <span class="ss-c-flipper ss-c-flipper--up" aria-hidden="true">
                <span class="ss-c-flipper__icon"></span>
            </span>
        </span>
        <span style="position: relative; display: inline-block; width: 2rem; height: 2rem">
            <span class="ss-c-flipper ss-c-flipper--down" aria-hidden="true">
                <span class="ss-c-flipper__icon"></span>
            </span>
        </span>
        <span style="position: relative; display: inline-block; width: 2rem; height: 2rem">
            <span class="ss-c-flipper ss-c-flipper--left" aria-hidden="true">
                <span class="ss-c-flipper__icon"></span>
            </span>
        </span>
        <span style="position: relative; display: inline-block; width: 2rem; height: 2rem">
            <span class="ss-c-flipper ss-c-flipper--right" aria-hidden="true">
                <span class="ss-c-flipper__icon"></span>
            </span>
        </span>

Active

Add is-active to fold the bars into an arrow.

HTML 
<span style="position: relative; display: inline-block; width: 2rem; height: 2rem">
            <span class="ss-c-flipper ss-c-flipper--up is-active" aria-hidden="true">
                <span class="ss-c-flipper__icon"></span>
            </span>
        </span>
        
        <span style="position: relative; display: inline-block; width: 2rem; height: 2rem">
            <span class="ss-c-flipper ss-c-flipper--down is-active" aria-hidden="true">
                <span class="ss-c-flipper__icon"></span>
            </span>
        </span>
        
        <span style="position: relative; display: inline-block; width: 2rem; height: 2rem">
            <span class="ss-c-flipper ss-c-flipper--left is-active" aria-hidden="true">
                <span class="ss-c-flipper__icon"></span>
            </span>
        </span>
        
        <span style="position: relative; display: inline-block; width: 2rem; height: 2rem">
            <span class="ss-c-flipper ss-c-flipper--right is-active" aria-hidden="true">
                <span class="ss-c-flipper__icon"></span>
            </span>
        </span>