Copy environment

Pagination 

    <nav class="pagination  " aria-label="Pagination">
        <ul class="pagination__list">
            <li class="pagination__item pagination__item--prev">
                <a aria-disabled="true" class="pagination__link">
                    <svg class="icon  pagination__list--icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-left"></use>
                    </svg>

                    <span class="pagination__label">Previous</span>
                </a>
            </li>

            <li class="pagination__item pagination__item--current">
                <a aria-current="page" class="pagination__link">
                    <span class="pagination__label">1</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">2</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">3</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">4</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">5</span>
                </a>
            </li>

            <li class="pagination__item">
                <span class="pagination__span">···</span>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">12</span>
                </a>
            </li>

            <li class="pagination__item pagination__item--next">
                <a href="#" class="pagination__link">
                    <svg class="icon  pagination__list--icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-right"></use>
                    </svg>

                    <span class="pagination__label">Next</span>
                </a>
            </li>

        </ul>
    </nav>
 
{% macro li(item, class, iconName) %}
    {% set noLinkAria -%}
        {% if 'pagination__item--current' in class %}
            aria-current="page"
        {% else %}
            aria-disabled="true"
        {% endif %}
    {% endset %}
    <li class="pagination__item {{ class }}">
        <a{% if item.url %} href="{{ item.url }}"{% else %} {{ noLinkAria }}{% endif %} class="pagination__link">
            {% if iconName %}
                {{ iconName }}
            {% endif %}
            <span class="pagination__label">{{ item.text }}</span>
        </a>
    </li>
{% endmacro %}
{% macro separator() %}
    <li class="pagination__item">
        <span class="pagination__span">···</span>
    </li>
{% endmacro %}
{% import _self as ul %}
{% if data.pages > 1 %}
    <nav class="pagination {{ modifier }} {{ class }}" aria-label="{{ data.label }}">
        <ul class="pagination__list">
            {% if data.previous %}
                {% set icon %}
                    {% include '@icon' with { name: 'chevron-left', modifier: '', class: 'pagination__list--icon' } %}
                {% endset %}
                {{ ul.li(data.previous, 'pagination__item--prev', icon) }}
            {% endif %}
            {% if data.page > 1 %}
                {% if data.extraPagesLimit %}
                    {% for i in range(1, data.extraPagesLimit) if ( i < data.page - data.nearbyPagesLimit ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
                {% if data.nearbyPagesLimit %}
                    {% if data.extraPagesLimit + 1 < data.page - data.nearbyPagesLimit %}
                        {{ ul.separator() }}
                    {% endif %}
                    {% for i in range(data.page - data.nearbyPagesLimit, data.page - 1) if ( i > 0 ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
            {% endif %}
            {{ ul.li(data.current, 'pagination__item--current') }}
            {% if data.page < data.pages %}
                {% if data.nearbyPagesLimit %}
                    {% for i in range(data.page + 1, data.page + data.nearbyPagesLimit) if ( i <= data.pages ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                    {% if  (data.pages - data.extraPagesLimit) > (data.page + data.nearbyPagesLimit) %}
                        {{ ul.separator() }}
                    {% endif %}
                    {% if data.last and data.pages - data.page > data.nearbyPagesLimit %}
                        {{ ul.li(data.items[data.last]) }}
                    {% endif %}
                {% endif %}
                {% if data.extraPagesLimit %}
                    {% for i in range(data.pages - data.extraPagesLimit + 1, data.pages) if ( i > data.page + data.nearbyPagesLimit ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
            {% endif %}
            {% if data.next %}
                {% set icon %}
                    {% include '@icon' with { name: 'chevron-right', modifier: '', class: 'pagination__list--icon' } %}
                {% endset %}
                {{ ul.li(data.next, 'pagination__item--next', icon) }}
            {% endif %}
        </ul>
    </nav>
{% endif %}

{
  "language": "en-US",
  "data": {
    "label": "Pagination",
    "next": {
      "text": "Next",
      "url": "#"
    },
    "previous": {
      "text": "Previous",
      "url": false
    },
    "current": {
      "text": "1",
      "url": false
    },
    "page": 1,
    "pages": 12,
    "last": 12,
    "nearbyPagesLimit": 4,
    "extraPagesLimit": 0,
    "items": {
      "1": {
        "text": "1",
        "url": "#"
      },
      "2": {
        "text": "2",
        "url": "#"
      },
      "3": {
        "text": "3",
        "url": "#"
      },
      "4": {
        "text": "4",
        "url": "#"
      },
      "5": {
        "text": "5",
        "url": "#"
      },
      "6": {
        "text": "6",
        "url": "#"
      },
      "7": {
        "text": "7",
        "url": "#"
      },
      "8": {
        "text": "8",
        "url": "#"
      },
      "9": {
        "text": "9",
        "url": "#"
      },
      "10": {
        "text": "10",
        "url": "#"
      },
      "11": {
        "text": "11",
        "url": "#"
      },
      "12": {
        "text": "12",
        "url": "#"
      }
    }
  }
}
  • Content: 
    .pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0 0 -8px 0;
    list-style: none;

    .pagination--align-end & {
        justify-content: flex-end;
    }
}

.pagination__list--icon {
    color: $L-text-black;
    border-radius: 2px;
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pagination__item {
    width: 32px;
    height: 32px;
    margin: 0 4px 8px;
    text-align: center;
    font-size: $font-size-small;
    line-height: 30px;

    /*
    Hide extra pagination items on mobile by default
    and make only current page and navigation items always visible
    */

    display: none;

    @include bp(sm-min) {
        display: block;
    }
}

.pagination__span {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: $border-radius-small;
    background-color: $L-background-disabled;
    font-size: 24px;
    color: $L-text-disabled;
}

.pagination__item--current {
    display: block;
}

.pagination__item--prev,
.pagination__item--next {
    font-size: 24px;
    line-height: $line-height-base;
    display: block;
    color: $L-text-black;
}

.pagination__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;
    border-radius: $border-radius-small;
    color: $L-text-black;
    background-color: $L-background-disabled;
    text-decoration: none;

    // Make it visually clickable only if it has href:

    &[href] {
        border: 1px solid $L-border;
        background-color: $L-background;
        color: $L-text;
    }

    .pagination__item--current &,
    &[href]:hover {
        color: $L-text-hover;
        background: $L-background-hover;
    }

    &[href]:active {
        border-color: transparent;
        color: $L-text-active;
        background: $L-background-active;
    }

    .pagination__item--current & {
        border-color: $L-border-strong;
        background-color: $L-background-strong;
        color: $L-text-weak;
    }
}

.pagination__label {
    .pagination__item--prev &,
    .pagination__item--next & {
        @include visually-hidden;
    }
}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: src/patterns/components/pagination/pagination.scss
  • Size: 2.2 KB
  • Handle: @pagination--default
  • Filesystem Path: src/patterns/components/pagination/pagination.twig
  • References (1): @icon
  • Referenced by (1): @view-bills

Middle Active 

    <nav class="pagination  " aria-label="Pagination">
        <ul class="pagination__list">
            <li class="pagination__item pagination__item--prev">
                <a href="#" class="pagination__link">
                    <svg class="icon  pagination__list--icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-left"></use>
                    </svg>

                    <span class="pagination__label">Previous</span>
                </a>
            </li>

            <li class="pagination__item">
                <span class="pagination__span">···</span>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">4</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">5</span>
                </a>
            </li>

            <li class="pagination__item pagination__item--current">
                <a aria-current="page" class="pagination__link">
                    <span class="pagination__label">6</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">7</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">8</span>
                </a>
            </li>

            <li class="pagination__item">
                <span class="pagination__span">···</span>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">12</span>
                </a>
            </li>

            <li class="pagination__item pagination__item--next">
                <a href="#" class="pagination__link">
                    <svg class="icon  pagination__list--icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-right"></use>
                    </svg>

                    <span class="pagination__label">Next</span>
                </a>
            </li>

        </ul>
    </nav>
 
{% macro li(item, class, iconName) %}
    {% set noLinkAria -%}
        {% if 'pagination__item--current' in class %}
            aria-current="page"
        {% else %}
            aria-disabled="true"
        {% endif %}
    {% endset %}
    <li class="pagination__item {{ class }}">
        <a{% if item.url %} href="{{ item.url }}"{% else %} {{ noLinkAria }}{% endif %} class="pagination__link">
            {% if iconName %}
                {{ iconName }}
            {% endif %}
            <span class="pagination__label">{{ item.text }}</span>
        </a>
    </li>
{% endmacro %}
{% macro separator() %}
    <li class="pagination__item">
        <span class="pagination__span">···</span>
    </li>
{% endmacro %}
{% import _self as ul %}
{% if data.pages > 1 %}
    <nav class="pagination {{ modifier }} {{ class }}" aria-label="{{ data.label }}">
        <ul class="pagination__list">
            {% if data.previous %}
                {% set icon %}
                    {% include '@icon' with { name: 'chevron-left', modifier: '', class: 'pagination__list--icon' } %}
                {% endset %}
                {{ ul.li(data.previous, 'pagination__item--prev', icon) }}
            {% endif %}
            {% if data.page > 1 %}
                {% if data.extraPagesLimit %}
                    {% for i in range(1, data.extraPagesLimit) if ( i < data.page - data.nearbyPagesLimit ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
                {% if data.nearbyPagesLimit %}
                    {% if data.extraPagesLimit + 1 < data.page - data.nearbyPagesLimit %}
                        {{ ul.separator() }}
                    {% endif %}
                    {% for i in range(data.page - data.nearbyPagesLimit, data.page - 1) if ( i > 0 ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
            {% endif %}
            {{ ul.li(data.current, 'pagination__item--current') }}
            {% if data.page < data.pages %}
                {% if data.nearbyPagesLimit %}
                    {% for i in range(data.page + 1, data.page + data.nearbyPagesLimit) if ( i <= data.pages ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                    {% if  (data.pages - data.extraPagesLimit) > (data.page + data.nearbyPagesLimit) %}
                        {{ ul.separator() }}
                    {% endif %}
                    {% if data.last and data.pages - data.page > data.nearbyPagesLimit %}
                        {{ ul.li(data.items[data.last]) }}
                    {% endif %}
                {% endif %}
                {% if data.extraPagesLimit %}
                    {% for i in range(data.pages - data.extraPagesLimit + 1, data.pages) if ( i > data.page + data.nearbyPagesLimit ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
            {% endif %}
            {% if data.next %}
                {% set icon %}
                    {% include '@icon' with { name: 'chevron-right', modifier: '', class: 'pagination__list--icon' } %}
                {% endset %}
                {{ ul.li(data.next, 'pagination__item--next', icon) }}
            {% endif %}
        </ul>
    </nav>
{% endif %}

{
  "language": "en-US",
  "data": {
    "label": "Pagination",
    "next": {
      "text": "Next",
      "url": "#"
    },
    "previous": {
      "text": "Previous",
      "url": "#"
    },
    "current": {
      "text": "6",
      "url": false
    },
    "page": 6,
    "pages": 12,
    "last": 12,
    "nearbyPagesLimit": 2,
    "extraPagesLimit": 0,
    "items": {
      "1": {
        "text": "1",
        "url": "#"
      },
      "2": {
        "text": "2",
        "url": "#"
      },
      "3": {
        "text": "3",
        "url": "#"
      },
      "4": {
        "text": "4",
        "url": "#"
      },
      "5": {
        "text": "5",
        "url": "#"
      },
      "6": {
        "text": "6",
        "url": "#"
      },
      "7": {
        "text": "7",
        "url": "#"
      },
      "8": {
        "text": "8",
        "url": "#"
      },
      "9": {
        "text": "9",
        "url": "#"
      },
      "10": {
        "text": "10",
        "url": "#"
      },
      "11": {
        "text": "11",
        "url": "#"
      },
      "12": {
        "text": "12",
        "url": "#"
      }
    }
  }
}
  • Content: 
    .pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0 0 -8px 0;
    list-style: none;

    .pagination--align-end & {
        justify-content: flex-end;
    }
}

.pagination__list--icon {
    color: $L-text-black;
    border-radius: 2px;
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pagination__item {
    width: 32px;
    height: 32px;
    margin: 0 4px 8px;
    text-align: center;
    font-size: $font-size-small;
    line-height: 30px;

    /*
    Hide extra pagination items on mobile by default
    and make only current page and navigation items always visible
    */

    display: none;

    @include bp(sm-min) {
        display: block;
    }
}

.pagination__span {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: $border-radius-small;
    background-color: $L-background-disabled;
    font-size: 24px;
    color: $L-text-disabled;
}

.pagination__item--current {
    display: block;
}

.pagination__item--prev,
.pagination__item--next {
    font-size: 24px;
    line-height: $line-height-base;
    display: block;
    color: $L-text-black;
}

.pagination__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;
    border-radius: $border-radius-small;
    color: $L-text-black;
    background-color: $L-background-disabled;
    text-decoration: none;

    // Make it visually clickable only if it has href:

    &[href] {
        border: 1px solid $L-border;
        background-color: $L-background;
        color: $L-text;
    }

    .pagination__item--current &,
    &[href]:hover {
        color: $L-text-hover;
        background: $L-background-hover;
    }

    &[href]:active {
        border-color: transparent;
        color: $L-text-active;
        background: $L-background-active;
    }

    .pagination__item--current & {
        border-color: $L-border-strong;
        background-color: $L-background-strong;
        color: $L-text-weak;
    }
}

.pagination__label {
    .pagination__item--prev &,
    .pagination__item--next & {
        @include visually-hidden;
    }
}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: src/patterns/components/pagination/pagination.scss
  • Size: 2.2 KB
  • Handle: @pagination--middle-active
  • Filesystem Path: src/patterns/components/pagination/pagination.twig
  • References (1): @icon

Last Active 

    <nav class="pagination  " aria-label="Pagination">
        <ul class="pagination__list">
            <li class="pagination__item pagination__item--prev">
                <a href="#" class="pagination__link">
                    <svg class="icon  pagination__list--icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-left"></use>
                    </svg>

                    <span class="pagination__label">Previous</span>
                </a>
            </li>

            <li class="pagination__item">
                <span class="pagination__span">···</span>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">10</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">11</span>
                </a>
            </li>

            <li class="pagination__item pagination__item--current">
                <a aria-current="page" class="pagination__link">
                    <span class="pagination__label">12</span>
                </a>
            </li>

            <li class="pagination__item pagination__item--next">
                <a aria-disabled="true" class="pagination__link">
                    <svg class="icon  pagination__list--icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-right"></use>
                    </svg>

                    <span class="pagination__label">Next</span>
                </a>
            </li>

        </ul>
    </nav>
 
{% macro li(item, class, iconName) %}
    {% set noLinkAria -%}
        {% if 'pagination__item--current' in class %}
            aria-current="page"
        {% else %}
            aria-disabled="true"
        {% endif %}
    {% endset %}
    <li class="pagination__item {{ class }}">
        <a{% if item.url %} href="{{ item.url }}"{% else %} {{ noLinkAria }}{% endif %} class="pagination__link">
            {% if iconName %}
                {{ iconName }}
            {% endif %}
            <span class="pagination__label">{{ item.text }}</span>
        </a>
    </li>
{% endmacro %}
{% macro separator() %}
    <li class="pagination__item">
        <span class="pagination__span">···</span>
    </li>
{% endmacro %}
{% import _self as ul %}
{% if data.pages > 1 %}
    <nav class="pagination {{ modifier }} {{ class }}" aria-label="{{ data.label }}">
        <ul class="pagination__list">
            {% if data.previous %}
                {% set icon %}
                    {% include '@icon' with { name: 'chevron-left', modifier: '', class: 'pagination__list--icon' } %}
                {% endset %}
                {{ ul.li(data.previous, 'pagination__item--prev', icon) }}
            {% endif %}
            {% if data.page > 1 %}
                {% if data.extraPagesLimit %}
                    {% for i in range(1, data.extraPagesLimit) if ( i < data.page - data.nearbyPagesLimit ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
                {% if data.nearbyPagesLimit %}
                    {% if data.extraPagesLimit + 1 < data.page - data.nearbyPagesLimit %}
                        {{ ul.separator() }}
                    {% endif %}
                    {% for i in range(data.page - data.nearbyPagesLimit, data.page - 1) if ( i > 0 ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
            {% endif %}
            {{ ul.li(data.current, 'pagination__item--current') }}
            {% if data.page < data.pages %}
                {% if data.nearbyPagesLimit %}
                    {% for i in range(data.page + 1, data.page + data.nearbyPagesLimit) if ( i <= data.pages ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                    {% if  (data.pages - data.extraPagesLimit) > (data.page + data.nearbyPagesLimit) %}
                        {{ ul.separator() }}
                    {% endif %}
                    {% if data.last and data.pages - data.page > data.nearbyPagesLimit %}
                        {{ ul.li(data.items[data.last]) }}
                    {% endif %}
                {% endif %}
                {% if data.extraPagesLimit %}
                    {% for i in range(data.pages - data.extraPagesLimit + 1, data.pages) if ( i > data.page + data.nearbyPagesLimit ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
            {% endif %}
            {% if data.next %}
                {% set icon %}
                    {% include '@icon' with { name: 'chevron-right', modifier: '', class: 'pagination__list--icon' } %}
                {% endset %}
                {{ ul.li(data.next, 'pagination__item--next', icon) }}
            {% endif %}
        </ul>
    </nav>
{% endif %}

{
  "language": "en-US",
  "data": {
    "label": "Pagination",
    "next": {
      "text": "Next",
      "url": false
    },
    "previous": {
      "text": "Previous",
      "url": "#"
    },
    "current": {
      "text": "12",
      "url": false
    },
    "page": 12,
    "pages": 12,
    "last": 12,
    "nearbyPagesLimit": 2,
    "extraPagesLimit": 0,
    "items": {
      "1": {
        "text": "1",
        "url": "#"
      },
      "2": {
        "text": "2",
        "url": "#"
      },
      "3": {
        "text": "3",
        "url": "#"
      },
      "4": {
        "text": "4",
        "url": "#"
      },
      "5": {
        "text": "5",
        "url": "#"
      },
      "6": {
        "text": "6",
        "url": "#"
      },
      "7": {
        "text": "7",
        "url": "#"
      },
      "8": {
        "text": "8",
        "url": "#"
      },
      "9": {
        "text": "9",
        "url": "#"
      },
      "10": {
        "text": "10",
        "url": "#"
      },
      "11": {
        "text": "11",
        "url": "#"
      },
      "12": {
        "text": "12",
        "url": "#"
      }
    }
  }
}
  • Content: 
    .pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0 0 -8px 0;
    list-style: none;

    .pagination--align-end & {
        justify-content: flex-end;
    }
}

.pagination__list--icon {
    color: $L-text-black;
    border-radius: 2px;
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pagination__item {
    width: 32px;
    height: 32px;
    margin: 0 4px 8px;
    text-align: center;
    font-size: $font-size-small;
    line-height: 30px;

    /*
    Hide extra pagination items on mobile by default
    and make only current page and navigation items always visible
    */

    display: none;

    @include bp(sm-min) {
        display: block;
    }
}

.pagination__span {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: $border-radius-small;
    background-color: $L-background-disabled;
    font-size: 24px;
    color: $L-text-disabled;
}

.pagination__item--current {
    display: block;
}

.pagination__item--prev,
.pagination__item--next {
    font-size: 24px;
    line-height: $line-height-base;
    display: block;
    color: $L-text-black;
}

.pagination__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;
    border-radius: $border-radius-small;
    color: $L-text-black;
    background-color: $L-background-disabled;
    text-decoration: none;

    // Make it visually clickable only if it has href:

    &[href] {
        border: 1px solid $L-border;
        background-color: $L-background;
        color: $L-text;
    }

    .pagination__item--current &,
    &[href]:hover {
        color: $L-text-hover;
        background: $L-background-hover;
    }

    &[href]:active {
        border-color: transparent;
        color: $L-text-active;
        background: $L-background-active;
    }

    .pagination__item--current & {
        border-color: $L-border-strong;
        background-color: $L-background-strong;
        color: $L-text-weak;
    }
}

.pagination__label {
    .pagination__item--prev &,
    .pagination__item--next & {
        @include visually-hidden;
    }
}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: src/patterns/components/pagination/pagination.scss
  • Size: 2.2 KB
  • Handle: @pagination--last-active
  • Filesystem Path: src/patterns/components/pagination/pagination.twig
  • References (1): @icon

Few Pages 

    <nav class="pagination  " aria-label="Pagination">
        <ul class="pagination__list">
            <li class="pagination__item pagination__item--prev">
                <a aria-disabled="true" class="pagination__link">
                    <svg class="icon  pagination__list--icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-left"></use>
                    </svg>

                    <span class="pagination__label">Previous</span>
                </a>
            </li>

            <li class="pagination__item pagination__item--current">
                <a aria-current="page" class="pagination__link">
                    <span class="pagination__label">1</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">2</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">3</span>
                </a>
            </li>

            <li class="pagination__item pagination__item--next">
                <a href="#" class="pagination__link">
                    <svg class="icon  pagination__list--icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-right"></use>
                    </svg>

                    <span class="pagination__label">Next</span>
                </a>
            </li>

        </ul>
    </nav>
 
{% macro li(item, class, iconName) %}
    {% set noLinkAria -%}
        {% if 'pagination__item--current' in class %}
            aria-current="page"
        {% else %}
            aria-disabled="true"
        {% endif %}
    {% endset %}
    <li class="pagination__item {{ class }}">
        <a{% if item.url %} href="{{ item.url }}"{% else %} {{ noLinkAria }}{% endif %} class="pagination__link">
            {% if iconName %}
                {{ iconName }}
            {% endif %}
            <span class="pagination__label">{{ item.text }}</span>
        </a>
    </li>
{% endmacro %}
{% macro separator() %}
    <li class="pagination__item">
        <span class="pagination__span">···</span>
    </li>
{% endmacro %}
{% import _self as ul %}
{% if data.pages > 1 %}
    <nav class="pagination {{ modifier }} {{ class }}" aria-label="{{ data.label }}">
        <ul class="pagination__list">
            {% if data.previous %}
                {% set icon %}
                    {% include '@icon' with { name: 'chevron-left', modifier: '', class: 'pagination__list--icon' } %}
                {% endset %}
                {{ ul.li(data.previous, 'pagination__item--prev', icon) }}
            {% endif %}
            {% if data.page > 1 %}
                {% if data.extraPagesLimit %}
                    {% for i in range(1, data.extraPagesLimit) if ( i < data.page - data.nearbyPagesLimit ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
                {% if data.nearbyPagesLimit %}
                    {% if data.extraPagesLimit + 1 < data.page - data.nearbyPagesLimit %}
                        {{ ul.separator() }}
                    {% endif %}
                    {% for i in range(data.page - data.nearbyPagesLimit, data.page - 1) if ( i > 0 ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
            {% endif %}
            {{ ul.li(data.current, 'pagination__item--current') }}
            {% if data.page < data.pages %}
                {% if data.nearbyPagesLimit %}
                    {% for i in range(data.page + 1, data.page + data.nearbyPagesLimit) if ( i <= data.pages ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                    {% if  (data.pages - data.extraPagesLimit) > (data.page + data.nearbyPagesLimit) %}
                        {{ ul.separator() }}
                    {% endif %}
                    {% if data.last and data.pages - data.page > data.nearbyPagesLimit %}
                        {{ ul.li(data.items[data.last]) }}
                    {% endif %}
                {% endif %}
                {% if data.extraPagesLimit %}
                    {% for i in range(data.pages - data.extraPagesLimit + 1, data.pages) if ( i > data.page + data.nearbyPagesLimit ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
            {% endif %}
            {% if data.next %}
                {% set icon %}
                    {% include '@icon' with { name: 'chevron-right', modifier: '', class: 'pagination__list--icon' } %}
                {% endset %}
                {{ ul.li(data.next, 'pagination__item--next', icon) }}
            {% endif %}
        </ul>
    </nav>
{% endif %}

{
  "language": "en-US",
  "data": {
    "label": "Pagination",
    "next": {
      "text": "Next",
      "url": "#"
    },
    "previous": {
      "text": "Previous",
      "url": false
    },
    "current": {
      "text": "1",
      "url": false
    },
    "page": 1,
    "pages": 3,
    "last": 12,
    "nearbyPagesLimit": 2,
    "extraPagesLimit": 0,
    "items": {
      "1": {
        "text": "1",
        "url": "#"
      },
      "2": {
        "text": "2",
        "url": "#"
      },
      "3": {
        "text": "3",
        "url": "#"
      },
      "4": {
        "text": "4",
        "url": "#"
      },
      "5": {
        "text": "5",
        "url": "#"
      },
      "6": {
        "text": "6",
        "url": "#"
      },
      "7": {
        "text": "7",
        "url": "#"
      },
      "8": {
        "text": "8",
        "url": "#"
      },
      "9": {
        "text": "9",
        "url": "#"
      },
      "10": {
        "text": "10",
        "url": "#"
      },
      "11": {
        "text": "11",
        "url": "#"
      },
      "12": {
        "text": "12",
        "url": "#"
      }
    }
  }
}
  • Content: 
    .pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0 0 -8px 0;
    list-style: none;

    .pagination--align-end & {
        justify-content: flex-end;
    }
}

.pagination__list--icon {
    color: $L-text-black;
    border-radius: 2px;
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pagination__item {
    width: 32px;
    height: 32px;
    margin: 0 4px 8px;
    text-align: center;
    font-size: $font-size-small;
    line-height: 30px;

    /*
    Hide extra pagination items on mobile by default
    and make only current page and navigation items always visible
    */

    display: none;

    @include bp(sm-min) {
        display: block;
    }
}

.pagination__span {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: $border-radius-small;
    background-color: $L-background-disabled;
    font-size: 24px;
    color: $L-text-disabled;
}

.pagination__item--current {
    display: block;
}

.pagination__item--prev,
.pagination__item--next {
    font-size: 24px;
    line-height: $line-height-base;
    display: block;
    color: $L-text-black;
}

.pagination__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;
    border-radius: $border-radius-small;
    color: $L-text-black;
    background-color: $L-background-disabled;
    text-decoration: none;

    // Make it visually clickable only if it has href:

    &[href] {
        border: 1px solid $L-border;
        background-color: $L-background;
        color: $L-text;
    }

    .pagination__item--current &,
    &[href]:hover {
        color: $L-text-hover;
        background: $L-background-hover;
    }

    &[href]:active {
        border-color: transparent;
        color: $L-text-active;
        background: $L-background-active;
    }

    .pagination__item--current & {
        border-color: $L-border-strong;
        background-color: $L-background-strong;
        color: $L-text-weak;
    }
}

.pagination__label {
    .pagination__item--prev &,
    .pagination__item--next & {
        @include visually-hidden;
    }
}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: src/patterns/components/pagination/pagination.scss
  • Size: 2.2 KB
  • Handle: @pagination--few-pages
  • Filesystem Path: src/patterns/components/pagination/pagination.twig
  • References (1): @icon

Mobile Example

This is how it looks on mobile - no extra pagination page number visible

    <nav class="pagination  " aria-label="Pagination">
        <ul class="pagination__list">
            <li class="pagination__item pagination__item--prev">
                <a aria-disabled="true" class="pagination__link">
                    <svg class="icon  pagination__list--icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-left"></use>
                    </svg>

                    <span class="pagination__label">Previous</span>
                </a>
            </li>

            <li class="pagination__item pagination__item--current">
                <a aria-current="page" class="pagination__link">
                    <span class="pagination__label">1</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">2</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">3</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">4</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">5</span>
                </a>
            </li>

            <li class="pagination__item">
                <span class="pagination__span">···</span>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">12</span>
                </a>
            </li>

            <li class="pagination__item pagination__item--next">
                <a href="#" class="pagination__link">
                    <svg class="icon  pagination__list--icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-right"></use>
                    </svg>

                    <span class="pagination__label">Next</span>
                </a>
            </li>

        </ul>
    </nav>
 
{% macro li(item, class, iconName) %}
    {% set noLinkAria -%}
        {% if 'pagination__item--current' in class %}
            aria-current="page"
        {% else %}
            aria-disabled="true"
        {% endif %}
    {% endset %}
    <li class="pagination__item {{ class }}">
        <a{% if item.url %} href="{{ item.url }}"{% else %} {{ noLinkAria }}{% endif %} class="pagination__link">
            {% if iconName %}
                {{ iconName }}
            {% endif %}
            <span class="pagination__label">{{ item.text }}</span>
        </a>
    </li>
{% endmacro %}
{% macro separator() %}
    <li class="pagination__item">
        <span class="pagination__span">···</span>
    </li>
{% endmacro %}
{% import _self as ul %}
{% if data.pages > 1 %}
    <nav class="pagination {{ modifier }} {{ class }}" aria-label="{{ data.label }}">
        <ul class="pagination__list">
            {% if data.previous %}
                {% set icon %}
                    {% include '@icon' with { name: 'chevron-left', modifier: '', class: 'pagination__list--icon' } %}
                {% endset %}
                {{ ul.li(data.previous, 'pagination__item--prev', icon) }}
            {% endif %}
            {% if data.page > 1 %}
                {% if data.extraPagesLimit %}
                    {% for i in range(1, data.extraPagesLimit) if ( i < data.page - data.nearbyPagesLimit ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
                {% if data.nearbyPagesLimit %}
                    {% if data.extraPagesLimit + 1 < data.page - data.nearbyPagesLimit %}
                        {{ ul.separator() }}
                    {% endif %}
                    {% for i in range(data.page - data.nearbyPagesLimit, data.page - 1) if ( i > 0 ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
            {% endif %}
            {{ ul.li(data.current, 'pagination__item--current') }}
            {% if data.page < data.pages %}
                {% if data.nearbyPagesLimit %}
                    {% for i in range(data.page + 1, data.page + data.nearbyPagesLimit) if ( i <= data.pages ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                    {% if  (data.pages - data.extraPagesLimit) > (data.page + data.nearbyPagesLimit) %}
                        {{ ul.separator() }}
                    {% endif %}
                    {% if data.last and data.pages - data.page > data.nearbyPagesLimit %}
                        {{ ul.li(data.items[data.last]) }}
                    {% endif %}
                {% endif %}
                {% if data.extraPagesLimit %}
                    {% for i in range(data.pages - data.extraPagesLimit + 1, data.pages) if ( i > data.page + data.nearbyPagesLimit ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
            {% endif %}
            {% if data.next %}
                {% set icon %}
                    {% include '@icon' with { name: 'chevron-right', modifier: '', class: 'pagination__list--icon' } %}
                {% endset %}
                {{ ul.li(data.next, 'pagination__item--next', icon) }}
            {% endif %}
        </ul>
    </nav>
{% endif %}

{
  "language": "en-US",
  "data": {
    "label": "Pagination",
    "next": {
      "text": "Next",
      "url": "#"
    },
    "previous": {
      "text": "Previous",
      "url": false
    },
    "current": {
      "text": "1",
      "url": false
    },
    "page": 1,
    "pages": 12,
    "last": 12,
    "nearbyPagesLimit": 4,
    "extraPagesLimit": 0,
    "items": {
      "1": {
        "text": "1",
        "url": "#"
      },
      "2": {
        "text": "2",
        "url": "#"
      },
      "3": {
        "text": "3",
        "url": "#"
      },
      "4": {
        "text": "4",
        "url": "#"
      },
      "5": {
        "text": "5",
        "url": "#"
      },
      "6": {
        "text": "6",
        "url": "#"
      },
      "7": {
        "text": "7",
        "url": "#"
      },
      "8": {
        "text": "8",
        "url": "#"
      },
      "9": {
        "text": "9",
        "url": "#"
      },
      "10": {
        "text": "10",
        "url": "#"
      },
      "11": {
        "text": "11",
        "url": "#"
      },
      "12": {
        "text": "12",
        "url": "#"
      }
    }
  }
}
  • Content: 
    .pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0 0 -8px 0;
    list-style: none;

    .pagination--align-end & {
        justify-content: flex-end;
    }
}

.pagination__list--icon {
    color: $L-text-black;
    border-radius: 2px;
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pagination__item {
    width: 32px;
    height: 32px;
    margin: 0 4px 8px;
    text-align: center;
    font-size: $font-size-small;
    line-height: 30px;

    /*
    Hide extra pagination items on mobile by default
    and make only current page and navigation items always visible
    */

    display: none;

    @include bp(sm-min) {
        display: block;
    }
}

.pagination__span {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: $border-radius-small;
    background-color: $L-background-disabled;
    font-size: 24px;
    color: $L-text-disabled;
}

.pagination__item--current {
    display: block;
}

.pagination__item--prev,
.pagination__item--next {
    font-size: 24px;
    line-height: $line-height-base;
    display: block;
    color: $L-text-black;
}

.pagination__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;
    border-radius: $border-radius-small;
    color: $L-text-black;
    background-color: $L-background-disabled;
    text-decoration: none;

    // Make it visually clickable only if it has href:

    &[href] {
        border: 1px solid $L-border;
        background-color: $L-background;
        color: $L-text;
    }

    .pagination__item--current &,
    &[href]:hover {
        color: $L-text-hover;
        background: $L-background-hover;
    }

    &[href]:active {
        border-color: transparent;
        color: $L-text-active;
        background: $L-background-active;
    }

    .pagination__item--current & {
        border-color: $L-border-strong;
        background-color: $L-background-strong;
        color: $L-text-weak;
    }
}

.pagination__label {
    .pagination__item--prev &,
    .pagination__item--next & {
        @include visually-hidden;
    }
}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: src/patterns/components/pagination/pagination.scss
  • Size: 2.2 KB
  • Handle: @pagination--mobile-example
  • Filesystem Path: src/patterns/components/pagination/pagination.twig
  • References (1): @icon

Align End 

    <nav class="pagination pagination--align-end " aria-label="Pagination">
        <ul class="pagination__list">
            <li class="pagination__item pagination__item--prev">
                <a aria-disabled="true" class="pagination__link">
                    <svg class="icon  pagination__list--icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-left"></use>
                    </svg>

                    <span class="pagination__label">Previous</span>
                </a>
            </li>

            <li class="pagination__item pagination__item--current">
                <a aria-current="page" class="pagination__link">
                    <span class="pagination__label">1</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">2</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">3</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">4</span>
                </a>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">5</span>
                </a>
            </li>

            <li class="pagination__item">
                <span class="pagination__span">···</span>
            </li>

            <li class="pagination__item ">
                <a href="#" class="pagination__link">
                    <span class="pagination__label">12</span>
                </a>
            </li>

            <li class="pagination__item pagination__item--next">
                <a href="#" class="pagination__link">
                    <svg class="icon  pagination__list--icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-right"></use>
                    </svg>

                    <span class="pagination__label">Next</span>
                </a>
            </li>

        </ul>
    </nav>
 
{% macro li(item, class, iconName) %}
    {% set noLinkAria -%}
        {% if 'pagination__item--current' in class %}
            aria-current="page"
        {% else %}
            aria-disabled="true"
        {% endif %}
    {% endset %}
    <li class="pagination__item {{ class }}">
        <a{% if item.url %} href="{{ item.url }}"{% else %} {{ noLinkAria }}{% endif %} class="pagination__link">
            {% if iconName %}
                {{ iconName }}
            {% endif %}
            <span class="pagination__label">{{ item.text }}</span>
        </a>
    </li>
{% endmacro %}
{% macro separator() %}
    <li class="pagination__item">
        <span class="pagination__span">···</span>
    </li>
{% endmacro %}
{% import _self as ul %}
{% if data.pages > 1 %}
    <nav class="pagination {{ modifier }} {{ class }}" aria-label="{{ data.label }}">
        <ul class="pagination__list">
            {% if data.previous %}
                {% set icon %}
                    {% include '@icon' with { name: 'chevron-left', modifier: '', class: 'pagination__list--icon' } %}
                {% endset %}
                {{ ul.li(data.previous, 'pagination__item--prev', icon) }}
            {% endif %}
            {% if data.page > 1 %}
                {% if data.extraPagesLimit %}
                    {% for i in range(1, data.extraPagesLimit) if ( i < data.page - data.nearbyPagesLimit ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
                {% if data.nearbyPagesLimit %}
                    {% if data.extraPagesLimit + 1 < data.page - data.nearbyPagesLimit %}
                        {{ ul.separator() }}
                    {% endif %}
                    {% for i in range(data.page - data.nearbyPagesLimit, data.page - 1) if ( i > 0 ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
            {% endif %}
            {{ ul.li(data.current, 'pagination__item--current') }}
            {% if data.page < data.pages %}
                {% if data.nearbyPagesLimit %}
                    {% for i in range(data.page + 1, data.page + data.nearbyPagesLimit) if ( i <= data.pages ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                    {% if  (data.pages - data.extraPagesLimit) > (data.page + data.nearbyPagesLimit) %}
                        {{ ul.separator() }}
                    {% endif %}
                    {% if data.last and data.pages - data.page > data.nearbyPagesLimit %}
                        {{ ul.li(data.items[data.last]) }}
                    {% endif %}
                {% endif %}
                {% if data.extraPagesLimit %}
                    {% for i in range(data.pages - data.extraPagesLimit + 1, data.pages) if ( i > data.page + data.nearbyPagesLimit ) %}
                        {{ ul.li(data.items[i]) }}
                    {% endfor %}
                {% endif %}
            {% endif %}
            {% if data.next %}
                {% set icon %}
                    {% include '@icon' with { name: 'chevron-right', modifier: '', class: 'pagination__list--icon' } %}
                {% endset %}
                {{ ul.li(data.next, 'pagination__item--next', icon) }}
            {% endif %}
        </ul>
    </nav>
{% endif %}

{
  "language": "en-US",
  "data": {
    "label": "Pagination",
    "next": {
      "text": "Next",
      "url": "#"
    },
    "previous": {
      "text": "Previous",
      "url": false
    },
    "current": {
      "text": "1",
      "url": false
    },
    "page": 1,
    "pages": 12,
    "last": 12,
    "nearbyPagesLimit": 4,
    "extraPagesLimit": 0,
    "items": {
      "1": {
        "text": "1",
        "url": "#"
      },
      "2": {
        "text": "2",
        "url": "#"
      },
      "3": {
        "text": "3",
        "url": "#"
      },
      "4": {
        "text": "4",
        "url": "#"
      },
      "5": {
        "text": "5",
        "url": "#"
      },
      "6": {
        "text": "6",
        "url": "#"
      },
      "7": {
        "text": "7",
        "url": "#"
      },
      "8": {
        "text": "8",
        "url": "#"
      },
      "9": {
        "text": "9",
        "url": "#"
      },
      "10": {
        "text": "10",
        "url": "#"
      },
      "11": {
        "text": "11",
        "url": "#"
      },
      "12": {
        "text": "12",
        "url": "#"
      }
    }
  },
  "modifier": "pagination--align-end"
}
  • Content: 
    .pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0 0 -8px 0;
    list-style: none;

    .pagination--align-end & {
        justify-content: flex-end;
    }
}

.pagination__list--icon {
    color: $L-text-black;
    border-radius: 2px;
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pagination__item {
    width: 32px;
    height: 32px;
    margin: 0 4px 8px;
    text-align: center;
    font-size: $font-size-small;
    line-height: 30px;

    /*
    Hide extra pagination items on mobile by default
    and make only current page and navigation items always visible
    */

    display: none;

    @include bp(sm-min) {
        display: block;
    }
}

.pagination__span {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: $border-radius-small;
    background-color: $L-background-disabled;
    font-size: 24px;
    color: $L-text-disabled;
}

.pagination__item--current {
    display: block;
}

.pagination__item--prev,
.pagination__item--next {
    font-size: 24px;
    line-height: $line-height-base;
    display: block;
    color: $L-text-black;
}

.pagination__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;
    border-radius: $border-radius-small;
    color: $L-text-black;
    background-color: $L-background-disabled;
    text-decoration: none;

    // Make it visually clickable only if it has href:

    &[href] {
        border: 1px solid $L-border;
        background-color: $L-background;
        color: $L-text;
    }

    .pagination__item--current &,
    &[href]:hover {
        color: $L-text-hover;
        background: $L-background-hover;
    }

    &[href]:active {
        border-color: transparent;
        color: $L-text-active;
        background: $L-background-active;
    }

    .pagination__item--current & {
        border-color: $L-border-strong;
        background-color: $L-background-strong;
        color: $L-text-weak;
    }
}

.pagination__label {
    .pagination__item--prev &,
    .pagination__item--next & {
        @include visually-hidden;
    }
}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: src/patterns/components/pagination/pagination.scss
  • Size: 2.2 KB
  • Handle: @pagination--align-end
  • Filesystem Path: src/patterns/components/pagination/pagination.twig
  • References (1): @icon