TACC UI Pattern Library

X Pagination

Mixins for creating consistent pagination components.

Mixin Description
pagination Base styles for pagination container
pagination__end-item Styles for previous/next items
pagination__page-item Styles for numbered page items
pagination__skipped-item Styles for ellipsis/skip items
pagination__active-item Styles for current page item
pagination__disabled-item Styles for disabled items
pagination__link Base styles for pagination links
pagination__page-link Styles for numbered page links
pagination__end-link Styles for previous/next links
pagination__skipped-link Styles for ellipsis/skip indicators
pagination__page-link--active Styles for current page link
pagination__page-link--disabled Styles for disabled links 
<!-- Single Page -->
<nav>
    <ul class="x-pagination">
        <li class="x-pagination__end-item x-pagination__disabled-item">
            <span class="x-pagination__end-link x-pagination__page-link--disabled">&lt; Previous</span>
        </li>
        <li class="x-pagination__page-item x-pagination__active-item">
            <span class="x-pagination__page-link x-pagination__page-link--active">1</span>
        </li>
        <li class="x-pagination__end-item x-pagination__disabled-item">
            <span class="x-pagination__end-link x-pagination__page-link--disabled">Next &gt;</span>
        </li>
    </ul>
</nav>

<!-- Few Pages (Current: 2 of 4) -->
<nav>
    <ul class="x-pagination">
        <li class="x-pagination__end-item">
            <a class="x-pagination__end-link" href="#">&lt; Previous</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">1</a>
        </li>
        <li class="x-pagination__page-item x-pagination__active-item">
            <span class="x-pagination__page-link x-pagination__page-link--active">2</span>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">3</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">4</a>
        </li>
        <li class="x-pagination__end-item">
            <a class="x-pagination__end-link" href="#">Next &gt;</a>
        </li>
    </ul>
</nav>

<!-- Few Pages (Current: Last) -->
<nav>
    <ul class="x-pagination">
        <li class="x-pagination__end-item">
            <a class="x-pagination__end-link" href="#">&lt; Previous</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">1</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">2</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">3</a>
        </li>
        <li class="x-pagination__page-item x-pagination__active-item">
            <span class="x-pagination__page-link x-pagination__page-link--active">4</span>
        </li>
        <li class="x-pagination__end-item x-pagination__disabled-item">
            <span class="x-pagination__end-link x-pagination__page-link--disabled">Next &gt;</span>
        </li>
    </ul>
</nav>

<!-- Many Pages - Near Start (Current: 3 of 20) -->
<nav>
    <ul class="x-pagination">
        <li class="x-pagination__end-item">
            <a class="x-pagination__end-link" href="#">&lt; Previous</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">1</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">2</a>
        </li>
        <li class="x-pagination__page-item x-pagination__active-item">
            <span class="x-pagination__page-link x-pagination__page-link--active">3</span>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">4</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">5</a>
        </li>
        <li class="x-pagination__skipped-item">
            <span class="x-pagination__skipped-link">...</span>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">20</a>
        </li>
        <li class="x-pagination__end-item">
            <a class="x-pagination__end-link" href="#">Next &gt;</a>
        </li>
    </ul>
</nav>

<!-- Many Pages - Middle (Current: 10 of 20) -->
<nav>
    <ul class="x-pagination">
        <li class="x-pagination__end-item">
            <a class="x-pagination__end-link" href="#">&lt; Previous</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">1</a>
        </li>
        <li class="x-pagination__skipped-item">
            <span class="x-pagination__skipped-link">...</span>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">8</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">9</a>
        </li>
        <li class="x-pagination__page-item x-pagination__active-item">
            <span class="x-pagination__page-link x-pagination__page-link--active">10</span>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">11</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">12</a>
        </li>
        <li class="x-pagination__skipped-item">
            <span class="x-pagination__skipped-link">...</span>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">20</a>
        </li>
        <li class="x-pagination__end-item">
            <a class="x-pagination__end-link" href="#">Next &gt;</a>
        </li>
    </ul>
</nav>

<!-- Many Pages - Near End (Current: 18 of 20) -->
<nav>
    <ul class="x-pagination">
        <li class="x-pagination__end-item">
            <a class="x-pagination__end-link" href="#">&lt; Previous</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">1</a>
        </li>
        <li class="x-pagination__skipped-item">
            <span class="x-pagination__skipped-link">...</span>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">16</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">17</a>
        </li>
        <li class="x-pagination__page-item x-pagination__active-item">
            <span class="x-pagination__page-link x-pagination__page-link--active">18</span>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">19</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">20</a>
        </li>
        <li class="x-pagination__end-item">
            <a class="x-pagination__end-link" href="#">Next &gt;</a>
        </li>
    </ul>
</nav>

<!-- Example with Disabled Link -->
<nav>
    <ul class="x-pagination">
        <li class="x-pagination__end-item">
            <a class="x-pagination__end-link" href="#">&lt; Previous</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">1</a>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">2</a>
        </li>
        <li class="x-pagination__page-item x-pagination__active-item">
            <span class="x-pagination__page-link x-pagination__page-link--active">3</span>
        </li>
        <li class="x-pagination__page-item x-pagination__disabled-item">
            <span class="x-pagination__page-link x-pagination__page-link--disabled">4</span>
        </li>
        <li class="x-pagination__page-item">
            <a class="x-pagination__page-link" href="#">5</a>
        </li>
        <li class="x-pagination__end-item">
            <a class="x-pagination__end-link" href="#">Next &gt;</a>
        </li>
    </ul>
</nav>
 
{
  "shouldSkipPattern": true,
  "globalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.demo.css"
    },
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.base.css"
    }
  ],
  "cmsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.cms.css"
    }
  ],
  "docsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.docs.css"
    }
  ],
  "portalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.portal.css"
    }
  ],
  "subdir": "tools"
}