Pagination - Page Numbering

Introduction:

Pagination should be used to allow users to scroll through pages of related content. An example of this would be blog posts, or an image sheet, for photography. this might be used in a portfilio site

Usage:

This should be used at the bottom of a page so that there is a clear indication of the number of pages of content to scroll through, like stated above this should be used for the user to scroll through related content pages.


Pagination Component:


   <div class="pagination">
                                    <a href="#">&laquo;</a>
                                    <a href="#">1</a>
                                    <a href="#" class="active">2</a>
                                    <a href="#">3</a>
                                    <a href="#">4</a>
                                    <a href="#">5</a>
                                    <a href="#">6</a>
                                    <a href="#">7</a>
                                    <a href="#">8</a>
                                    <a href="#">9</a>
                                    <a href="#">10</a>
                                    <a href="#">&raquo;</a>
                            </div>
 
                        .pagination {
                            display: inline-block;
                            font-size: 2.2em;
                            margin-left: 250px;
                                    }

                        .pagination a {
                            color: black;
                            float: left;
                            padding: 16px 32px;
                            text-decoration: none;
                                        }

                        .pagination a.active {
                            background-color: #4CAF50;
                            color: white;
                            border-radius: 5px;
                                                }

                        .pagination a:hover:not(.active) {
                            background-color: #ddd;
                            border-radius: 5px;
                                                            }