aboutsummaryrefslogtreecommitdiff
path: root/docs/components
diff options
context:
space:
mode:
Diffstat (limited to 'docs/components')
-rw-r--r--docs/components/pagination.md8
1 files changed, 5 insertions, 3 deletions
diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index e23c25720..62536e165 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -30,8 +30,12 @@ In addition, as pages likely have more than one such navigation section, it's ad
</nav>
{% endexample %}
+## Working with icons
+
+Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with `aria` attributes and the `.sr-only` utility.
+
{% example html %}
-<nav aria-label="Page navigation">
+<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
@@ -42,8 +46,6 @@ In addition, as pages likely have more than one such navigation section, it's ad
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
- <li class="page-item"><a class="page-link" href="#">4</a></li>
- <li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>