<nav class="kx-pagination">
    <div class="kx-btngroup kx-flex kx-flex-wrap" role="group" aria-label="Aria label example">
        <!-- LINK AS BUTTON Component -->
        <a class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-pagination__link kx-is-disabled" tabindex="-1" href="#">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#angle-left"></use>
    </svg>
</i>
        <span class="kx-btn__txt">Previous</span>
    </span>
</a>
        <span class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-is-active">1</span>
        <!-- LINK AS BUTTON Component -->
        <a class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-pagination__link" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">2</span>
    </span>
</a>
        <!-- LINK AS BUTTON Component -->
        <a class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-pagination__link" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">3</span>
    </span>
</a>
        <!-- LINK AS BUTTON Component -->
        <a class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-pagination__link" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Next</span>
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#angle-right"></use>
    </svg>
</i>
    </span>
</a>
    </div>
</nav>
<nav class="kx-pagination">
    <div class="kx-btngroup kx-flex kx-flex-wrap{% if align %} {{ align }}{% endif %}" role="group" aria-label="{{ ariaLabel }}">
    {%- for page in pages -%}
    {% if page.active -%}
        <span class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-is-active">{{ page.item.text }}</span>
    {% else -%}
        {% render '@button', page.item, true %}
    {% endif -%}
    {% endfor -%}
    </div>
</nav>
{
  "ariaLabel": "Aria label example",
  "classes": null,
  "pages": [
    {
      "item": {
        "text": "Previous",
        "skin": "secondary",
        "disabled": true,
        "href": "#",
        "icon": {
          "symbol": "angle-left",
          "size": "base"
        },
        "classes": [
          "kx-pagination__link"
        ]
      }
    },
    {
      "active": true,
      "item": {
        "text": "1",
        "skin": "secondary",
        "href": "#",
        "classes": [
          "kx-pagination__link"
        ]
      }
    },
    {
      "item": {
        "text": "2",
        "skin": "secondary",
        "href": "#",
        "classes": [
          "kx-pagination__link"
        ]
      }
    },
    {
      "item": {
        "text": "3",
        "skin": "secondary",
        "href": "#",
        "classes": [
          "kx-pagination__link"
        ]
      }
    },
    {
      "item": {
        "text": "Next",
        "skin": "secondary",
        "href": "#",
        "icon": {
          "symbol": "angle-right",
          "size": "base"
        },
        "iconAfter": true,
        "classes": [
          "kx-pagination__link"
        ]
      }
    }
  ]
}
  • Content:
    // ==========================================================================
    // Component: pagination
    // ==========================================================================
    
    // Elements (children)
    // ==========================================================================
    
    // Block (parent)
    // ==========================================================================
    .kx-pagination {
        @include pb(mini);
        position: relative;
        overflow: hidden;
    }
    
    // Modifiers
    // ==========================================================================
    
    
  • URL: /components/raw/pagination/_pagination.scss
  • Filesystem Path: src\components\01-pagination\_pagination.scss
  • Size: 579 Bytes

There are no notes for this item.