City of Ghent Style Guide

Display switcher

When to use this component

Use the display switcher component when a page reload is triggered to let users:

  • Switch between two or more display modes of one section of content
  • Switch between two different sections of content

For example:

  • Switch between a list and map view using a page reload
  • Switch between a list, map and grid view using a page reload
  • Switch between a list of all job openings and a list of job openings on one specific location using a page reload

When not to use this component

Do not use the display switcher component when no page reload is triggered. In this case, use tabs instead.

Furthermore, do not use a page reload and the display switcher component:

  • When users will need to see all sections at once, for instance to compare information in the different sections.
  • When users have to read through all the related sections of content in order, for example, to understand a process.
  • To show progress or a linear flow when collecting user input in multiple steps or to guide users through a process. In these cases, use a multistep form or a wizard instead.

Alternative to using a display switcher component:

  • Reduce and simplify the content so that it can be placed on one page, without the need to trigger a page reload and for a display switcher component. On that one page, use tabs instead or keep the content as is on the page, separate the content by headings and/or use a table of contents component to let users navigate quickly to specific sections of content.

How it works

The display switcher shows the display modes or the sections of content that are available. Each display mode or section of content is presented with an icon and a label.

The display mode or section of content that is currently active is clearly indicated. By default, the first display mode is always active.

When clicking another display mode, a page reload is trigger and the content is presented in a different way or the other section of content is shown. The display switcher again clearly indicates the new active display mode or section of content.

Display Switcher 

<div class="display-switcher">
  <span>{{ 'View the results' }}</span>
  <ul class="icon-list inline">
      <li class="active">
        <i class="icon-document" aria-hidden="true"></i><strong>As list</strong>
      </li>
      <li>
        <i class="icon-marker" aria-hidden="true"></i><a href="javascript:(void);">On map</a>
      </li>
  </ul>
</div>
  • Handle: @display-switcher
  • Preview:
  • Filesystem Path: components/31-molecules/display-switcher/display-switcher.twig 
<div class="display-switcher">
    <span>View the results</span>
    <ul class="icon-list inline">
        <li class="active">
            <i class="icon-document" aria-hidden="true"></i><strong>As list</strong>
        </li>
        <li>
            <i class="icon-marker" aria-hidden="true"></i><a href="javascript:(void);">On map</a>
        </li>
    </ul>
</div>
 
/* No context defined. */
  • Content: 
    .display-switcher {
  @include medium-text();
  align-items: center;
  margin-bottom: 60px;

  @include phablet {
    display: flex;
  }

  ul {
    margin-bottom: 0;

    &.icon-list.inline {
      li {
        @include medium-text();
        margin-right: 20px;

        &:not(.active) {
          i {
            @include theme("color", "color-primary", "link-color");
          }
        }
      }
    }
  }

  > span {
    display: block;
    margin-right: 20px;
  }
}
  • URL: /components/raw/display-switcher/_display-switcher.scss
  • Filesystem Path: components/31-molecules/display-switcher/_display-switcher.scss
  • Size: 474 Bytes