Navigation is a little light on at the moment as we’re still working on UI patterns for navigation. We’ll be adding lots more soon.

Paginations

2.0.1

Pagination is used to navigate within a set of related views. This element allows navigation within both finite (a set number) and infinite (unknown number) of views.
Lazy-load seems to have superseded pagination, however if you are working within technical restrictions then pagination is still an acceptable option.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="pagination">
	<span class="pagination-sronly">Pagination:</span>

	<ul class="pagination-list">
		<li class="is-disabled">
			<a class="pagination-page" href="http://YOUR-URL.com.au" rel="prev">
				<span class="pagination-sronly">Step</span>
				Back
				<span class="pagination-sronly">one page</span>
			</a>
		</li>
		<li class="is-active">
			<a class="pagination-page" href="http://YOUR-URL.com.au">
				<span class="pagination-sronly">You are currently reading page</span>
				1
			</a>
		</li>
		<li>
			<a class="pagination-page" href="http://YOUR-URL.com.au">
				<span class="pagination-sronly">Go to page</span>
				2
			</a>
		</li>
		<li>
			<a class="pagination-page" href="http://YOUR-URL.com.au">
				<span class="pagination-sronly">Go to page</span>
				3
			</a>
		</li>
		<li>
			<a class="pagination-page" href="http://YOUR-URL.com.au" rel="next">
				<span class="pagination-sronly">Step to the</span>
				Next
				<span class="pagination-sronly">page</span>
			</a>
		</li>
	</ul>
</div>

CSS

Modifier classes:
  • is-disabled
  • is-active

LESS

The main mixin is called: _paginations(WBG)
2.0.2

Pagination is used to navigate within a set of related views. This element allows navigation within both finite (a set number) and infinite (unknown number) of views.
Lazy-load seems to have superseded pagination, however if you are working within technical restrictions then pagination is still an acceptable option.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="pagination">
	<span class="pagination-sronly">Pagination:</span>

	<ul class="pagination-list">
		<li class="is-disabled">
			<a class="pagination-page" href="http://YOUR-URL.com.au" rel="prev">
				<span class="pagination-sronly">Step</span>
				Back
				<span class="pagination-sronly">one page</span>
			</a>
		</li>
		<li class="is-active">
			<a class="pagination-page" href="http://YOUR-URL.com.au">
				<span class="pagination-sronly">You are currently reading page</span>
				1
			</a>
		</li>
		<li>
			<a class="pagination-page" href="http://YOUR-URL.com.au">
				<span class="pagination-sronly">Go to page</span>
				2
			</a>
		</li>
		<li>
			<a class="pagination-page" href="http://YOUR-URL.com.au">
				<span class="pagination-sronly">Go to page</span>
				3
			</a>
		</li>
		<li>
			<a class="pagination-page" href="http://YOUR-URL.com.au" rel="next">
				<span class="pagination-sronly">Step to the</span>
				Next
				<span class="pagination-sronly">page</span>
			</a>
		</li>
	</ul>
</div>

CSS

Modifier classes:
  • is-disabled
  • is-active

LESS

The main mixin is called: _paginations(WBG)
2.0.3

Pagination is used to navigate within a set of related views. This element allows navigation within both finite (a set number) and infinite (unknown number) of views.
Lazy-load seems to have superseded pagination, however if you are working within technical restrictions then pagination is still an acceptable option.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Increasing top and bottom padding to bring pagination height to 36px, a multiple of 6px for GEL consistency. (#316)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="pagination">
	<span class="pagination-sronly">Pagination:</span>

	<ul class="pagination-list">
		<li class="is-disabled">
			<a class="pagination-page" href="http://YOUR-URL.com.au" rel="prev">
				<span class="pagination-sronly">Step</span>
				Back
				<span class="pagination-sronly">one page</span>
			</a>
		</li>
		<li class="is-active">
			<a class="pagination-page" href="http://YOUR-URL.com.au">
				<span class="pagination-sronly">You are currently reading page</span>
				1
			</a>
		</li>
		<li>
			<a class="pagination-page" href="http://YOUR-URL.com.au">
				<span class="pagination-sronly">Go to page</span>
				2
			</a>
		</li>
		<li>
			<a class="pagination-page" href="http://YOUR-URL.com.au">
				<span class="pagination-sronly">Go to page</span>
				3
			</a>
		</li>
		<li>
			<a class="pagination-page" href="http://YOUR-URL.com.au" rel="next">
				<span class="pagination-sronly">Step to the</span>
				Next
				<span class="pagination-sronly">page</span>
			</a>
		</li>
	</ul>
</div>

CSS

Modifier classes:
  • is-disabled
  • is-active

LESS

The main mixin is called: _paginations(WBG)