Alain Afflelou Design System

Page Pagination 

<div class="mt-4 flex gap-4 m-4 justify-center">
    <!-- Chevron Left disabled -->
    <span class="flex items-center justify-center w-10 h-10 bg-black/5 rounded-full">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="black" fill-opacity="0.6" />
        </svg>
    </span>
    <span class="flex items-center justify-center font-semibold text-black/80 px-2 border-b border-black/80">1</span>
    <span class="flex items-center justify-center font-semibold text-black/60">2</span>
    <span class="flex items-center justify-center font-semibold text-black/60">3</span>
    <span class="flex items-center justify-center font-semibold text-black/60">...</span>
    <span class="flex items-center justify-center font-semibold text-black/60">10</span>
    <!-- Chevron Right usable -->
    <span class="flex items-center justify-center w-10 h-10 cursor-pointer
                            bg-black/5 hover:bg-black/10 active:bg-black/20
                            rounded-full">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="black" />
        </svg>
    </span>
</div>
 
<div class="mt-4 flex gap-4 m-4 justify-center">
    <!-- Chevron Left disabled -->
    <span class="flex items-center justify-center w-10 h-10 bg-black/5 rounded-full">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="black" fill-opacity="0.6"/>
                </svg>
            </span>
    <span class="flex items-center justify-center font-semibold text-black/80 px-2 border-b border-black/80">1</span>
    <span class="flex items-center justify-center font-semibold text-black/60">2</span>
    <span class="flex items-center justify-center font-semibold text-black/60">3</span>
    <span class="flex items-center justify-center font-semibold text-black/60">...</span>
    <span class="flex items-center justify-center font-semibold text-black/60">10</span>
    <!-- Chevron Right usable -->
    <span class="flex items-center justify-center w-10 h-10 cursor-pointer
                            bg-black/5 hover:bg-black/10 active:bg-black/20
                            rounded-full"
    >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="black"/>
                </svg>
            </span>
</div>
 
/* No context defined. */

No notes defined.