TACC UI Pattern Library

C Page

Pagination component for navigating through multiple pages of content.

⚠️ Warning

Naming does not accurately reflect BEM.

Class Description
.c-page-list container for pagination controls
.c-page-end previous/next navigation buttons
.c-page-item individual page number button
.c-page-link clickable page number link
.c-page-item--etcetera ellipsis between page numbers
.c-button--is-active indicates current page 
<!-- Single Page -->
<nav class="c-page-list">
    <button class="c-page-end" disabled type="button">
        &lt; Previous
    </button>
    <button class="c-page-item c-page-item--is-active c-page-link" disabled type="button">
        1
    </button>
    <button class="c-page-end" disabled type="button">
        Next &gt;
    </button>
</nav>

<!-- Few Pages (Current: 2 of 4) -->
<nav class="c-page-list">
    <button class="c-page-end" type="button">
        &lt; Previous
    </button>
    <button class="c-page-item c-page-link" type="button">
        1
    </button>
    <button class="c-page-item c-page-item--is-active c-page-link" type="button">
        2
    </button>
    <button class="c-page-item c-page-link" type="button">
        3
    </button>
    <button class="c-page-item c-page-link" type="button">
        4
    </button>
    <button class="c-page-end" type="button">
        Next &gt;
    </button>
</nav>

<!-- Few Pages (Current: Last) -->
<nav class="c-page-list">
    <button class="c-page-end" type="button">
        &lt; Previous
    </button>
    <button class="c-page-item c-page-link" type="button">
        1
    </button>
    <button class="c-page-item c-page-link" type="button">
        2
    </button>
    <button class="c-page-item c-page-link" type="button">
        3
    </button>
    <button class="c-page-item c-page-item--is-active c-page-link" type="button">
        4
    </button>
    <button class="c-page-end" disabled type="button">
        Next &gt;
    </button>
</nav>

<!-- Many Pages - Near Start (Current: 3 of 20) -->
<nav class="c-page-list">
    <button class="c-page-end" type="button">
        &lt; Previous
    </button>
    <button class="c-page-item c-page-link" type="button">
        1
    </button>
    <button class="c-page-item c-page-link" type="button">
        2
    </button>
    <button class="c-page-item c-page-item--is-active c-page-link" type="button">
        3
    </button>
    <button class="c-page-item c-page-link" type="button">
        4
    </button>
    <button class="c-page-item c-page-link" type="button">
        5
    </button>
    <span class="c-page-item--etcetera">...</span>
    <button class="c-page-item c-page-link" type="button">
        20
    </button>
    <button class="c-page-end" type="button">
        Next &gt;
    </button>
</nav>

<!-- Many Pages - Middle (Current: 10 of 20) -->
<nav class="c-page-list">
    <button class="c-page-end" type="button">
        &lt; Previous
    </button>
    <button class="c-page-item c-page-link" type="button">
        1
    </button>
    <span class="c-page-item--etcetera">...</span>
    <button class="c-page-item c-page-link" type="button">
        8
    </button>
    <button class="c-page-item c-page-link" type="button">
        9
    </button>
    <button class="c-page-item c-page-item--is-active c-page-link" type="button">
        10
    </button>
    <button class="c-page-item c-page-link" type="button">
        11
    </button>
    <button class="c-page-item c-page-link" type="button">
        12
    </button>
    <span class="c-page-item--etcetera">...</span>
    <button class="c-page-item c-page-link" type="button">
        20
    </button>
    <button class="c-page-end" type="button">
        Next &gt;
    </button>
</nav>

<!-- Many Pages - Near End (Current: 18 of 20) -->
<nav class="c-page-list">
    <button class="c-page-end" type="button">
        &lt; Previous
    </button>
    <button class="c-page-item c-page-link" type="button">
        1
    </button>
    <span class="c-page-item--etcetera">...</span>
    <button class="c-page-item c-page-link" type="button">
        16
    </button>
    <button class="c-page-item c-page-link" type="button">
        17
    </button>
    <button class="c-page-item c-page-item--is-active c-page-link" type="button">
        18
    </button>
    <button class="c-page-item c-page-link" type="button">
        19
    </button>
    <button class="c-page-item c-page-link" type="button">
        20
    </button>
    <button class="c-page-end" type="button">
        Next &gt;
    </button>
</nav>

<!-- Example with Disabled Link -->
<nav class="c-page-list">
    <button class="c-page-end" type="button">
        &lt; Previous
    </button>
    <button class="c-page-item c-page-link" type="button">
        1
    </button>
    <button class="c-page-item c-page-link" type="button">
        2
    </button>
    <button class="c-page-item c-page-item--is-active c-page-link" type="button">
        3
    </button>
    <button class="c-page-item c-page-link" disabled type="button">
        4
    </button>
    <button class="c-page-item c-page-link" type="button">
        5
    </button>
    <button class="c-page-end" type="button">
        Next &gt;
    </button>
</nav>
  • Content: 
    nav + nav {
  padding-top: 20px;
}
  • URL: /components/raw/c-page/demo.css
  • Filesystem Path: src/lib/_imports/components/c-page/demo.css
  • Size: 35 Bytes 
{
  "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": "components"
}