<nav class="vd-pagination" aria-label="Pagination">
    <ul class="vd-pagination__list">
        <li class="vd-pagination__item vd-pagination__item--previous">
            <a href="#" class="vd-pagination__link">
                <span class="vd-pagination__title">
                    <span class="fas fa-chevron-left" aria-hidden="true"></span>
                    Page précédente
                </span><span class="sr-only">:</span>
                <span class="vd-pagination__label">243 sur 244</span></a>
        </li>
    </ul>
</nav>
<nav class="vd-pagination" aria-label="{{ title }}">
  <ul class="vd-pagination__list">
    {%- if pages.previous -%}
    <li class="vd-pagination__item vd-pagination__item--previous">
      <a href="{{ pages.previous.url }}" class="vd-pagination__link">
        <span class="vd-pagination__title">
          <span class="fas fa-chevron-left" aria-hidden="true"></span>
          {{ pages.previous.title }}
        </span>
        {%- if pages.previous.label -%}
        <span class="sr-only">:</span>
        <span class="vd-pagination__label">{{ pages.previous.label }}</span>
        {%- endif -%}
      </a>
    </li>
    {%- endif %}
    {%- if pages.next -%}
    <li class="vd-pagination__item vd-pagination__item--next">
      <a href="{{ pages.next.url }}" class="vd-pagination__link">
        <span class="vd-pagination__title">
          {{ pages.next.title }}
          <span class="fas fa-chevron-right" aria-hidden="true"></span>
        </span>
        {%- if pages.next.label -%}
        <span class="sr-only">:</span>
        <span class="vd-pagination__label">{{ pages.next.label }}</span>
        {%- endif -%}
      </a>
    </li>
    {%- endif %}
  </ul>
</nav>
{
  "title": "Pagination",
  "pages": {
    "previous": {
      "url": "#",
      "title": "Page précédente",
      "label": "243 sur 244"
    },
    "next": false
  }
}
  • Content:
    @charset 'UTF-8';
    @use "sass:math";
    
    /**
     * 1. unstyle list
     */
    
    .vd-pagination {
      margin-bottom: 3em;
    }
    
    .vd-pagination__list {
      padding-left: 0; /* [1] */
      list-style: none; /* [1] */
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: center;
    }
    
    .vd-pagination__item {
      margin-top: 1em;
      flex: 0 1 auto;
      padding: math.div($spacer, 4);
    
      &--next {
        text-align: right;
        margin-left: auto;
      }
    
      & + &--next {
        margin-left: inherit;
      }
    
      &.is-active {
        color: $pagination-active-color;
        pointer-events: none;
        background-color: $pagination-active-bg;
      }
    
      &.is-disabled {
        color: $pagination-disabled-color;
      }
    }
    
    .vd-pagination__link {
      display: block;
    
      &,
      &:hover {
        text-decoration: none;
      }
    }
    
    .vd-pagination__title {
      text-decoration: none;
    
      @include media-breakpoint-up(sm) {
        font-size: 1.3em;
      }
    }
    
    .vd-pagination__label {
      display: block;
      font-size: 0.8em;
    }
    
  • URL: /components/raw/pagination/_pagination.scss
  • Filesystem Path: src/components/02-molecules/navigation/pagination/_pagination.scss
  • Size: 959 Bytes

Use “next / previous” pagination instead of numbered pages.