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,
  "bootstrap4Styles": [
    {
      "isInternal": true,
      "layer": "foundation",
      "path": "/assets/core-styles.bootstrap4.css"
    }
  ],
  "bootstrap5Styles": [
    {
      "isInternal": true,
      "layer": "foundation",
      "path": "/assets/core-styles.bootstrap5.css"
    }
  ],
  "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"
}