Pagination: Single truncation 

<nav class="kx-pagination2">
    <ul class="kx-pagination-list kx-flex flex-nowrap">
        <li class="kx-pagination__item kx-item-pre ">

            <a href="#" title="Previous page"><i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#chevron-left"></use>
        </svg>
    </i></a>
        </li>

        <li class="kx-pagination__item kx-item-page ">

            <a href="#" title="1"> 1</a>
        </li>

        <li class="kx-pagination__item kx-item-page ">

            <a href="#" title="2"> 2</a>
        </li>

        <li class="kx-pagination__item kx-item-page kx-pagination-page--active">

            3
        </li>

        <li class="kx-pagination__item kx-item-page ">

            <a href="#" title="4"> 4</a>
        </li>

        <li class="kx-pagination__item kx-item-page ">

            <a href="#" title="5"> 5</a>
        </li>

        <li class="kx-pagination__item  kx-pagination__item--truncated" title="Truncate symmbol">
            <i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#dots-horizontal"></use>
        </svg>
    </i>
        </li>

        <li class="kx-pagination__item kx-item-page ">

            <a href="#" title="23"> 23</a>
        </li>

        <li class="kx-pagination__item kx-item-next ">

            <a href="#" title="Next page"><i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#chevron-right"></use>
        </svg>
    </i></a>
        </li>
    </ul>
</nav>
 
<nav class="kx-pagination2">
    <ul class="kx-pagination-list kx-flex flex-nowrap">
    {%- for page in pages -%}
        {% if page.type == 'prevnext' %}
            <li class="kx-pagination__item {{page.class}} {% if page.active %}kx-pagination__item--disabled{% endif -%}">
            {% if page.disabled %}
                {% render '@icon', { type: 'icon', symbol: page.icon.symbol, size: page.icon.size, classes: ['kx-icon--disabled'] } %}
            {% else %}
                <a href="#" title="{{ page.text}}">{% render '@icon', { type: 'icon', symbol: page.icon.symbol, size: page.icon.size } %}</a>
            {% endif -%}
            </li>
        {% elseif page.type == 'truncated' %}
            <li class="kx-pagination__item {{page.class}} kx-pagination__item--truncated" title="{{page.text}}">
                {% render '@icon', { type: 'icon', symbol: page.icon.symbol, size: page.icon.size } %}
            </li>
        {% else %}
            <li class="kx-pagination__item {{page.class}} {% if page.active %}kx-pagination-page--active{% endif -%}" >
            {% if page.active %}
                {{page.text}}
            {% else %}
                <a href="#" title="{{ page.text}}"> {{page.text}}</a>
            {% endif -%}
            </li>
        {% endif -%}
    {% endfor -%}
    </ul>
</nav>
 
{
  "ariaLabel": "Aria label example",
  "pages": [
    {
      "type": "prevnext",
      "class": "kx-item-pre",
      "icon": {
        "symbol": "chevron-left",
        "size": "base"
      },
      "text": "Previous page"
    },
    {
      "type": "page",
      "class": "kx-item-page",
      "text": "1"
    },
    {
      "type": "page",
      "class": "kx-item-page",
      "text": "2"
    },
    {
      "type": "page",
      "active": true,
      "class": "kx-item-page",
      "text": "3"
    },
    {
      "type": "page",
      "class": "kx-item-page",
      "text": "4"
    },
    {
      "type": "page",
      "class": "kx-item-page",
      "text": "5"
    },
    {
      "type": "truncated",
      "icon": {
        "symbol": "dots-horizontal",
        "size": "base"
      },
      "text": "Truncate symmbol"
    },
    {
      "type": "page",
      "class": "kx-item-page",
      "text": "23"
    },
    {
      "type": "prevnext",
      "class": "kx-item-next",
      "icon": {
        "symbol": "chevron-right",
        "size": "base"
      },
      "text": "Next page"
    }
  ]
}

There are no notes for this item.