Pager: first page
<div class="pager">
<ul>
<li class="pager__page is-current">
<a href="#">1</a>
</li>
<li class="pager__page">
<a href="#">2</a>
</li>
<li class="pager__page">
<a href="#">3</a>
</li>
<li class="pager__page">
<a href="#">...</a>
</li>
<li class="pager__page">
<a href="#">12</a>
</li>
<li class="pager__page pager__lastPage">
<a href="#">
<span class="iconMdsp arrowSingleRight"></span>
</a>
</li>
</ul>
</div>
Pager: middle page
<div class="pager">
<ul>
<li class="pager__page pager__firstPage ">
<a href="#">
<span class="iconMdsp arrowSingleLeft"></span>
</a>
</li>
<li class="pager__page">
<a href="#">1</a>
</li>
<li class="pager__page">
<a href="#">2</a>
</li>
<li class="pager__page is-current">
<a href="#">3</a>
</li>
<li class="pager__page">
<a href="#">...</a>
</li>
<li class="pager__page">
<a href="#">12</a>
</li>
<li class="pager__page pager__lastPage">
<a href="#">
<span class="iconMdsp arrowSingleRight"></span>
</a>
</li>
</ul>
</div>
Pager: last page
<div class="pager">
<ul>
<li class="pager__page pager__firstPage">
<a href="#">
<span class="iconMdsp arrowSingleLeft"></span>
</a>
</li>
<li class="pager__page">
<a href="#">1</a>
</li>
<li class="pager__page">
<a href="#">2</a>
</li>
<li class="pager__page">
<a href="#">3</a>
</li>
<li class="pager__page">
<a href="#">4</a>
</li>
<li class="pager__page">
<a href="#">5</a>
</li>
<li class="pager__page">
<a href="#">6</a>
</li>
<li class="pager__page">
<a href="#">7</a>
</li>
<li class="pager__page">
<a href="#">8</a>
</li>
<li class="pager__page">
<a href="#">...</a>
</li>
<li class="pager__page pager__lastPage is-current">
<a href="#">12</a>
</li>
</ul>
</div>
Usage
Element | Class | Description |
---|
.pager .pager__page | .is-current | Visually labels the currently selected / active pager item. |
.pager | .has-textalign-right | Moves the pager element to the right. |
Advanced pager
<div class="pager pager--advanced">
<ul>
<li class="pager__page pager__firstPage">
<a href="#">
<span class="iconMdsp arrowSingleLeft"></span>
</a>
</li>
<li class="pager__page">
<div class="inputGroup">
<input class="inputGroup__textInput" type="number" value="6" id="input-number25" />
</div>
</li>
<li class="pager__page pager__lastPage">
<a href="#">
<span class="iconMdsp arrowSingleRight"></span>
</a>
</li>
<li class="pager__page pager__pageCounter">
Page 6 of 380
</li>
<li class="pager__page pager__itemPerPage">
<div class="inputGroup">
Items
<div class="selectWrapper">
<select id="idol-select25" class="inputGroup__select">
<option value="15">15</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
</li>
</ul>
</div>
Advanced pager with border
<div class="pager pager--advanced pager--withBorder">
<ul>
<li class="pager__page pager__firstPage">
<a href="#">
<span class="iconMdsp arrowSingleLeft"></span>
</a>
</li>
<li class="pager__page">
<div class="inputGroup">
<input class="inputGroup__textInput" type="number" value="6" id="input-number26" />
</div>
</li>
<li class="pager__page pager__lastPage">
<a href="#">
<span class="iconMdsp arrowSingleRight"></span>
</a>
</li>
<li class="pager__page pager__pageCounter">
Page 2 of 283
</li>
<li class="pager__page pager__itemPerPage">
<div class="inputGroup">
Items
<div class="selectWrapper">
<select id="idol-select27" class="inputGroup__select">
<option value="15">15</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
</li>
</ul>
</div>
Usage
Element | Class | Description |
---|
.pager | .has-textalign-right | Moves the pager element to the right. |