Net7 UI Kit

Pagination component 

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

        <li>
            <a class="n7-pagination__link n7-pagination__link-button rounded" 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" 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" 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-button rounded" 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" 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>
 
<nav class="n7-pagination{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock %}{% if padding %} {{ padding }}{% endif %}{% if centered %} n7-flex n7-justify-center{% endif %}" role="navigation" aria-label="Paginazione">
    <ul class="flex gap-2">
        {% if hasLabels %}
            <li>
                <a class="n7-pagination__link n7-pagination__link-text py-1 px-2" aria-label="Pagina precedente" href="">Prev</a>
            </li>
        {% else %}
            <li>
                <a class="n7-pagination__link n7-pagination__link-button{% if linkClasses %} {{ linkClasses }}{%- endif -%}" href="#" aria-label="Pagina iniziale">
                    {% render '@icon', { id: 'mini--chevron-double-left', size:'w-4 h-5 md:w-5 md:h-5'}, true %}
                </a>
            </li>
            <li>
                <a class="n7-pagination__link n7-pagination__link-button{% if linkClasses %} {{ linkClasses }}{%- endif -%}" href="#" aria-label="Pagina precedente">
                    {% render '@icon', { id: 'mini--chevron-left', size:'w-4 h-5 md:w-5 md:h-5'}, true %}
                </a>
            </li>
        {% endif %}
        {% for item in items %}
            <li>
                <a class="n7-pagination__link n7-pagination__link-button n7-pagination__link-text{% if linkClasses %} {{ linkClasses }}{%- endif -%}{% if item.isCurrent %} n7-background-primary n7-border-primary text-white hover:n7-content-01{% endif %}" href="#" aria-label="{% if item.isCurrent %}Pagina corrente, {% endif %}pagina {{ item.label }}"{% if item.isCurrent %} aria-current="true"{% endif %}>{{ item.label }}</a>
            </li>
        {% endfor %}
        {% if hasLabels %}
            <li>
                <a class="n7-pagination__link n7-pagination__link-text py-1 px-2" aria-label="Pagina successiva" href="">Next</a>
            </li>
        {% else %}
            <li>
                <a class="n7-pagination__link n7-pagination__link-button{% if linkClasses %} {{ linkClasses }}{%- endif -%}" href="#" aria-label="Pagina successiva">
                    {% render '@icon', { id: 'mini--chevron-right', size:'w-4 h-5 md:w-5 md:h-5'}, true %}
                </a>
            </li>
            <li>
                <a class="n7-pagination__link n7-pagination__link-button{% if linkClasses %} {{ linkClasses }}{%- endif -%}" href="#" aria-label="Pagina finale">
                    {% render '@icon', { id: 'mini--chevron-double-right', size:'w-4 h-5 md:w-5 md:h-5'}, true %}
                </a>
            </li>
            
        {% endif %}
    </ul>
</nav>
 
{
  "padding": "p-2",
  "linkClasses": "rounded",
  "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