Academy of Natural Sciences

Pagination Column 

<div class="c-pagination-column o-container">
    <div class="o-row">
        <div class="c-pagination-column__content o-col o-col-sm-8 o-col-sm--offset-4">
            <div class="o-pagination">
                <nav class="o-pagination__nav" aria-label="Pagination">

                    <div class="o-pagination__prev">
                        <a href="#prev" class="o-pagination__dir-link">
                            <span class="u-sr-only">Previous Page</span>
                            <span class="o-pagination__dir-icon" aria-hidden="true">
                                <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1 1L6 6L1 11" class="u-ct-stroke" />
                                </svg>

                            </span>
                        </a>
                    </div>

                    <ul class="o-pagination__items" aria-label="Pagination links">

                        <li class="o-pagination__item">
                            <a href="#1" class="o-pagination__link" aria-current="page" aria-label="Current Page - Page 1">1</a>
                        </li>

                        <li class="o-pagination__item">
                            <a href="#2" class="o-pagination__link" aria-label="Page 2">2</a>
                        </li>

                        <li class="o-pagination__item">
                            <a href="#3" class="o-pagination__link" aria-label="Page 3">3</a>
                        </li>

                        <li class="o-pagination__item">
                            <a href="#4" class="o-pagination__link" aria-label="Page 4">4</a>
                        </li>

                        <li class="o-pagination__item o-pagination__item--elipsis">
                            <span class="o-pagination__elipsis"> … </span>
                        </li>

                        <li class="o-pagination__item">
                            <a href="#14" class="o-pagination__link" aria-label="Page 14">14</a>
                        </li>

                    </ul>

                    <div class="o-pagination__next">
                        <a href="#next" class="o-pagination__dir-link">
                            <span class="u-sr-only">Next Page</span>
                            <span class="o-pagination__dir-icon" aria-hidden="true">
                                <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1 1L6 6L1 11" class="u-ct-stroke" />
                                </svg>

                            </span>
                        </a>
                    </div>

                </nav>
            </div>

        </div>
    </div>
</div>
 
<div class="c-pagination-column o-container">
  <div class="o-row">
    <div class="c-pagination-column__content o-col o-col-sm-8 o-col-sm--offset-4">
      {% include "04-objects/pagination" with data only %}
    </div>
  </div>
</div>
 
{
  "pageColorTheme": "teal",
  "data": {
    "prev": {
      "title": "Previous Page",
      "link": "#prev"
    },
    "items": [
      {
        "title": "1",
        "link": "#1",
        "isCurrent": true
      },
      {
        "title": "2",
        "link": "#2"
      },
      {
        "title": "3",
        "link": "#3"
      },
      {
        "title": "4",
        "link": "#4"
      },
      {
        "isElipsis": true
      },
      {
        "link": "#14",
        "title": "14"
      }
    ],
    "next": {
      "title": "Next Page",
      "link": "#next"
    }
  }
}

No notes defined.