Components

Pagination

sketch:Readyscss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready

Import

@import 'settings-tools/_all-settings';
@import 'components/_c.pagination';
@import 'components/_c.select'; // (Optionnal)

Default Pagination

<div class="mc-pagination">
<a href="#" class="mc-pagination__button" aria-label="Previous page">
<svg class="mc-pagination__button-icon">
<use xlink:href="#iconLeftL" />
</svg>
</a>
<div class="mc-pagination__field">
<select class="mc-select mc-pagination__select">
<option value="1">Page 1 of 99</option>
<option value="2">Page 2 of 99</option>
<option value="3">Page x of 99</option>
<option value="99">Page 99 of 99</option>
</select>
</div>
<a href="#" class="mc-pagination__button" aria-label="Next Page">
<svg class="mc-pagination__button-icon">
<use xlink:href="#iconRightL" />
</svg>
</a>
</div>
Viewport: px
<div class="example">
<div class="mc-pagination">
<a href="#" class="mc-pagination__button" aria-label="Previous page">
<svg class="mc-pagination__button-icon">
<use xlink:href="#iconLeftL" />
</svg>
</a>
<div class="mc-pagination__field">
<select class="mc-select mc-pagination__select">
<option value="1">Page 1 of 99</option>
<option value="2">Page 2 of 99</option>
<option value="3">Page x of 99</option>
<option value="99">Page 99 of 99</option>
</select>
</div>
<a href="#" class="mc-pagination__button" aria-label="Next Page">
<svg class="mc-pagination__button-icon">
<use xlink:href="#iconRightL" />
</svg>
</a>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
<symbol id="iconLeftL" viewBox="0 0 24 24">
<path
class="cls-2"
d="M16.5,22a1,1,0,0,1-.71-.29l-9-9a1,1,0,0,1,0-1.42l9-9a1,1,0,1,1,1.42,1.42L8.91,12l8.3,8.29a1,1,0,0,1,0,1.42A1,1,0,0,1,16.5,22Z"
/>
</symbol>
<symbol id="iconRightL" viewBox="0 0 24 24">
<path
class="cls-2"
d="M7.5,22a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42L15.09,12,6.79,3.71A1,1,0,1,1,8.21,2.29l9,9a1,1,0,0,1,0,1.42l-9,9A1,1,0,0,1,7.5,22Z"
/>
</symbol>
</svg>

Light Pagination

<div class="mc-pagination mc-pagination--light">
<a href="#" class="mc-pagination__button" aria-label="Previous page">
<svg class="mc-pagination__button-icon">
<use xlink:href="#iconLeftL" />
</svg>
</a>
<a href="#" class="mc-pagination__button" aria-label="Next Page">
<svg class="mc-pagination__button-icon">
<use xlink:href="#iconRightL" />
</svg>
</a>
</div>
Viewport: px
<div class="example">
<div class="mc-pagination mc-pagination--light">
<a href="#" class="mc-pagination__button" aria-label="Previous page">
<svg class="mc-pagination__button-icon">
<use xlink:href="#iconLeftL" />
</svg>
</a>
<a href="#" class="mc-pagination__button" aria-label="Next Page">
<svg class="mc-pagination__button-icon">
<use xlink:href="#iconRightL" />
</svg>
</a>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
<symbol id="iconLeftL" viewBox="0 0 24 24">
<path
class="cls-2"
d="M16.5,22a1,1,0,0,1-.71-.29l-9-9a1,1,0,0,1,0-1.42l9-9a1,1,0,1,1,1.42,1.42L8.91,12l8.3,8.29a1,1,0,0,1,0,1.42A1,1,0,0,1,16.5,22Z"
/>
</symbol>
<symbol id="iconRightL" viewBox="0 0 24 24">
<path
class="cls-2"
d="M7.5,22a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42L15.09,12,6.79,3.71A1,1,0,1,1,8.21,2.29l9,9a1,1,0,0,1,0,1.42l-9,9A1,1,0,0,1,7.5,22Z"
/>
</symbol>
</svg>

Accessibility and semantic

Use aria-label="the button purpose" on every button of the pagination