FlipButtons
Previous- & next-buttons on the left and right side of their container.
Use Cases: .flipButtons are typically used in combination with the .slider element.
Basic Example
This is how a basic .flipButtons looks like and how you write the markup:
<!-- example -->
<div class="box h-10 m-lr-5">
<div class="flipButtons">
<a class="flipButtons__buttonPrev">
<span class="hidden">Previous</span>
</a>
<a class="flipButtons__buttonNext">
<span class="hidden">Next</span>
</a>
</div>
</div>
Modifiers
Position
Use the modifier .flipButtons--inset to place the buttons on the inside of their container:
<!-- example -->
<div class="box h-10">
<div class="flipButtons flipButtons--inset">
<a class="flipButtons__buttonPrev">
<span class="hidden">Previous</span>
</a>
<a class="flipButtons__buttonNext">
<span class="hidden">Next</span>
</a>
</div>
</div>
Disabled
Use the global modifier .is--disabled on the child elements .flipButtons__buttonPrev or .flipButtons__buttonNext to mark them as disabled:
<!-- example -->
<div class="box h-10 m-lr-5">
<div class="flipButtons">
<a class="flipButtons__buttonPrev is--disabled">
<span class="hidden">Previous</span>
</a>
<a class="flipButtons__buttonNext">
<span class="hidden">Next</span>
</a>
</div>
</div>