GDL - Global Design Language

Pagination 

<div class="c-pagination u-flex u-items-center u-justify-center u-py-large">

    <a class="u-label-04 o-link-text u-mr-base u-none u-block@sm" href="#">Prima</a>

    <a class="c-pagination__item c-pagination__item--rounded u-flex u-items-center u-justify-center u-mr-base" href="#">
        <svg class="o-icon o-icon--sm" data-dd-icon>
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
        </svg>
    </a>

    <a class="c-pagination__item u-flex u-items-center u-justify-center u-label-04 u-no-underline u-mr-base u-py-xxsmall" href="#"><span class="u-mx-xsmall">1</span></a>

    <a class="c-pagination__item u-flex u-items-center u-justify-center u-label-04 u-no-underline u-mr-base u-py-xxsmall" href="#"><span class="u-mx-xsmall">2</span></a>

    <div class="c-pagination__item u-flex u-items-center u-justify-center is-active u-label-04 u-mr-base u-py-xxsmall"><span class="u-mx-xsmall">3</span></div>

    <a class="c-pagination__item u-flex u-items-center u-justify-center u-label-04 u-no-underline u-mr-base u-py-xxsmall" href="#"><span class="u-mx-xsmall">4</span></a>

    <a class="c-pagination__item u-flex u-items-center u-justify-center u-label-04 u-no-underline u-mr-base u-py-xxsmall" href="#"><span class="u-mx-xsmall">5</span></a>

    <a class="c-pagination__item c-pagination__item--rounded u-flex u-items-center u-justify-center u-mr-base" href="#">
        <svg class="o-icon o-icon--sm" data-dd-icon>
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
        </svg>
    </a>

    <a class="u-label-04 o-link-text u-none u-block@sm" href="#">Ultima</a>

</div>
 
<div class="c-pagination u-flex u-items-center u-justify-center u-py-large">

  <a class="u-label-04 o-link-text u-mr-base u-none u-block@sm" href="#">{{label_first}}</a>
  
  <a class="c-pagination__item c-pagination__item--rounded u-flex u-items-center u-justify-center u-mr-base" href="#">
    <svg class="o-icon o-icon--sm" data-dd-icon>
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
    </svg>
  </a>

  {% for i in range(1,6) -%}
    {% if i == 3 %}
      <div class="c-pagination__item u-flex u-items-center u-justify-center is-active u-label-04 u-mr-base u-py-xxsmall"><span class="u-mx-xsmall">{{ i }}</span></div>
    {% else %}
      <a class="c-pagination__item u-flex u-items-center u-justify-center u-label-04 u-no-underline u-mr-base u-py-xxsmall" href="#"><span class="u-mx-xsmall">{{ i }}</span></a>
    {% endif %}
  {%- endfor %}

  <a class="c-pagination__item c-pagination__item--rounded u-flex u-items-center u-justify-center u-mr-base" href="#">
    <svg class="o-icon o-icon--sm" data-dd-icon>
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
    </svg>
  </a>

  <a class="u-label-04 o-link-text u-none u-block@sm" href="#">{{label_last}}</a>

</div>
 
{
  "label_first": "Prima",
  "label_last": "Ultima"
}
  • Content: 
    // Name:            Pagination
// Description:     Navigate throgh list of items
//
// Component:       `c-pagination`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//
// ========================================================================

// Variables
// ========================================================================

$pagination-number-radius: 20px;
$pagination-icon-radius: 50%;
$pagination-link-size: 1.5rem;

// ========================================================================

.c-pagination {

  // Custom properties
  // ========================================================================

  --pagination-item-color: var(--link-color-dark);
  --pagination-item-bg: transparent;
  --pagination-item-border-color: var(--icon-color);

  // ========================================================================

  &__item {
    height: $pagination-link-size;
    border-radius: $pagination-number-radius;
    background-color: var(--pagination-item-bg);
    color: var(--pagination-item-color);    
    transition: $global-interactive-transition;

    &:hover {
      --pagination-item-bg: var(--background-color-light);
    }

    &.is-active {
      --pagination-item-bg: var(--item-bg-inverse);
      --pagination-item-color: var(--body-color-inverse);
    }
    
    &--rounded {
      width: $pagination-link-size;
      border: 1px solid var(--pagination-item-border-color);
      
      &:hover {
        --pagination-item-bg: transparent;
        --pagination-item-border-color: #{$ui-04};
        --pagination-item-color: #{$ui-04};
      }
    }
  }

}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: src/lib/components/pagination/pagination.scss
  • Size: 1.6 KB

Pagination

This component allows the erection of pages in a dedicated list.

Usage

Render subheaer

In order to display a default pagination template use following syntax:

  {% render "@pagination" %}