PageDots
Previous- & next-buttons with dots as page indicators.
Use Cases: .pageDots are typically used in combination with the .slider element.
Basic Example
This is how a basic .pageDots looks like and how you write the markup:
<!-- example -->
<div class="box bg-gray-22 b-0 p-4">
<div class="pageDots">
<a class="pageDots__buttonPrev">
<span class="hidden">Previous</span>
</a>
<a class="pageDots__dot is--active">
<span class="hidden">1</span>
</a>
<a class="pageDots__dot">
<span class="hidden">2</span>
</a>
<a class="pageDots__dot">
<span class="hidden">3</span>
</a>
<a class="pageDots__buttonNext">
<span class="hidden">Next</span>
</a>
</div>
</div>
All examples includes a wrapper element with light or dark gray background for demonstration purpose. The wrapper is not a part of .pageDots.
Modifiers
Dark
Add the modifier .pageDots--dark to render a dark version:
<!-- example -->
<div class="box bg-gray-22 b-0 p-4">
<div class="pageDots pageDots--dark">
<a class="pageDots__buttonPrev">
<span class="hidden">Previous</span>
</a>
<a class="pageDots__dot is--active">
<span class="hidden">1</span>
</a>
<a class="pageDots__dot">
<span class="hidden">2</span>
</a>
<a class="pageDots__dot">
<span class="hidden">3</span>
</a>
<a class="pageDots__buttonNext">
<span class="hidden">Next</span>
</a>
</div>
</div>
Subtle
The default .pageDots background is white. Add the modifier .pageDots--subtle to render a tranparent version:
<!-- example -->
<div class="box bg-gray-5 b-0 p-4">
<div class="pageDots pageDots--subtle">
<a class="pageDots__buttonPrev">
<span class="hidden">Previous</span>
</a>
<a class="pageDots__dot is--active">
<span class="hidden">1</span>
</a>
<a class="pageDots__dot">
<span class="hidden">2</span>
</a>
<a class="pageDots__dot">
<span class="hidden">3</span>
</a>
<a class="pageDots__buttonNext">
<span class="hidden">Next</span>
</a>
</div>
</div>
Disabled
Use the global modifier .is--disabled on the child elements .pageDots__buttonPrev or .pageDots__buttonNext to mark them as disabled:
<!-- example -->
<div class="box bg-gray-22 b-0 p-4">
<div class="pageDots">
<a class="pageDots__buttonPrev is--disabled">
<span class="hidden">Previous</span>
</a>
<a class="pageDots__dot is--active">
<span class="hidden">1</span>
</a>
<a class="pageDots__dot">
<span class="hidden">2</span>
</a>
<a class="pageDots__dot">
<span class="hidden">3</span>
</a>
<a class="pageDots__buttonNext">
<span class="hidden">Next</span>
</a>
</div>
</div>