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.

Breadcrumbs

1.0.0

Breadcrumbs are styled navigational links used to indicate a user journey or path. They are a simple, effective and proven method to aid orientation.
We like breadcrumbs.

loading example…
2.0.0

Breadcrumbs are styled navigational links used to indicate a user journey or path. They are a simple, effective and proven method to aid orientation.
We like breadcrumbs.

loading example…
2.0.1

Breadcrumbs are styled navigational links used to indicate a user journey or path. They are a simple, effective and proven method to aid orientation.
We like breadcrumbs.

Paginations

1.0.0

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.

loading example… 
<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(WBC)
2.0.0

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.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205) 
<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(WBC)
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.

loading example…

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! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205) 
<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(WBC)
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! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205) 
<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(WBC)