Net7 UI Kit

Pagination component: Rounded 

<nav class="n7-pagination n7-pagination--rounded p-2" role="navigation" aria-label="Paginazione">
    <ul class="flex gap-2">

        <li>
            <a class="n7-pagination__link n7-pagination__link-button rounded-full" href="#" aria-label="Pagina iniziale">
                <svg class="n7-icon inline-block align-middle fill-current w-4 h-5 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--chevron-double-left" />
                </svg>

            </a>
        </li>
        <li>
            <a class="n7-pagination__link n7-pagination__link-button rounded-full" href="#" aria-label="Pagina precedente">
                <svg class="n7-icon inline-block align-middle fill-current w-4 h-5 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--chevron-left" />
                </svg>

            </a>
        </li>

        <li>
            <a class="n7-pagination__link n7-pagination__link-button n7-pagination__link-text rounded-full" href="#" aria-label="pagina 1">1</a>
        </li>

        <li>
            <a class="n7-pagination__link n7-pagination__link-button n7-pagination__link-text rounded-full n7-background-primary n7-border-primary text-white hover:n7-content-01" href="#" aria-label="Pagina corrente, pagina 2" aria-current="true">2</a>
        </li>

        <li>
            <a class="n7-pagination__link n7-pagination__link-button n7-pagination__link-text rounded-full" href="#" aria-label="pagina 3">3</a>
        </li>

        <li>
            <a class="n7-pagination__link n7-pagination__link-button n7-pagination__link-text rounded-full" href="#" aria-label="pagina 4">4</a>
        </li>

        <li>
            <a class="n7-pagination__link n7-pagination__link-button rounded-full" href="#" aria-label="Pagina successiva">
                <svg class="n7-icon inline-block align-middle fill-current w-4 h-5 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--chevron-right" />
                </svg>

            </a>
        </li>
        <li>
            <a class="n7-pagination__link n7-pagination__link-button rounded-full" href="#" aria-label="Pagina finale">
                <svg class="n7-icon inline-block align-middle fill-current w-4 h-5 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--chevron-double-right" />
                </svg>

            </a>
        </li>

    </ul>
</nav>
 
{% extends "@pagination" %}
{% block classes %}{{  super() }} n7-pagination--rounded{% endblock classes %}
 
{
  "padding": "p-2",
  "linkClasses": "rounded-full",
  "items": [
    {
      "label": 1
    },
    {
      "label": 2,
      "isCurrent": true
    },
    {
      "label": 3
    },
    {
      "label": 4
    }
  ]
}
  • Content: 
     /**
 * PAGINATION
 *
*/
@layer components {
    .n7-pagination__link {
        @apply flex items-center justify-center h-7 md:h-8 transition-all;
    }

    .n7-pagination__link-button {
        @apply w-7 md:w-8 border n7-border-gray-01 bg-white hover:n7-background-02;
    }

    .n7-pagination__link-text {
        @apply text-xs md:text-sm font-medium hover:underline;
    }
}
  • URL: /components/raw/pagination/pagination.css
  • Filesystem Path: components/03-molecules/pagination/pagination.css
  • Size: 381 Bytes

Pagination component. Configurations:

  • padding: value - spacing classes
  • classes: value - style classes
  • centered: true - setting for centered pagination
  • hasLabels: true - if pagination with labels instead of arrows icons
  • linkClasses: value - classes for links
  • items
    • isCurrent: true - for current item
    • label: value - item label

Blocks:

  • classes