<div class="pagination">
    <span class="pagination__item">
    <a href="#" class="pagination__link pagination__link--prev"><svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>
</a>
  </span>
    <span class="pagination__item"><a href="#" class="pagination__link">1</a></span>
    <span class="pagination__item pagination__item--current"><a href="#" class="pagination__link">2</a></span>
    <span class="pagination__item"><a href="#" class="pagination__link">3</a></span>
    <span class="pagination__item">
    <a href="#" class="pagination__link pagination__link--next"><svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
  </span>
</div>
<div class="pagination">
  {{#if prev.linked}}
  <span class="pagination__item">
    <a href="{{prev.path}}" class="pagination__link pagination__link--prev">{{render '@icons--arrow-left'}}</a>
  </span>
  {{/if}}
  {{#each links}}
  <span class="pagination__item{{#if current}} pagination__item--current{{/if}}"><a href="{{this.path}}" class="pagination__link">{{label}}</a></span>
  {{/each}}
  {{#if next.linked}}
  <span class="pagination__item">
    <a href="{{next.path}}" class="pagination__link pagination__link--next">{{render '@icons--arrow-right'}}</a>
  </span>
  {{/if}}
</div>
{
  "prev": {
    "path": "#",
    "linked": true
  },
  "next": {
    "path": "#",
    "linked": true
  },
  "links": [
    {
      "label": "1",
      "path": "#",
      "current": null
    },
    {
      "label": "2",
      "path": "#",
      "current": true
    },
    {
      "label": "3",
      "path": "#",
      "current": null
    }
  ]
}
  • Content:
    .pagination {
      margin-top: 20px;
      text-align: center;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 35px;
      }
    }
    
    .pagination__item {
      display: inline-block;
      width: 30px;
      height: 19px;
      font-size: 1.6rem;
      line-height: 1.9rem;
      text-align: center;
    
      @include breakpoint($breakpoint-md) {
        width: 40px;
    
        .icon--arrow-right,
        .icon--arrow-left {
          position: relative;
          top: -3px;
          height: 6px;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 50px;
        font-size: 2.4rem;
        line-height: 2.8rem;
    
        .icon--arrow-right,
        .icon--arrow-left {
          height: 11px;
        }
      }
    }
    
    .pagination__link {
      color: $color-medium-dark;
      text-decoration: none;
    }
    
    .pagination__item--current {
      .pagination__link {
        color: $color-primary;
        font-weight: bold;
      }
    }
    
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: src/components/01-elements/navigation/pagination/pagination.scss
  • Size: 819 Bytes

There are no notes for this item.