D.School Component Library

Pagination 

<div class="c-pagination">

    <a class="o-link o-link--secondary c-pagination__link c-pagination__link--prev" href="/" target="_self">
        <span class="o-icon">
            <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.6099 21.1203L10.5499 22.1803L1.88986 13.5203V11.4803L10.5499 2.82031L11.6099 3.88031L3.73986 11.7503H23.1099V13.2503H3.73986L11.6099 21.1203Z" />
            </svg>
        </span>
        <span class="o-link__label">
            Previous
        </span>
    </a>
    <div class="c-pagination__items">

        <a class="o-link o-link--secondary c-pagination__link c-pagination__link--item o-detail--2" href="/page/1" target="_self">
            <span class="o-link__label">
                1
            </span>
        </a>

        <a class="o-link o-link--secondary c-pagination__link c-pagination__link--item o-detail--2" href="/page/2" target="_self">
            <span class="o-link__label">
                2
            </span>
        </a>

        <a class="o-link o-link--secondary c-pagination__link c-pagination__link--item o-detail--2" href="/page/3" target="_self">
            <span class="o-link__label">
                3
            </span>
        </a>

        <a class="o-link o-link--secondary c-pagination__link c-pagination__link--item o-detail--2" href="/page/4" target="_self">
            <span class="o-link__label">
                4
            </span>
        </a>

        <a class="o-link o-link--secondary c-pagination__link c-pagination__link--item o-detail--2" href="/page/5" target="_self">
            <span class="o-link__label">
                5
            </span>
        </a>
    </div>

    <a class="o-link o-link--secondary c-pagination__link c-pagination__link--next" href="/" target="_self">
        <span class="o-link__label">
            Next
        </span>
        <span class="o-icon transition">
            <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
            </svg>
        </span>
    </a>
</div>
 
{% set base_class = pagination.base_class|default('c-pagination') %}

{% if pagination.items %}
  {% set pagination_active = "" %}
  {% for item in pagination.items %}
    {% if item.active %}
      {% set pagination_active = loop.index %}
    {% endif %}
  {% endfor %}
  <div class="{{ bem(base_class, pagination.element, pagination.modifiers, pagination.extra) }}" {{ attributes(pagination.attributes) }}>
    {% include "@link" with {
      "link": {
        "text": "Previous",
        "url": "/",
        "modifiers": "secondary",
        "arrow": true,
        "icon_placement": "before",
        "extra": bem(base_class, 'link', 'prev')
      }
    } %}
    <div class="{{ bem(base_class, 'items') }}">
      {% for item in pagination.items %}
        {% include "@link" with {
          "link": {
            "text": item.text,
            "url": item.url,
            "modifiers": "secondary",
            "extra": [bem(base_class, 'link', 'item'), 'o-detail--2']
          }
        } %}
      {% endfor %}
    </div>
    {% include "@link" with {
      "link": {
        "text": "Next",
        "url": "/",
        "modifiers": "secondary",
        "arrow": true,
        "icon_placement": "after",
        "extra": bem(base_class, 'link', 'next')
      }
    } %}
  </div>
{% endif%}
 
{
  "pagination": {
    "items": [
      {
        "url": "/page/1",
        "text": "1",
        "active": true
      },
      {
        "url": "/page/2",
        "text": "2"
      },
      {
        "url": "/page/3",
        "text": "3"
      },
      {
        "url": "/page/4",
        "text": "4"
      },
      {
        "url": "/page/5",
        "text": "5"
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------ *\
  $PAGINATION
\* ------------------------------------ */

.c-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ds-space-md);
  padding: var(--ds-space-xs) 0 var(--ds-space-lg);
  margin-top: 0;

  &__items {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ds-space-sm);
  }

  .o-link--secondary {
    padding-bottom: 0;
  }

  @include media('>=large') {
    padding: var(--ds-space) var(--ds-space-xl) var(--ds-space-xl);
    gap: 35px;

    &__items {
      gap: 40px;
    }
  }

  @include media('>=xxlarge') {
    padding-bottom: var(--ds-space-xxxl);
  }
}
  • URL: /components/raw/pagination/_pagination.scss
  • Filesystem Path: components/02-molecules/navigation/pagination/_pagination.scss
  • Size: 729 Bytes

No notes defined.