components_pagination.html

---
layout: admin
title: Components - Pagination

section: components
module: components_pagination

header:
    icon: compare_arrows
    title: Pagination
    description: Add pagination links to help split up your long content into shorter, easier to understand blocks.
---

				<section id="components_pagination">
					<!-- ##### -->
					<!-- Basic -->
					<!-- ##### -->
					<div class="row">
						<div class="col s12">
							<h4 class="main-text lighten-1">Basic</h4>

							<ul class="pagination">
								<li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
								<li class="active"><a href="#!">1</a></li>
								<li class="waves-effect"><a href="#!">2</a></li>
								<li class="waves-effect"><a href="#!">3</a></li>
								<li class="waves-effect"><a href="#!">4</a></li>
								<li class="waves-effect"><a href="#!">5</a></li>
								<li class="waves-effect"><a href="#!">6</a></li>
								<li class="waves-effect"><a href="#!">7</a></li>
								<li class="waves-effect"><a href="#!">8</a></li>
								<li class="waves-effect"><a href="#!">9</a></li>
								<li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
							</ul>

	            <pre>
	            	<code class="language-markup">
&lt;ul class="pagination">
	&lt;li class="disabled">&lt;a href="#!">&lt;i class="material-icons">chevron_left</i>&lt;/i>&lt;/a>&lt;/li>
	&lt;li class="active">&lt;a href="#!">1&lt;/a>&lt;/li>
	&lt;li class="waves-effect">&lt;a href="#!">2&lt;/a>&lt;/li>
	&lt;li class="waves-effect">&lt;a href="#!">3&lt;/a>&lt;/li>
	&lt;li class="waves-effect">&lt;a href="#!">4&lt;/a>&lt;/li>
	&lt;li class="waves-effect">&lt;a href="#!">5&lt;/a>&lt;/li>
	&lt;li class="waves-effect">&lt;a href="#!">&lt;i class="material-icons">chevron_right</i>&lt;/i>&lt;/a>&lt;/li>
&lt;/ul>
	            	</code>
	            </pre>
						</div>
					</div>
				</section>