Pagination

Provide pagination links for your site or app with the multi-page pagination component.

Default pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

{% highlight html %} {% endhighlight %}

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

{% highlight html %} {% endhighlight %}

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.

{% highlight html %} {% endhighlight %}

Pagination text

Our pagination will normally be associated with .pagination-text to describe what is visualised and the total available.

{% highlight html %} {% endhighlight %}

Inverse

On grey backgrounds we invert our hover states, add .pagination-inverse for additional styles.

{% highlight html %} {% endhighlight %}