Foehn Design System

Pagination 

<!-- Default -->
<nav class="vd-pagination" aria-label="Pagination">
    <ul class="vd-pagination__list">
        <li class="vd-pagination__item vd-pagination__item--previous">
            <a href="#" class="vd-pagination__link">
                <span class="vd-pagination__title">
                    <span class="fas fa-chevron-left" aria-hidden="true"></span>
                    Page précédente
                </span><span class="sr-only">:</span>
                <span class="vd-pagination__label">11 sur 244</span></a>
        </li>
        <li class="vd-pagination__item vd-pagination__item--next">
            <a href="#" class="vd-pagination__link">
                <span class="vd-pagination__title">
                    Page suivante
                    <span class="fas fa-chevron-right" aria-hidden="true"></span>
                </span><span class="sr-only">:</span>
                <span class="vd-pagination__label">13 sur 244</span></a>
        </li>
    </ul>
</nav>


<!-- First -->
<nav class="vd-pagination" aria-label="Pagination">
    <ul class="vd-pagination__list">
        <li class="vd-pagination__item vd-pagination__item--next">
            <a href="#" class="vd-pagination__link">
                <span class="vd-pagination__title">
                    Page suivante
                    <span class="fas fa-chevron-right" aria-hidden="true"></span>
                </span><span class="sr-only">:</span>
                <span class="vd-pagination__label">2 sur 244</span></a>
        </li>
    </ul>
</nav>


<!-- Last -->
<nav class="vd-pagination" aria-label="Pagination">
    <ul class="vd-pagination__list">
        <li class="vd-pagination__item vd-pagination__item--previous">
            <a href="#" class="vd-pagination__link">
                <span class="vd-pagination__title">
                    <span class="fas fa-chevron-left" aria-hidden="true"></span>
                    Page précédente
                </span><span class="sr-only">:</span>
                <span class="vd-pagination__label">243 sur 244</span></a>
        </li>
    </ul>
</nav>


<nav class="vd-pagination" aria-label="{{ title }}">
  <ul class="vd-pagination__list">
    {%- if pages.previous -%}
    <li class="vd-pagination__item vd-pagination__item--previous">
      <a href="{{ pages.previous.url }}" class="vd-pagination__link">
        <span class="vd-pagination__title">
          <span class="fas fa-chevron-left" aria-hidden="true"></span>
          {{ pages.previous.title }}
        </span>
        {%- if pages.previous.label -%}
        <span class="sr-only">:</span>
        <span class="vd-pagination__label">{{ pages.previous.label }}</span>
        {%- endif -%}
      </a>
    </li>
    {%- endif %}
    {%- if pages.next -%}
    <li class="vd-pagination__item vd-pagination__item--next">
      <a href="{{ pages.next.url }}" class="vd-pagination__link">
        <span class="vd-pagination__title">
          {{ pages.next.title }}
          <span class="fas fa-chevron-right" aria-hidden="true"></span>
        </span>
        {%- if pages.next.label -%}
        <span class="sr-only">:</span>
        <span class="vd-pagination__label">{{ pages.next.label }}</span>
        {%- endif -%}
      </a>
    </li>
    {%- endif %}
  </ul>
</nav>
 
/* Default */
{
  "title": "Pagination",
  "pages": {
    "previous": {
      "url": "#",
      "title": "Page précédente",
      "label": "11 sur 244"
    },
    "next": {
      "url": "#",
      "title": "Page suivante",
      "label": "13 sur 244"
    }
  }
}


/* First */
{
  "title": "Pagination",
  "pages": {
    "previous": false,
    "next": {
      "url": "#",
      "title": "Page suivante",
      "label": "2 sur 244"
    }
  }
}


/* Last */
{
  "title": "Pagination",
  "pages": {
    "previous": {
      "url": "#",
      "title": "Page précédente",
      "label": "243 sur 244"
    },
    "next": false
  }
}
  • Content: 
    @charset 'UTF-8';
@use "sass:math";

/**
 * 1. unstyle list
 */

.vd-pagination {
  margin-bottom: 3em;
}

.vd-pagination__list {
  padding-left: 0; /* [1] */
  list-style: none; /* [1] */
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}

.vd-pagination__item {
  margin-top: 1em;
  flex: 0 1 auto;
  padding: math.div($spacer, 4);

  &--next {
    text-align: right;
    margin-left: auto;
  }

  & + &--next {
    margin-left: inherit;
  }

  &.is-active {
    color: $pagination-active-color;
    pointer-events: none;
    background-color: $pagination-active-bg;
  }

  &.is-disabled {
    color: $pagination-disabled-color;
  }
}

.vd-pagination__link {
  display: block;

  &,
  &:hover {
    text-decoration: none;
  }
}

.vd-pagination__title {
  text-decoration: none;

  @include media-breakpoint-up(sm) {
    font-size: 1.3em;
  }
}

.vd-pagination__label {
  display: block;
  font-size: 0.8em;
}
  • URL: /components/raw/pagination/_pagination.scss
  • Filesystem Path: src/components/02-molecules/navigation/pagination/_pagination.scss
  • Size: 959 Bytes

Use “next / previous” pagination instead of numbered pages.