v0.9.9defuss-shadcn
Theme
Design your own

defuss-shadcn / Website / Search & Navigation / collection-pagination

Built with: CSS

Collection PaginationBLK

Navigates between discrete pages of a collection - the range shown, the Pagination component and how many per page; or simply previous / next. Part of the Search & Navigation blocks.

On this page (4)
Component Skill — components/collection-pagination/component-skill.md

Native basis

A footer row: "Showing 13–24 of 248" (<output>), the Pagination component (links with aria-current="page") and a per-page Select in a GET form.

Built from

Pagination, Select.

Web Platform APIs

<nav>aria-current<output>Container queries

Classes

.mk-collection-pagination.mk-collection-pagination-range.mk-collection-pagination-size.mk-collection-pagination-page

Data attributes

data-variant: simple, centered.

§Default

The range in an <output>, the Pagination component (links - every page has a URL - with aria-current="page") and a per-page Select in a GET form.

§Simple

data-variant='simple': previous / next and where you are - for mobile or feeds.

§Centered

data-variant='centered': the pages centered with the range under them.

§CSS view file

/* -- Collection Pagination (website · Search & Navigation) ----------------
   Navigates between discrete pages of a collection - the range shown, the Pagination component and how many per page; or simply previous / next. */
@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(
    .mk-collection-pagination,
    .mk-collection-pagination *,
    .mk-collection-pagination ::before,
    .mk-collection-pagination ::after
  ) {
    box-sizing: border-box;
  }
  .mk-collection-pagination {
    container: mk-collection-pagination / inline-size;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    width: 100%;
    padding-block: 1rem;
    border-block-start: 1px solid var(--border);
    font-size: 0.875rem;
  }
  .mk-collection-pagination-range {
    color: var(--muted-foreground);
    & strong {
      color: var(--foreground);
      font-variant-numeric: tabular-nums;
    }
  }
  .mk-collection-pagination-size {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    & .select {
      width: auto;
      height: 2rem;
      font-size: 0.8125rem;
    }
  }
  .mk-collection-pagination[data-variant="simple"] .mk-collection-pagination-page {
    color: var(--muted-foreground);
  }
  .mk-collection-pagination[data-variant="centered"] {
    flex-direction: column;
    justify-content: center;
  }
  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-collection-pagination {
      border-color: CanvasText;
    }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub