1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "numbers": [
    {
      "text": "1",
      "href": "javascript:void(0)",
      "current": true
    },
    {
      "text": "2",
      "href": "javascript:void(0)"
    },
    {
      "text": "3",
      "href": "javascript:void(0)"
    },
    {
      "text": "…"
    },
    {
      "text": "6",
      "href": "javascript:void(0)"
    }
  ],
  "prevLink": false,
  "nextLink": "javascript:void(0)"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="m-pagination">
	<ul class="m-pagination__numbers">
		{% for number in numbers %}
			{% if number.href %}
				<li>
					<a class="{{ number.current ? 'is-current' }}" href="{{ number.href }}">{{ number.text }}</a>
				</li>
			{% else %}
				<li>{{ number.text }}</li>
			{% endif %}
		{% endfor %}
	</ul>

	<ul class="m-pagination__buttons">
		<li>
			{% if prevLink %}
				<a href="{{ prevLink }}" aria-label="Previous Page">{% include 'components/atoms/icon/icon' with { icon: 'arrow--md-circle-left' } %}</a>
			{% else %}
				{% include 'components/atoms/icon/icon' with { icon: 'arrow--md-circle-left' } %}
			{% endif %}
		</li>
		<li>
			{% if nextLink %}
				<a href="{{ nextLink }}" aria-label="Next Page">{% include 'components/atoms/icon/icon' with { icon: 'arrow--md-circle-right' } %}</a>
			{% else %}
				{% include 'components/atoms/icon/icon' with { icon: 'arrow--md-circle-right' } %}
			{% endif %}
		</li>
	</ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
.m-pagination {
  @include child-spacing-x(
    (
      xsmall: 28px
    )
  );

  &,
  &__buttons,
  &__numbers {
    display: flex;
    align-items: center;
  }

  &__numbers {
    @include f-ui-2;
    color: var(--color--text--aux);
    @include child-spacing-x(
      (
        xsmall: 32px
      )
    );

    & > * {
      cursor: default;
    }

    a {
      display: inline-block;
      min-width: 10px;
      text-align: center;
      position: relative;

      &:before {
        content: "";
        @include stretch(-8px);
      }

      @include standard-link();

      @include link-focus;
    }

    .is-current {
      color: var(--color--text);
      border-bottom-width: 1px;
      border-color: var(--color--action);
    }
  }

  &__buttons {
    @include child-spacing-x(
      (
        xsmall: 4px
      )
    );

    color: var(--color--icon--aux);

    a {
      display: block;
      color: var(--color--text);
      @include standard-link(var(--color--action));
      @include circle-focus;
    }
  }
}