OffHealth component library

Pagination component 

<nav class="n7-pagination py-6 px-3" role="navigation" aria-label="Paginazione">
    <!-- RP 240326 List page - Changed classes -->
    <ul class="flex gap-2 justify-center">
        <li>
            <a class="n7-pagination__link n7-pagination__link-button rounded-full" href="#" aria-label="Pagina iniziale">
                <svg class="inline-block align-middle fill-current w-4 h-5 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
                    <use xlink: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="inline-block align-middle fill-current w-4 h-5 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
                    <use xlink: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="inline-block align-middle fill-current w-4 h-5 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
                    <use xlink: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="inline-block align-middle fill-current w-4 h-5 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
                    <use xlink:href="../../icons.svg#mini--chevron-double-right" />
                </svg>

            </a>
        </li>
    </ul>
</nav>
 
<nav class="n7-pagination py-6 px-3{% if classes %} {{ classes }}{% endif %}" role="navigation" aria-label="Paginazione">
<!-- RP 240326 List page - Changed classes -->
    <ul class="flex gap-2 justify-center">
        <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>
        {% 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 %}
        <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>
    </ul>
</nav>
 
{
  "linkClasses": "rounded-full",
  "items": [
    {
      "label": 1
    },
    {
      "label": 2,
      "isCurrent": true
    },
    {
      "label": 3
    },
    {
      "label": 4
    }
  ]
}

No notes defined.