Net7 design system

Pagination component: Text 

<nav class="n7-pagination" 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>
 
<nav class="n7-pagination{% if classes %} {{ classes }}{% 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>
 
{
  "linkClasses": "rounded",
  "items": [
    {
      "label": 1
    },
    {
      "label": 2,
      "isCurrent": true
    },
    {
      "label": 3
    },
    {
      "label": 4
    }
  ],
  "hasLabels": true
}

No notes defined.