x
1
2
3
4
5
6
7
<nav class="pagination" aria-label="Pagination"> <a class="btn pagination__button" href="#">1</a> <a class="btn pagination__button" aria-current="page" href="#">2</a> <a class="btn pagination__button" href="#">3</a> <a class="btn pagination__button" href="#">4</a> <a class="btn pagination__button" href="#">5</a></nav>1
2
3
4
5
6
7
<nav class="pagination" aria-label="Pagination"> <%= link_to "1", "#", class: "btn pagination__button" %> <%= link_to "2", "#", class: "btn pagination__button", aria: { current: "page" } %> <%= link_to "3", "#", class: "btn pagination__button" %> <%= link_to "4", "#", class: "btn pagination__button" %> <%= link_to "5", "#", class: "btn pagination__button" %></nav>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.pagination { align-items: center; column-gap: var(--size-1); display: flex;}.pagination__button { --btn-background: transparent; --btn-border-color: transparent; --btn-box-shadow: none; --btn-cursor: pointer; &[aria-current="page"] { --btn-background: var(--color-surface); --btn-border-color: var(--color-border); --btn-box-shadow: var(--shadow-xs); }}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.