<div class="pagination-wrapper">
<button class="btn btn-secondary btn-small pagination__btn btn-icon-only " type="button">
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="20px"
height="20px"
viewBox="0 0 20 20"
enable-background="new 0 0 20 20"
xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6666 9.16683H6.52492L11.1833 4.5085L9.99992 3.3335L3.33325 10.0002L9.99992 16.6668L11.1749 15.4918L6.52492 10.8335H16.6666V9.16683V9.16683Z"/>
</svg>
</span>
</span>
</button>
<button class="btn btn-small pagination__page-btn " type="button">
<span class="btn__inner">
<span class="btn__text">1</span>
</span>
</button>
<span class="pagination__page-ellipse">
<p>…</p>
</span>
<button class="btn btn-small pagination__page-btn " type="button">
<span class="btn__inner">
<span class="btn__text">24</span>
</span>
</button>
<button class="btn btn-small pagination__page-btn pagination__page-btn--is-current " type="button">
<span class="btn__inner">
<span class="btn__text">25</span>
</span>
</button>
<button class="btn btn-small pagination__page-btn " type="button">
<span class="btn__inner">
<span class="btn__text">26</span>
</span>
</button>
<span class="pagination__page-ellipse">
<p>…</p>
</span>
<button class="btn btn-small pagination__page-btn " type="button">
<span class="btn__inner">
<span class="btn__text">68</span>
</span>
</button>
<button class="btn btn-secondary btn-small pagination__btn btn-icon-only " type="button">
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="20px"
height="20px"
viewBox="0 0 20 20"
enable-background="new 0 0 20 20"
xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99992 3.3335L8.82492 4.5085L13.4749 9.16683H3.33325V10.8335H13.4749L8.82492 15.4918L9.99992 16.6668L16.6666 10.0002L9.99992 3.3335Z"/>
</svg>
</span>
</span>
</button>
<div class="pagination__jump-wrapper">
<span class="pagination__jump-text">Jump: </span>
<div class="text-input__inner">
<input type="" class="text-input__input" placeholder="" value="25" />
</div>
</div>
</div>
<div class="pagination-wrapper{{#unless pages}} pagination-wrapper-minimal{{/unless}}">
{{> @button disabled=disableBack className="btn-secondary btn-small pagination__btn" icon='<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6666 9.16683H6.52492L11.1833 4.5085L9.99992 3.3335L3.33325 10.0002L9.99992 16.6668L11.1749 15.4918L6.52492 10.8335H16.6666V9.16683V9.16683Z"/>' width="20" height="20"}}
{{#each pages}}
{{#if text}}
{{#if isCurrent}}
{{> @button className="btn-small pagination__page-btn pagination__page-btn--is-current" text=text}}
{{else}}
{{> @button className="btn-small pagination__page-btn" text=text}}
{{/if}}
{{else}}
<span class="pagination__page-ellipse">
<p>…</p>
</span>
{{/if}}
{{/each}}
{{> @button className="btn-secondary btn-small pagination__btn" icon='<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99992 3.3335L8.82492 4.5085L13.4749 9.16683H3.33325V10.8335H13.4749L8.82492 15.4918L9.99992 16.6668L16.6666 10.0002L9.99992 3.3335Z"/>' width="20" height="20"}}
{{#if showJump}}
<div class="pagination__jump-wrapper">
<span class="pagination__jump-text">Jump: </span>
{{> @input-inner value="25"}}
</div>
{{/if}}
</div>
{{!-- TODO: Add the Jump variation --}}
{
"showJump": true,
"pages": [
{
"text": "1"
},
{
"text": null
},
{
"text": "24"
},
{
"text": "25",
"isCurrent": true
},
{
"text": "26"
},
{
"text": null
},
{
"text": "68"
}
]
}
Pagination allows a user to navigate through a large amount of data.
Use Pagination for large sets of data.