Net7 UI Kit

Pagination component: Text 

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

        <li>
            <a class="n7-pagination__link n7-pagination__link-text py-1 px-2" aria-label="Pagina precedente" href="">Prev</a>
        </li>

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

        <li>
            <a class="n7-pagination__link n7-pagination__link-button n7-pagination__link-text rounded 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" href="#" aria-label="pagina 3">3</a>
        </li>

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

        <li>
            <a class="n7-pagination__link n7-pagination__link-text py-1 px-2" aria-label="Pagina successiva" href="">Next</a>
        </li>

    </ul>
</nav>
 
{% extends "@pagination" %}
{% block classes %}{{  super() }} n7-pagination--text{% endblock classes %}
 
{
  "padding": "p-2",
  "linkClasses": "rounded",
  "items": [
    {
      "label": 1
    },
    {
      "label": 2,
      "isCurrent": true
    },
    {
      "label": 3
    },
    {
      "label": 4
    }
  ],
  "hasLabels": true
}
  • 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