Pagination
Important notice: The pagination component will not remove pages from the index if it overflows. Please trtuncate your array before sending it into list parameter.
Pagination
<!-- pagination.blade.php -->
<nav id="62becfe85a844" class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-uid="62becfe85a83f">
<ul class="c-pagination__list">
<li class="c-pagination__item--previous c-pagination__item">
<button id="62becfe85a93f" class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" href="" target="_top" disabled="true" js-pagination-prev="" type="button" aria-pressed="false" data-uid="62becfe85a939">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becfe85a994" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85a98f">
chevron_left
</i>
</span>
</span>
</button> </li>
<li class="c-pagination__page-wrapper">
<ul class="c-pagination__pages" js-table-pagination--links>
<li class="c-pagination__item" js-pagination-index="1">
<a id="62becfe85a9fa" class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" href="/components/organisms/pagination?pagination=1" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85a9f5">
<span class="c-button__label">
<span class="c-button__label-text ">
1
</span>
</span>
</a> </li>
<li class="c-pagination__item" js-pagination-index="2">
<a id="62becfe85aa56" class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=2" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85aa52">
<span class="c-button__label">
<span class="c-button__label-text ">
2
</span>
</span>
</a> </li>
<li class="c-pagination__item" js-pagination-index="3">
<a id="62becfe85aaaa" class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=3" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85aaa6">
<span class="c-button__label">
<span class="c-button__label-text ">
3
</span>
</span>
</a> </li>
<li class="c-pagination__item" js-pagination-index="4">
<a id="62becfe85aafd" class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=4" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85aaf9">
<span class="c-button__label">
<span class="c-button__label-text ">
4
</span>
</span>
</a> </li>
<li class="c-pagination__item" js-pagination-index="5">
<a id="62becfe85ab5d" class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=5" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85ab59">
<span class="c-button__label">
<span class="c-button__label-text ">
5
</span>
</span>
</a> </li>
</ul>
</li>
<li class="c-pagination__item u-display--none@xs">
<!-- icon.blade.php -->
<i id="62becfe85afb3" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85afae">
more_horiz
</i>
</li>
<li class="c-pagination__item u-display--none@xs">
<a id="62becfe85b025" class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=15" target="_top" aria-label="Page 15" type="button" data-uid="62becfe85b020">
<span class="c-button__label">
<span class="c-button__label-text ">
15
</span>
</span>
</a></li>
<li class="c-pagination__item--next c-pagination__item">
<a id="62becfe85b084" class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" href="?pagination=2" target="_top" disabled="false" js-pagination-next="" type="button" data-uid="62becfe85b080">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becfe85b0d1" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85b0cd">
chevron_right
</i>
</span>
</span>
</a> </li>
</ul>
</nav>@pagination([
'list' => [
['href' => '/components/organisms/pagination?pagination=1', 'label' => 'Page 1'],
['href' => '/components/organisms/pagination?pagination=2', 'label' => 'Page 2'],
['href' => '/components/organisms/pagination?pagination=3', 'label' => 'Page 3'],
['href' => '/components/organisms/pagination?pagination=4', 'label' => 'Page 4'],
['href' => '/components/organisms/pagination?pagination=5', 'label' => 'Page 5'],
['href' => '/components/organisms/pagination?pagination=6', 'label' => 'Page 6'],
['href' => '/components/organisms/pagination?pagination=7', 'label' => 'Page 7'],
['href' => '/components/organisms/pagination?pagination=8', 'label' => 'Page 8'],
['href' => '/components/organisms/pagination?pagination=9', 'label' => 'Page 9'],
['href' => '/components/organisms/pagination?pagination=10', 'label' => 'Page 10'],
['href' => '/components/organisms/pagination?pagination=11', 'label' => 'Page 11'],
['href' => '/components/organisms/pagination?pagination=12', 'label' => 'Page 12'],
['href' => '/components/organisms/pagination?pagination=13', 'label' => 'Page 13'],
['href' => '/components/organisms/pagination?pagination=14', 'label' => 'Page 14'],
['href' => '/components/organisms/pagination?pagination=15', 'label' => 'Page 15'],
],
'current' => isset($_GET['pagination']) ? $_GET['pagination'] : 1
])
@endpaginationPagination outlined
<!-- pagination.blade.php -->
<nav id="62becfe85b4ac" class="c-pagination c-pagination--outlined" role="navigation" aria-label="Pagination Navigation" data-uid="62becfe85b4a7">
<ul class="c-pagination__list">
<li class="c-pagination__item--previous c-pagination__item">
<button id="62becfe85b59b" class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" href="" target="_top" disabled="true" js-pagination-prev="" type="button" aria-pressed="false" data-uid="62becfe85b595">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becfe85b5ef" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85b5ea">
chevron_left
</i>
</span>
</span>
</button> </li>
<li class="c-pagination__page-wrapper">
<ul class="c-pagination__pages" js-table-pagination--links>
<li class="c-pagination__item" js-pagination-index="1">
<a id="62becfe85b650" class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" href="/components/organisms/pagination?pagination=1" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85b64b">
<span class="c-button__label">
<span class="c-button__label-text ">
1
</span>
</span>
</a> </li>
<li class="c-pagination__item" js-pagination-index="2">
<a id="62becfe85b6a1" class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=2" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85b69e">
<span class="c-button__label">
<span class="c-button__label-text ">
2
</span>
</span>
</a> </li>
<li class="c-pagination__item" js-pagination-index="3">
<a id="62becfe85b6de" class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=3" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85b6db">
<span class="c-button__label">
<span class="c-button__label-text ">
3
</span>
</span>
</a> </li>
<li class="c-pagination__item" js-pagination-index="4">
<a id="62becfe85b716" class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=4" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85b713">
<span class="c-button__label">
<span class="c-button__label-text ">
4
</span>
</span>
</a> </li>
<li class="c-pagination__item" js-pagination-index="5">
<a id="62becfe85b74e" class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=5" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85b74b">
<span class="c-button__label">
<span class="c-button__label-text ">
5
</span>
</span>
</a> </li>
</ul>
</li>
<li class="c-pagination__item u-display--none@xs">
<!-- icon.blade.php -->
<i id="62becfe85b7c9" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85b7c5">
more_horiz
</i>
</li>
<li class="c-pagination__item u-display--none@xs">
<a id="62becfe85b803" class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/organisms/pagination?pagination=15" target="_top" aria-label="Page 15" type="button" data-uid="62becfe85b800">
<span class="c-button__label">
<span class="c-button__label-text ">
15
</span>
</span>
</a></li>
<li class="c-pagination__item--next c-pagination__item">
<a id="62becfe85b83e" class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" href="?pagination=2" target="_top" disabled="false" js-pagination-next="" type="button" data-uid="62becfe85b83b">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becfe85b884" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85b880">
chevron_right
</i>
</span>
</span>
</a> </li>
</ul>
</nav>@pagination([
'list' => [
['href' => '/components/organisms/pagination?pagination=1', 'label' => 'Page 1'],
['href' => '/components/organisms/pagination?pagination=2', 'label' => 'Page 2'],
['href' => '/components/organisms/pagination?pagination=3', 'label' => 'Page 3'],
['href' => '/components/organisms/pagination?pagination=4', 'label' => 'Page 4'],
['href' => '/components/organisms/pagination?pagination=5', 'label' => 'Page 5'],
['href' => '/components/organisms/pagination?pagination=6', 'label' => 'Page 6'],
['href' => '/components/organisms/pagination?pagination=7', 'label' => 'Page 7'],
['href' => '/components/organisms/pagination?pagination=8', 'label' => 'Page 8'],
['href' => '/components/organisms/pagination?pagination=9', 'label' => 'Page 9'],
['href' => '/components/organisms/pagination?pagination=10', 'label' => 'Page 10'],
['href' => '/components/organisms/pagination?pagination=11', 'label' => 'Page 11'],
['href' => '/components/organisms/pagination?pagination=12', 'label' => 'Page 12'],
['href' => '/components/organisms/pagination?pagination=13', 'label' => 'Page 13'],
['href' => '/components/organisms/pagination?pagination=14', 'label' => 'Page 14'],
['href' => '/components/organisms/pagination?pagination=15', 'label' => 'Page 15'],
],
'current' => isset($_GET['pagination']) ? $_GET['pagination'] : 1,
'classList' => [
"c-pagination--outlined"
]
])
@endpaginationUsing JS
Easier pagination
With just a few added attributes you can have pagnation made for you
Simple pagination
Item 1
Item 2
Item 3
<!-- card.blade.php -->
<div href="" id="62becfe85c196" class="c-card c-card--default c-card--ratio-4-3" js-pagination-target="" data-uid="62becfe85c192">
<div class="c-card__header">
<!-- typography.blade.php -->
<h4 id="62becfe85bb7e" class="c-typography c-typography__variant--p" data-uid="62becfe85bb7b">
Simple pagination
</h4> </div>
<!-- collection.blade.php -->
<div id="62becfe85be98" class="c-collection" js-pagination-container="" data-uid="62becfe85be95">
<!-- collection__item.blade.php -->
<div id="62becfe85bc92" class="c-collection__item" js-pagination-item="" data-uid="62becfe85bc8e">
<div class="c-collection__content">
Item 1
</div>
</div>
<!-- collection__item.blade.php -->
<div id="62becfe85bdfe" class="c-collection__item" js-pagination-item="" data-uid="62becfe85bdfa">
<div class="c-collection__content">
Item 2
</div>
</div>
<!-- collection__item.blade.php -->
<div id="62becfe85be37" class="c-collection__item" js-pagination-item="" data-uid="62becfe85be34">
<div class="c-collection__content">
Item 3
</div>
</div>
</div>
<!-- pagination.blade.php -->
<nav id="62becfe85bf80" class="c-pagination" role="navigation" aria-label="Pagination Navigation" js-pagination="" js-pagination-per-page="2" js-pagination-max-pages="" data-uid="62becfe85bf7b">
<ul class="c-pagination__list">
<li class="c-pagination__item--previous c-pagination__item">
<button id="62becfe85c025" class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" href="" target="_top" disabled="true" js-pagination-prev="" type="button" aria-pressed="false" data-uid="62becfe85c021">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becfe85c05e" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85c05b">
chevron_left
</i>
</span>
</span>
</button> </li>
<li class="c-pagination__page-wrapper">
<ul class="c-pagination__pages" js-table-pagination--links>
<li class="c-pagination__item" js-pagination-index="1">
<a id="62becfe85c0a6" class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" href="?pagination=1" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62becfe85c0a3">
<span class="c-button__label">
<span class="c-button__label-text ">
1
</span>
</span>
</a> </li>
</ul>
</li>
<li class="c-pagination__item--next c-pagination__item">
<button id="62becfe85c0e6" class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" href="" target="_top" disabled="true" js-pagination-next="" type="button" aria-pressed="false" data-uid="62becfe85c0e3">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becfe85c119" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becfe85c116">
chevron_right
</i>
</span>
</span>
</button> </li>
</ul>
</nav>
</div>@card([
'attributeList' => [
'js-pagination-target' => ''
]
])
<div class="c-card__header">
@typography([
'element' => "h4"
])
Simple pagination
@endtypography
</div>
@collection(['attributeList' => ['js-pagination-container' => '']])
@collection__item(['attributeList' => ['js-pagination-item' => '']])
Item 1
@endcollection__item
@collection__item(['attributeList' => ['js-pagination-item' => '']])
Item 2
@endcollection__item
@collection__item(['attributeList' => ['js-pagination-item' => '']])
Item 3
@endcollection__item
@endcollection
@pagination([
'list' => [
['href' => '?pagination=1', 'label' => 'Page 1'],
],
'current' => 1,
'useJS' => true,
'perPage' => 2,
])
@endpagination
@endcardBlade component parameters
| Key | Default value | Type | Available values | Description |
| list | [] | array | - | Array with pages |
| current | 1 | integer | - | current page as index number |
| currentClass | --is-active | string | - | The current classname |
| componentElement | nav | string | - | The tag for the component |
| listElement | ul | string | - | List element tag |
| listItem | li | string | - | List item tag |
| linkPrefix | ?pagination= | string | - | Pagination uses a link prefix on prev next buttons before the numeric index, add it here. |
| anchorTag | string | - | Adds the ability to add an anchor tag in the end of every link. | |
| previousDisabled | false | string | - | - |
| nextDisabled | false | string | - | - |
| useJS | false | boolean | - | If the item should use default JS to supply pagination |
| perPage | 10 | integer | - | How many items per page |
| maxPages | false | boolean | - | Maximum amount of pages |
| buttonStyle | filled | string | - | The style of button to display |
| buttonSize | sm | string | - | Size of the buttons |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |