x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav class="pagination" aria-label="Pagination"><a class="btn pagination__button" aria-label="Previous page" href="#page-1"> <span class="icon icon--chevron-left" aria-hidden="true"></span> <span>Previous</span></a><a class="btn pagination__button" href="#page-1">1</a><a class="btn pagination__button" aria-current="page" href="#page-2">2</a><a class="btn pagination__button" href="#page-3">3</a><div class="inline-flex items-center pi-2" aria-hidden="true"> <span class="icon icon--ellipsis"></span></div><a class="btn pagination__button" aria-label="Next page" href="#page-3"> <span>Next</span> <span class="icon icon--chevron-right" aria-hidden="true"></span></a></nav>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<nav class="pagination" aria-label="Pagination"> <%= link_to "#page-1", class: "btn pagination__button", aria: { label: "Previous page" } do %> <span class="icon icon--chevron-left" aria-hidden="true"></span> <span>Previous</span> <% end %> <%= link_to "1", "#page-1", class: "btn pagination__button" %> <%= link_to "2", "#page-2", class: "btn pagination__button", aria: { current: "page" } %> <%= link_to "3", "#page-3", class: "btn pagination__button" %> <div class="inline-flex items-center pi-2" aria-hidden="true"> <span class="icon icon--ellipsis"></span> </div> <%= link_to "#page-3", class: "btn pagination__button", aria: { label: "Next page" } do %> <span>Next</span> <span class="icon icon--chevron-right" aria-hidden="true"></span> <% end %></nav>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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; --btn-padding: .375rem .75rem; &[aria-current="page"] { --btn-border-color: var(--color-border); }}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.