Interactive components

These components offer and need an interaction with the user to be useful. They bring dynamism to the website.

You can find the below components in their proprer stylesheet _carousel.scss, _pagination.scss, breadcrumb.scss and _toggle-collapse.scss. The modal component is a Bootstrap 4 native component.







Pagination

A simple pagination component that provides links to navigate through results views or parts.

<ul class="pull-right pagination">
    <li class="disabled">
        <a href="#"></a>
    </li>
    <li class="active">
        <a href="#">1</a>
    </li>
    <li>
        <a href="#">2</a>
    </li>
    ...
    <li>
        <a href="#"></a>
    </li>
</ul>

An infinite scroll could also be implemented, based on a basic "display more" link.

<p class="text-center">
    <a href="" title="View 20 previous articles">View 20 previous articles</a>
</p>






Toggle Collapse

The toggle collapse component allows the users to toggle content on the view when all the contents do not necessarily need to be visible at the same time.

<h2 class="toggler" data-toggle="collapse" data-target="#events-october" aria-expanded="false" aria-controls="events-october">
    <span>October</span>
</h2>
<row class="collapse" id="events-october">
    <div class="event-month">
      <!-- Block event -->
  </div>
  <div class="event-month">
      <!-- Block event -->
  </div>
  ...
</row>