{% extends 'layouts/lab-side-content.html' %}

{% from 'macros/lab-example.html' import LabExample %}
{% from 'macros/lab-code.html' import LabCode %}

{% set pageType = "components" %}
{% set pageId = "pagination" %}

{% block content %}
  <h1>Pagination</h1>

  <h3>Usage</h3>

  {{LabExample(pageType, pageId)}}
  {{LabCode('html', '
  <ul class="c-pagination">
    <li class="c-pagination__item is-disabled">
      <span class="c-pagination__link" href="#">...</span>
    </li>
    <li class="c-pagination__item">
      <a class="c-pagination__link" href="#">...</a>
    </li>
    ...
    <li class="c-pagination__item">
      <a class="c-pagination__link" href="#">...</a>
    </li>
  </ul>
  ')}}
{% endblock %}