Default
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
Pre
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
Next
</a>
</div>
Default With Icons
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
<i class="icon-chevron-left"></i>
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
<i class="icon-chevron-right"></i>
</a>
</div>
Default with Active
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
Pre
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-primary text-white hover:bg-primary hover:text-white">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
Next
</a>
</div>
Default with Active Ghost
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
Pre
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-primary hover:border-primary bg-primary-50 text-primary hover:bg-primary-50 hover:text-primary">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
Next
</a>
</div>
Left Align
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
<i class="icon-chevron-left"></i>
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
<i class="icon-chevron-right"></i>
</a>
</div>
Centre Align
<div class="flex justify-center items-center">
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
<i class="icon-chevron-left"></i>
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
<i class="icon-chevron-right"></i>
</a>
</div>
</div>
Right Align
<div class="flex justify-end items-end">
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
<i class="icon-chevron-right"></i>
</a>
</div>
</div>
Custom Pagination
<div class="inline-flex gap-1">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
<i class="icon-chevron-left me-1"></i> Pre
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-border-color bg-primary text-white hover:bg-primary hover:text-white">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
...
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
10
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
Next <i class="icon-chevron-right ms-1"></i>
</a>
</div>
Soft Pagination
<div class="inline-flex gap-1">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
<i class="icon-chevron-left"></i>
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-primary hover:border-primary bg-primary-50 text-primary hover:bg-primary-50 hover:text-primary">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
...
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
10
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
<i class="icon-chevron-right"></i>
</a>
</div>
Pagination 1
<div class="inline-flex gap-1">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-full border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
<i class="icon-chevron-left me-1"></i> Pre
</a>
<a href="#" class="w-7.5 h-7.5 items-center justify-center inline-flex text-xs font-medium rounded-full border border-border-color bg-primary text-white hover:bg-primary hover:text-white">
01
</a>
<a href="#" class="w-7.5 h-7.5 items-center justify-center inline-flex text-xs font-medium rounded-full border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="w-7.5 h-7.5 items-center justify-center inline-flex text-xs font-medium rounded-full border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="w-7.5 h-7.5 items-center justify-center inline-flex text-xs font-medium rounded-full border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
...
</a>
<a href="#" class="w-7.5 h-7.5 items-center justify-center inline-flex text-xs font-medium rounded-full border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
10
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-full border border-border-color bg-light text-dark hover:bg-primary hover:text-white">
Next <i class="icon-chevron-right ms-1"></i>
</a>
</div>
Pagination 2
<div class="inline-flex gap-1">
<a href="#" class="w-7.5 h-7.5 inline-flex items-center justify-center text-xs font-medium rounded-full border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
<i class="icon-chevron-left"></i>
</a>
<a href="#" class="w-7.5 h-7.5 inline-flex items-center justify-center text-xs font-medium rounded-full border border-primary hover:border-primary bg-primary-50 text-primary hover:bg-primary-50 hover:text-primary">
01
</a>
<a href="#" class="w-7.5 h-7.5 inline-flex items-center justify-center text-xs font-medium rounded-full border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
02
</a>
<a href="#" class="w-7.5 h-7.5 inline-flex items-center justify-center text-xs font-medium rounded-full border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
03
</a>
<a href="#" class="w-7.5 h-7.5 inline-flex items-center justify-center text-xs font-medium rounded-full border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
...
</a>
<a href="#" class="w-7.5 h-7.5 inline-flex items-center justify-center text-xs font-medium rounded-full border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
10
</a>
<a href="#" class="w-7.5 h-7.5 inline-flex items-center justify-center text-xs font-medium rounded-full border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
<i class="icon-chevron-right"></i>
</a>
</div>
Pagination 3
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color hover:border-b-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
Pre
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color border-b-primary hover:border-b-primary bg-primary-50 text-primary hover:bg-primary-50 hover:text-primary">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color hover:border-b-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color hover:border-b-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color hover:border-b-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
Next
</a>
</div>
Pagination 4
<div class="inline-flex gap-1">
<div>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-full border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
<i class="icon-chevrons-left"></i>
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-full border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
<i class="icon-chevron-left"></i>
</a>
</div>
<div class="flex">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-full last:rounded-e-full rounded-none border border-e-0 border-border-color bg-light text-dark hover:text-primary">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-full last:rounded-e-full rounded-none border border-e-0 border-s-0 border-border-color bg-light text-primary hover:text-primary">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-full last:rounded-e-full rounded-none border border-e-0 border-s-0 border-border-color bg-light text-dark hover:text-primary">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-full last:rounded-e-full rounded-none border border-s-0 border-border-color bg-light text-dark hover:text-primary">
04
</a>
</div>
<div>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-full border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
<i class="icon-chevron-right"></i>
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-full border border-border-color hover:border-primary bg-light text-dark hover:bg-primary-50 hover:text-primary">
<i class="icon-chevrons-right"></i>
</a>
</div>
</div>
'/%3e%3cpath%20d='M34.2633%20108V93.5H56.071C62.3018%2093.5%2067.574%2092.2514%2071.8876%2089.7542C76.2811%2087.1764%2079.5962%2083.6722%2081.8328%2079.2417C84.1494%2074.8111%2085.3077%2069.7361%2085.3077%2064.0167C85.3077%2058.3778%2084.1894%2053.4236%2081.9527%2049.1542C79.716%2044.8847%2076.4009%2041.5417%2072.0074%2039.125C67.6938%2036.7083%2062.3817%2035.5%2056.071%2035.5H34.6228V21H56.071C65.7367%2021%2074.1642%2022.7722%2081.3535%2026.3167C88.5429%2029.7806%2094.0947%2034.775%2098.0089%2041.3C102.003%2047.7444%20104%2055.3972%20104%2064.2583C104%2073.1194%20102.003%2080.8528%2098.0089%2087.4583C94.0148%2093.9833%2088.4231%2099.0583%2081.2337%20102.683C74.1243%20106.228%2065.7766%20108%2056.1908%20108H34.2633ZM23%20108V21H41.4527V108H23Z'%20fill='white'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_12764_21'%20x1='64'%20y1='0'%20x2='64'%20y2='128'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%230069D9'/%3e%3cstop%20offset='1'%20stop-color='%23FCB561'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
