Aeroporto di Bologna - Design System

Pagination

300 × 150 
<nav class="c-pagination" role="navigation" aria-label="Scorri tra le pagine">
    <ul>
        <li>
            <a class="prev isDisabled" aria-hidden="true"><svg class="c-icon--32">
                    <use xlink:href="#ic_chevron_left_black_24px"></use>
                </svg></a>
        </li>
        <li><a href="#" class="isActive" aria-label="Pagina attuale, Pagina 1" aria-current="true">1</a></li>
        <li><a href="#" aria-label="Vai alla pagina 2">2</a></li>
        <li><a href="#" aria-label="Vai alla pagina 3">3</a></li>
        <li><a href="#" aria-label="Vai alla pagina 4">4</a></li>
        <li>
            <a href="#" class="next" aria-label="Vai alla pagina successiva"><svg class="c-icon--32">
                    <use xlink:href="#ic_chevron_right_black_24px"></use>
                </svg></a>
        </li>
    </ul>
</nav>
 
<nav class="c-pagination" role="navigation" aria-label="Scorri tra le pagine">
  <ul>
    <li>
      {{#if isBeginning}}
        <a class="prev isDisabled" aria-hidden="true">{{> @icon symbol="ic_chevron_left_black_24px" class="c-icon--32"}}</a>
      {{else}}
        <a href="#" class="prev" aria-label="Vai alla pagina precedente" >{{> @icon symbol="ic_chevron_left_black_24px" class="c-icon--32"}}</a>
      {{/if}}
    </li>
    <li><a href="#" class="isActive" aria-label="Pagina attuale, Pagina 1" aria-current="true">1</a></li>
    <li><a href="#" aria-label="Vai alla pagina 2">2</a></li>
    <li><a href="#" aria-label="Vai alla pagina 3">3</a></li>
    <li><a href="#" aria-label="Vai alla pagina 4">4</a></li>
    <li>
      <a href="#" class="next" aria-label="Vai alla pagina successiva" >{{> @icon symbol="ic_chevron_right_black_24px" class="c-icon--32"}}</a>
    </li>
  </ul>
</nav>
 
{
  "isBeginning": true
}
  • Content: 
    .c-pagination {
  width: 100%;
  max-width: remify(340px);
  margin: remify(24px) auto;
  font-size: 125%;
  color: primary(sky, 120);

  .c-main--faqs & {
    margin-bottom: remify(80px);
  }

  ul {
    display: flex;
    justify-content: space-between;
  
    a.isDisabled {
      opacity: .2;
    }
  
    a.isActive {
      font-weight: fw(bold);
    }
  
    svg {
      * {
        fill: currentColor;
      }
    }
  
  }

  main & {
    grid-column: main;
  }

  .c-tablist & {
    margin: remify(52px) auto 0 auto;
  }

}
  • URL: /components/raw/pagination/_pagination.scss
  • Filesystem Path: src/views/01-atoms/pagination/_pagination.scss
  • Size: 531 Bytes

No notes defined.