Lunds universitet - Style Guide

Pagination 

<nav aria-label="Pagination" class="my-3">
    <ul class="pagination pagination-sm">
        <li class="page-item disabled">
            <a class="page-link" href="#"><span class="page-icon"><i class="fal fa-chevron-left fa-sm"></i></span><span class="page-label"> Föregående</span></a>
        </li>
        <li class="page-item active" aria-current="page">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item d-none d-md-block">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <span class="page-text"><i class="fal fa-ellipsis-h"></i></span>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">8</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#"><span class="page-label">Nästa </span><span class="page-icon"><i class="fal fa-chevron-right fa-sm"></i></span></a>
        </li>
    </ul>
</nav>
 
<nav aria-label="{{label}}" class="my-3{{modifiers modifiers}}">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#"><span class="page-icon"><i class="fal fa-chevron-left fa-sm"></i></span><span class="page-label"> Föregående</span></a>
    </li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item d-none d-md-block">
      <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item">
      <span class="page-text"><i class="fal fa-ellipsis-h"></i></span>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">8</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#"><span class="page-label">Nästa </span><span class="page-icon"><i class="fal fa-chevron-right fa-sm"></i></span></a>
    </li>
  </ul>
</nav>
 
{
  "label": "Pagination"
}

No notes defined.