x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav class="flex items-center gap" aria-label="Pagination"><a class="btn btn--borderless" aria-label="Previous page" href="#page-1"> <img aria-hidden="true" src="/assets/chevron-left-a65898c7.svg" width="16" height="16" /> <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><span class="pi-3" aria-hidden="true"> <img aria-hidden="true" src="/assets/ellipsis-a6a4aa61.svg" width="16" height="16" /></span><a class="btn btn--borderless" aria-label="Next page" href="#page-3"> <span>Next</span> <img aria-hidden="true" src="/assets/chevron-right-63c462ab.svg" width="16" height="16" /></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" aria-label="Pagination"> <%= link_to "#page-1", class: "btn btn--borderless", aria: { label: "Previous page" } do %> <%= image_tag "chevron-left.svg", size: 16, aria: { hidden: true } %> <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" %> <span class="pi-3" aria-hidden="true"> <%= image_tag "ellipsis.svg", size: 16, aria: { hidden: true } %> </span> <%= link_to "#page-3", class: "btn btn--borderless", aria: { label: "Next page" } do %> <span>Next</span> <%= image_tag "chevron-right.svg", size: 16, aria: { hidden: true } %> <% 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.