<nav class="pagination" role="navigation" aria-label="Pagination">
    <ul class="pagination-prev-group">
        <li class="pagination-first">
            <a href="?page=1" title="First page" aria-label="First page" class="button button-icon icon-left">
                <div>
                    <svg width="8" height="8" class="icon icon-o-navigate-double-left"><use xlink:href="/assets/svg/core.svg#o-navigate-double-left" /></svg>
                    <span>First</span>
                </div>
            </a>
        </li>
        <li class="pagination-prev">
            <a href="?page=2" rel="prev" title="Previous page" aria-label="Previous page" class="button button-icon icon-left">
                <div>
                    <svg width="8" height="8" class="icon icon-o-navigate-left"><use xlink:href="/assets/svg/core.svg#o-navigate-left" /></svg>
                    <span>Prev</span>
                </div>
            </a>
        </li>
    </ul>
    <ul class="pagination-numbers">
        <li class="pagination-number">
            <a class="button button-simple" href="?page=1" title="Page 1">1</a>
        </li>
        <li class="pagination-number">
            <a class="button button-simple" href="?page=2" title="Page 2">2</a>
        </li>
        <li class="pagination-number pagination-current">
            <a class="button button-simple" href="?page=3" title="Page 3, current page" aria-label="3, current page">3</a>
        </li>
        <li class="pagination-number">
            <a class="button button-simple" href="?page=4" title="Page 4">4</a>
        </li>
        <li class="pagination-number">
            <a class="button button-simple" href="?page=5" title="Page 5">5</a>
        </li>
    </ul>
    <ul class="pagination-next-group">
        <li class="pagination-next">
            <a disabled href="?page=4" rel="next" title="Next page" aria-label="Next page" class="button button-icon icon-right disabled">
                <div>
                    <svg width="8" height="8" class="icon icon-o-navigate-right"><use xlink:href="/assets/svg/core.svg#o-navigate-right" /></svg>
                    <span>Next</span>
                </div>
            </a>
        </li>
        <li class="pagination-last">
            <a disabled href="?page=5" title="Last page" aria-label="Last page" class="button button-icon icon-right disabled">
                <div>
                    <svg width="8" height="8" class="icon icon-o-navigate-double-right"><use xlink:href="/assets/svg/core.svg#o-navigate-double-right" /></svg>
                    <span>Last</span>
                </div>
            </a>
        </li>
    </ul>
</nav>
<nav class="pagination" role="navigation" aria-label="Pagination">
    <ul class="pagination-prev-group">
        <li class="pagination-first">
        	<a href="?page=1" title="First page" aria-label="First page" class="button button-icon icon-left">
        		<div>
		            {{ icon 'core/o-navigate-double-left' 8 }}
		            <span>First</span>
		        </div>
        	</a>
        </li>
        <li class="pagination-prev">
        	<a href="?page=2" rel="prev" title="Previous page" aria-label="Previous page" class="button button-icon icon-left">
		        <div>
		            {{ icon 'core/o-navigate-left' 8 }}
		            <span>Prev</span>
		        </div>
        	</a>
        </li>
      </ul>
      <ul class="pagination-numbers">
        <li class="pagination-number">
        	<a class="button button-simple" href="?page=1" title="Page 1">1</a>
        </li>
        <li class="pagination-number">
        	<a class="button button-simple" href="?page=2" title="Page 2">2</a>
        </li>
        <li class="pagination-number pagination-current">
        	<a class="button button-simple" href="?page=3" title="Page 3, current page" aria-label="3, current page">3</a>
        </li>
        <li class="pagination-number">
        	<a class="button button-simple" href="?page=4" title="Page 4">4</a>
        </li>
        <li class="pagination-number">
        	<a class="button button-simple" href="?page=5" title="Page 5">5</a>
        </li>
      </ul>
      <ul class="pagination-next-group">
        <li class="pagination-next">
        	<a disabled href="?page=4" rel="next" title="Next page" aria-label="Next page" class="button button-icon icon-right disabled">
        		<div>
		            {{ icon 'core/o-navigate-right' 8 }}
		            <span>Next</span>
		        </div>
        	</a>
        </li>
        <li class="pagination-last">
        	<a disabled href="?page=5" title="Last page" aria-label="Last page" class="button button-icon icon-right disabled">
	        	<div>
		            {{ icon 'core/o-navigate-double-right' 8 }}
		            <span>Last</span>
		        </div>
        	</a>
        </li>
    </ul>
</nav>
/* No context defined for this component. */
  • Content:
    .pagination {
    	width: 100%;
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: space-between;
    }
    
    .pagination .button {
    	box-shadow: none;
    }
    
    .pagination ul {
    	display:flex;
    	padding: 0;
    	list-style: none;
    
    }
    
    .pagination ul:first-child,
    .pagination ul:last-child {
    	flex: 0 1 auto;
    }
    
    .pagination ul:last-child {
    	justify-content: flex-end;
    }
    
    .pagination li {
    	margin: 0 5px;
    }
    
    .pagination-number.pagination-current {
    	background-color: palette(ui, primary);
    	border-radius: 2px;
    }
    
    .pagination-number.pagination-current a {
    	color: #fff;
    	border: 0;
    }
    
    .pagination .disabled {
    	opacity: 0.2;
    }
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: src/components/13-navigation/03-pagination/01-atoms/01-pagination/pagination.scss
  • Size: 597 Bytes
  • Handle: @pagination
  • Preview:
  • Filesystem Path: src/components/13-navigation/03-pagination/01-atoms/01-pagination/pagination.hbs

JavaScript to add keyboard shortcuts: http://osvaldas.info/keyboard-shortcuts-for-pagination