<!-- Default -->
<div class="pagination">
    <span class="btn btn-round btn-toggle pagination_button" disabled aria-hidden="true">
      <i class="i i-arrow-left u-pull-top-4"></i>
    </span>

    <div class="pagination_pages">

        <a href="#" class="pagination_page pagination_page-middle is-num- is-current" aria-label="Go to page">
        1
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        2
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        3
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        4
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        5
      </a>

    </div>

    <a href="" class="btn btn-round btn-toggle pagination_button" aria-label="Go to the next page">
      <i class="i i-arrow-right u-pull-top-4"></i>
    </a>

</div>

<!-- Last Page Highlighted -->
<div class="pagination">
    <a href="" class="btn btn-round btn-toggle pagination_button" aria-label="Go to the previous page">
      <i class="i i-arrow-left u-pull-top-4"></i>
    </a>

    <div class="pagination_pages">

        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        1
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        2
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        3
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        4
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num- is-current" aria-label="Go to page">
        5
      </a>

    </div>

    <span class="btn btn-round btn-toggle pagination_button" disabled aria-hidden="true">
      <i class="i i-arrow-right u-pull-top-4"></i>
    </span>

</div>

<!-- All Buttons Active -->
<div class="pagination">
    <a href="" class="btn btn-round btn-toggle pagination_button" aria-label="Go to the previous page">
      <i class="i i-arrow-left u-pull-top-4"></i>
    </a>

    <div class="pagination_pages has-first-last">

        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        1
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        2
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num- is-current" aria-label="Go to page">
        3
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        4
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        5
      </a>

    </div>

    <a href="" class="btn btn-round btn-toggle pagination_button" aria-label="Go to the next page">
      <i class="i i-arrow-right u-pull-top-4"></i>
    </a>

</div>

<!-- Lot Of Pages -->
<div class="pagination">
    <a href="" class="btn btn-round btn-toggle pagination_button" aria-label="Go to the previous page">
      <i class="i i-arrow-left u-pull-top-4"></i>
    </a>

    <div class="pagination_pages has-first-last">

        <a href="" class="pagination_page is-first" aria-label="Go to the first page">
        1
      </a>
        <span class="pagination_placeholder">&hellip;</span>

        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        6
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        7
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num- is-current" aria-label="Go to page">
        8
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        9
      </a>
        <a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
        10
      </a>

        <span class="pagination_placeholder">&hellip;</span>
        <a href="" class="pagination_page is-last" aria-label="Go to the last page">
        20
      </a>
    </div>

    <a href="" class="btn btn-round btn-toggle pagination_button" aria-label="Go to the next page">
      <i class="i i-arrow-right u-pull-top-4"></i>
    </a>

</div>

<div class="pagination">
  {{#if prevPage }}
    <a
      href="{{ prevPage.url }}"
      class="btn btn-round btn-toggle pagination_button"
      aria-label="Go to the previous page">
      <i class="i i-arrow-left u-pull-top-4"></i>
    </a>
  {{ else }}
    <span class="btn btn-round btn-toggle pagination_button" disabled aria-hidden="true">
      <i class="i i-arrow-left u-pull-top-4"></i>
    </span>
  {{/if}}

  {{#if hasFirstLast }}
    <div class="pagination_pages has-first-last">
  {{ else if firstPage }}
    <div class="pagination_pages has-first">
  {{ else_if lastPage }}
    <div class="pagination_pages has-last">
  {{ else }}
    <div class="pagination_pages">
  {{/if}}

    {{#if firstPage }}
      <a
        href="{{ firstPage.url }}"
        class="pagination_page is-first"
        aria-label="Go to the first page">
        {{ firstPage.pageNum }}
      </a>
      <span class="pagination_placeholder">&hellip;</span>
    {{/if}}

    {{#each pages }}
      <a
        href="{{ url }}"
        class="pagination_page pagination_page-middle is-num-{{index}}{{#if isCurrent }} is-current{{/if}}"
        aria-label="Go to page">
        {{ pageNum }}
      </a>
    {{/each}}

    {{#if lastPage }}
      <span class="pagination_placeholder">&hellip;</span>
      <a
        href="{{ lastPage.url }}"
        class="pagination_page is-last"
        aria-label="Go to the last page">
        {{ lastPage.pageNum }}
      </a>
    {{/if}}
  </div>

  {{#if nextPage }}
    <a
      href="{{ nextPage.url }}"
      class="btn btn-round btn-toggle pagination_button"
      aria-label="Go to the next page">
      <i class="i i-arrow-right u-pull-top-4"></i>
    </a>
  {{ else }}
    <span class="btn btn-round btn-toggle pagination_button" disabled aria-hidden="true">
      <i class="i i-arrow-right u-pull-top-4"></i>
    </span>
  {{/if}}

</div>
/* Default */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "prevPage": null,
  "nextPage": true,
  "hasFirstLast": null,
  "firstPage": null,
  "lastPage": null,
  "pages": [
    {
      "isCurrent": true,
      "pageNum": 1,
      "url": "#"
    },
    {
      "isCurrent": null,
      "pageNum": 2,
      "url": "#"
    },
    {
      "isCurrent": null,
      "pageNum": 3,
      "url": "#"
    },
    {
      "isCurrent": null,
      "pageNum": 4,
      "url": "#"
    },
    {
      "isCurrent": null,
      "pageNum": 5,
      "url": "#"
    }
  ]
}

/* Last Page Highlighted */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "prevPage": true,
  "nextPage": null,
  "hasFirstLast": null,
  "firstPage": null,
  "lastPage": null,
  "pages": [
    {
      "isCurrent": null,
      "pageNum": 1,
      "url": "#"
    },
    {
      "isCurrent": null,
      "pageNum": 2,
      "url": "#"
    },
    {
      "isCurrent": null,
      "pageNum": 3,
      "url": "#"
    },
    {
      "isCurrent": null,
      "pageNum": 4,
      "url": "#"
    },
    {
      "isCurrent": true,
      "pageNum": 5,
      "url": "#"
    }
  ]
}

/* All Buttons Active */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "prevPage": true,
  "nextPage": true,
  "hasFirstLast": true,
  "firstPage": null,
  "lastPage": null,
  "pages": [
    {
      "isCurrent": null,
      "pageNum": 1,
      "url": "#"
    },
    {
      "isCurrent": null,
      "pageNum": 2,
      "url": "#"
    },
    {
      "isCurrent": true,
      "pageNum": 3,
      "url": "#"
    },
    {
      "isCurrent": null,
      "pageNum": 4,
      "url": "#"
    },
    {
      "isCurrent": null,
      "pageNum": 5,
      "url": "#"
    }
  ]
}

/* Lot Of Pages */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "prevPage": true,
  "nextPage": true,
  "hasFirstLast": true,
  "firstPage": {
    "pageNum": 1
  },
  "lastPage": {
    "pageNum": 20
  },
  "pages": [
    {
      "isCurrent": null,
      "pageNum": 6,
      "url": "#"
    },
    {
      "isCurrent": null,
      "pageNum": 7,
      "url": "#"
    },
    {
      "isCurrent": true,
      "pageNum": 8,
      "url": "#"
    },
    {
      "isCurrent": null,
      "pageNum": 9,
      "url": "#"
    },
    {
      "isCurrent": null,
      "pageNum": 10,
      "url": "#"
    }
  ]
}

There are no notes for this item.