x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav class="flex items-center gap-half" style="--btn-padding: .375rem .75rem" aria-label="Pagination"><a class="btn btn--borderless" aria-label="Previous page" href="#page-1"> <span class="icon icon--chevron-left" aria-hidden="true"></span> <span>Previous</span></a><a class="btn btn--borderless" href="#page-1">1</a><a class="btn" aria-current="page" href="#page-2">2</a><a class="btn btn--borderless" href="#page-3">3</a><div class="flex items-center pi-2" aria-hidden="true"> <span class="icon icon--ellipsis"></span></div><a class="btn btn--borderless" 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="flex items-center gap-half" style="--btn-padding: .375rem .75rem" aria-label="Pagination"> <%= link_to "#page-1", class: "btn btn--borderless", 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 btn--borderless" %> <%= link_to "2", "#page-2", class: "btn", aria: { current: "page" } %> <%= link_to "3", "#page-3", class: "btn btn--borderless" %> <div class="flex items-center pi-2" aria-hidden="true"> <span class="icon icon--ellipsis"></span> </div> <%= link_to "#page-3", class: "btn btn--borderless", aria: { label: "Next page" } do %> <span>Next</span> <span class="icon icon--chevron-right" aria-hidden="true"></span> <% end %></nav>
CSS is not required or multiple files are needed, check the notes.
Java Script is not required or multiple files are needed, check the notes.
No notes provided.