Joran design system

Pagination: Default 

<div class="o-container o-container--large o-region c-pagination">
    <nav aria-labelledby="pagination-title">
        <h2 id="pagination-title" class="u-visually-hidden">Pagination</h2>
        <ul class="c-pagination__list">

            <li class="c-pagination_list-item-previous">
                <!-- prettier-ignore -->
                <a href="#nowhere" class="c-button c-button--default"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                        <path d="M7 1L1 7l6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <span>Précédent<span class="u-visually-hidden"> : Page X sur Y</span></span></a>

            </li>

            <li class="c-pagination_list-item-next">
                <!-- prettier-ignore -->
                <a href="#nowhere" class="c-button c-button--default"><span>Suivant<span class="u-visually-hidden"> : Page X sur Y</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                        <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </a>

            </li>

        </ul>
    </nav>
</div>
 
<div class="o-container o-container--large o-region c-pagination">
  <nav aria-labelledby="pagination-title">
    <h2 id="pagination-title" class="u-visually-hidden">Pagination</h2>
    <ul class="c-pagination__list">
      {% if buttons.previous %}
      <li class="c-pagination_list-item-previous">
        <!-- prettier-ignore -->
        {% render '@button--default-arrow-left', buttons.previous , true %}
      </li>
      {% endif %} {% if buttons.next %}
      <li class="c-pagination_list-item-next">
        <!-- prettier-ignore -->
        {% render '@button--default-arrow-right', buttons.next, true %}
      </li>
      {% endif %}
    </ul>
  </nav>
</div>
 
{
  "buttons": {
    "previous": {
      "text": "Précédent",
      "hiddentext": ": Page X sur Y"
    },
    "next": {
      "text": "Suivant",
      "hiddentext": ": Page X sur Y"
    }
  },
  "previous": false,
  "next": true
}
  • Content: 
    /* ======================================================================
   # _components.pagination.css
   ====================================================================== */

.c-pagination {
  @extend .u-print-hidden;
}

.c-pagination__list {
  @apply
    flex
    flex-row
    flex-wrap
    justify-between
    ;
}

.c-pagination_list-item-previous,
.c-pagination_list-item-next {
  @apply
    mb-4
  ;
}

/***
 * FIXME: Le bouton de droite sort du viewport sur Firefox
 */
.c-pagination_list-item-next {
  @apply
    ml-auto
    ;
}
  • URL: /components/raw/pagination/_components.pagination.css
  • Filesystem Path: src/components/04-Components/pagination/pagination/_components.pagination.css
  • Size: 544 Bytes

No notes defined.