Back to the list

Pagination

Responsive pagination for your list pages. It can be useful not to load all your articles on the same page when using it in a blog.

File to include

@import "components/pagination";

Left

1 2 3 4 5 ... 20

<div class="pagination" data-justify="left">
    <button disabled>
        <fajny-icon icon-name="chevron-left-solid"></fajny-icon>
    </button>
    
    <a href="#" class="active">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <span class="more">...</span>
    <a href="#">20</a>
    
    <button>
        <fajny-icon icon-name="chevron-right-solid"></fajny-icon>
    </button>
</div>

Center

1 2 3 4 5 ... 20

<div class="pagination" data-justify="center">
    <button disabled>
        <fajny-icon icon-name="chevron-left-solid"></fajny-icon>
    </button>
    
    <a href="#" class="active">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <span class="more">...</span>
    <a href="#">20</a>
    
    <button>
        <fajny-icon icon-name="chevron-right-solid"></fajny-icon>
    </button>
</div>

Right

1 2 3 4 5 ... 20

<div class="pagination" data-justify="right">
    <button disabled>
        <fajny-icon icon-name="chevron-left-solid"></fajny-icon>
    </button>
    
    <a href="#" class="active">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <span class="more">...</span>
    <a href="#">20</a>
    
    <button>
        <fajny-icon icon-name="chevron-right-solid"></fajny-icon>
    </button>
</div>

Attributes

Name	Example value	Possible values	Default	Required
data-justify	center	"left" \| "center" \| "right"	left	No