Web Styleguide
  • 5.4.0
<div class="master">

    <div id="cookies-banner" class="cookies-banner box box--default hidden">
        <div class="h4 mrgt0">Who reads what? For how long? And where?</div>
        <p class="mrgt0 text-muted text-medium">
            As a digital agency we would like to know what is going on on our website. Therefore we use cookies. They help us to measure exactly this. And no worries - we do not recognise underwear colour and coffee consumption. However, these cookies are stored with you. So we can at least find out how often you come by.
        </p>

        <div class="grid grid--multiline">
            <div class="grid__item w-1/2">
                <button id="cookies-banner-accept-all-btn" class="btn btn--default btn--block">
                    Accept all
                </button>
            </div>
            <div class="grid__item w-1/2">
                <button id="cookies-banner-decline-all-btn" class="btn btn--default btn--block">
                    Decline all
                </button>
            </div>
            <div class="grid__item">
                <button class="btn btn--bare" data-a11y-dialog-show="cookies-banner-dialog">Customize my preferences</button>
            </div>
        </div>
    </div>

</div>

<div id="cookies-banner-dialog" class="dialog" aria-hidden="true">
    <div class="dialog-overlay" tabindex="-1" data-a11y-dialog-hide></div>

    <div class="dialog-content" role="dialog" aria-labelledby="cookies-banner-dialog-dialog-title">
        <div class="dialog__header">
            <h1 id="cookies-banner-dialog-dialog-title" class="h3 mrgv0 flex-grow-1">
                Cookies settings
            </h1>

            <button class="btn btn--bare" type="button" aria-label="Close dialog" data-a11y-dialog-hide>
                <svg class="icon icon--close icon--100">
                    <use xlink:href="../../assets/icons.svg#close" />
                </svg>

            </button>
        </div>

        <div class="dialog__body">

            <p class="mrgt0">By allowing these third party services, you accept their cookies and the use of tracking technologies necessary for their proper functioning. Read more in our <a href="#">Privacy Policy</a>.</p>

            <ul class="list-stacked">
                <li>
                    <div class="media media--middle">
                        <div class="media__left">
                            <div class="toggle">
                                <input id="cookies-settings-toggle-all" type="checkbox" name="" value="1" class="toggle__checkbox">
                                <label for="cookies-settings-toggle-all" class="toggle__label"></label>
                            </div>

                        </div>
                        <div class="media__body">
                            <label for="cookies-settings-toggle-all" class="field-label pdgv0">Toggle all</label>
                        </div>
                    </div>
                </li>
                <li>
                    <hr class="mrgv0">
                </li>

                <li>
                    <div class="media">
                        <div class="media__left">
                            <div class="toggle cookies-settings-toggle">
                                <input id="facebookPixel" type="checkbox" name="facebookPixel" value="1" class="toggle__checkbox">
                                <label for="facebookPixel" class="toggle__label"></label>
                            </div>

                        </div>
                        <div class="media__body">
                            <h2 class="h4 mrgt0 mrgb--"><label for="facebookPixel">Facebook Pixel</label></h2>
                            <div class="text-muted text-medium">Facebook Pixel allows us to measure the impact of Liip publications on Facebook.</div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="media">
                        <div class="media__left">
                            <div class="toggle cookies-settings-toggle">
                                <input id="linkedinInsight" type="checkbox" name="linkedinInsight" value="1" class="toggle__checkbox">
                                <label for="linkedinInsight" class="toggle__label"></label>
                            </div>

                        </div>
                        <div class="media__body">
                            <h2 class="h4 mrgt0 mrgb--"><label for="linkedinInsight">LinkedIn Insight</label></h2>
                            <div class="text-muted text-medium">LinkedIn Insight allows us to measure the impact of Liip publications on LinkedIn.</div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="media">
                        <div class="media__left">
                            <div class="toggle cookies-settings-toggle">
                                <input id="hotjar" type="checkbox" name="hotjar" value="1" class="toggle__checkbox">
                                <label for="hotjar" class="toggle__label"></label>
                            </div>

                        </div>
                        <div class="media__body">
                            <h2 class="h4 mrgt0 mrgb--"><label for="hotjar">Hotjar</label></h2>
                            <div class="text-muted text-medium">Hotjar is a tool for collecting and analysing the interactions of all users in the form of a heat map. This tool is used to improve the content provided.</div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="media">
                        <div class="media__left">
                            <div class="toggle cookies-settings-toggle">
                                <input id="googleAnalytics" type="checkbox" name="googleAnalytics" value="1" class="toggle__checkbox">
                                <label for="googleAnalytics" class="toggle__label"></label>
                            </div>

                        </div>
                        <div class="media__body">
                            <h2 class="h4 mrgt0 mrgb--"><label for="googleAnalytics">Google Analytics</label></h2>
                            <div class="text-muted text-medium">Google Analytics is a tool provided by Google that enables us to collect and analyse information on the properties of the traffic visiting the website, the interactions with the content provided, and the consumption performance of all this content, in order to improve the content supplied.</div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="media">
                        <div class="media__left">
                            <div class="toggle cookies-settings-toggle">
                                <input id="googleOptimize" type="checkbox" name="googleOptimize" value="1" class="toggle__checkbox">
                                <label for="googleOptimize" class="toggle__label"></label>
                            </div>

                        </div>
                        <div class="media__body">
                            <h2 class="h4 mrgt0 mrgb--"><label for="googleOptimize">Google Optimize</label></h2>
                            <div class="text-muted text-medium">Google Optimize allows you to offer multiple variants of a website&#39;s content or structure in order to determine the version that obtains the best results from users, also known as A/B testing, and to personalise a website based on how it is utilised by its users. This tool is provided by Google.</div>
                        </div>
                    </div>
                </li>

            </ul>

        </div>

        <div class="dialog__footer">

            <ul class="list-inline list-inline--right" role="presentation">
                <li role="presentation">
                    <button class="btn btn--primary" data-a11y-dialog-hide>I’m done</button>
                </li>
            </ul>

        </div>
    </div>
</div>

<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function() {
        var cookiesBannerNode = document.querySelector('#cookies-banner');
        if (cookiesBannerNode) {
            var cookiesBanner = new Styleguide.CookiesBanner(cookiesBannerNode, {
                settingsDialog: '#cookies-banner-dialog',
                onAcceptAll: function(values) {
                    console.log('Accepted all cookies!', values);
                },
                onDeclineAll: function(values) {
                    console.log('Declined all cookies!', values);
                },
                onToggle: function(name, enabled, values) {
                    console.log('Toggle cookie consent for', name, enabled, values);
                },
                onToggleAll: function(enabled, values) {
                    console.log('Toggle all', enabled, values);
                }
            });
            cookiesBanner.show();
        }
    })
</script>
{% extends "@dialog--default" %}

{% block master %}
<div id="cookies-banner" class="cookies-banner box box--default hidden">
  <div class="h4 mrgt0">Who reads what? For how long? And where?</div>
  <p class="mrgt0 text-muted text-medium">
    As a digital agency we would like to know what is going on on our website. Therefore we use cookies. They help us to measure exactly this. And no worries - we do not recognise underwear colour and coffee consumption. However, these cookies are stored with you. So we can at least find out how often you come by.
  </p>

  <div class="grid grid--multiline">
    <div class="grid__item w-1/2">
      <button id="cookies-banner-accept-all-btn" class="btn btn--default btn--block">
        Accept all
      </button>
    </div>
    <div class="grid__item w-1/2">
      <button id="cookies-banner-decline-all-btn" class="btn btn--default btn--block">
        Decline all
      </button>
    </div>
    <div class="grid__item">
      <button class="btn btn--bare" data-a11y-dialog-show="{{ id }}">Customize my preferences</button>
    </div>
  </div>
</div>
{% endblock %}

{% block body %}
<p class="mrgt0">By allowing these third party services, you accept their cookies and the use of tracking technologies necessary for their proper functioning. Read more in our <a href="#">Privacy Policy</a>.</p>

<ul class="list-stacked">
  <li>
    <div class="media media--middle">
      <div class="media__left">
        {% render '@toggle', { id: 'cookies-settings-toggle-all', label: '' }, true %}
      </div>
      <div class="media__body">
        <label for="cookies-settings-toggle-all" class="field-label pdgv0">Toggle all</label>
      </div>
    </div>
  </li>
  <li>
    <hr class="mrgv0">
  </li>
  {% for service in services %}
    <li>
      <div class="media">
        <div class="media__left">
          {% render '@toggle', { id: service.id, name: service.id, label: '', class: 'cookies-settings-toggle' }, true %}
        </div>
        <div class="media__body">
          <h2 class="h4 mrgt0 mrgb--"><label for="{{ service.id }}">{{ service.label }}</label></h2>
          <div class="text-muted text-medium">{{ service.description }}</div>
        </div>
      </div>
    </li>
  {% endfor %}
</ul>
{% endblock %}

{% block footer %}
  <ul class="list-inline list-inline--right" role="presentation">
    <li role="presentation">
      <button class="btn btn--primary" data-a11y-dialog-hide>I’m done</button>
    </li>
  </ul>
{% endblock %}

{% block script %}
<script type="text/javascript">
  window.addEventListener('DOMContentLoaded', function() {
    var cookiesBannerNode = document.querySelector('#cookies-banner');
    if (cookiesBannerNode) {
      var cookiesBanner = new Styleguide.CookiesBanner(cookiesBannerNode, {
        settingsDialog: '#{{ id }}',
        onAcceptAll: function(values) {
          console.log('Accepted all cookies!', values);
        },
        onDeclineAll: function(values) {
          console.log('Declined all cookies!', values);
        },
        onToggle: function(name, enabled, values) {
          console.log('Toggle cookie consent for', name, enabled, values);
        },
        onToggleAll: function(enabled, values) {
          console.log('Toggle all', enabled, values);
        }
      });
      cookiesBanner.show();
    }
  })
</script>
{% endblock %}
expertises:
  - name: E-commerce
    teaser: >-
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi
      excepturi? Eius, voluptates quia dolorem obcaecat.
    icon: ecommerce
  - name: Content Management
    teaser: Lorem ipsum dolor.
    icon: content-management
  - name: User Experience
    teaser: >-
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi
      excepturi? Eius, voluptates quia dolorem obcaecat.
    icon: user-experience
  - name: Mobile
    teaser: 'Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.'
    icon: mobile
  - name: E-learning
    teaser: >-
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi
      excepturi? Eius, voluptates quia dolorem obcaecat.
    icon: elearning
  - name: API
    teaser: Lorem ipsum dolor sit amet consectetur adipisicing elit.
    icon: api
  - name: Open Data
    teaser: 'Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.'
    icon: open-source
  - name: Analytics
    teaser: >-
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi
      excepturi? Eius, voluptates quia dolorem obcaecat.
    icon: analytics
  - name: Finance
    teaser: Lorem ipsum dolor sit amet consectetur adipisicing elit.
    icon: fintech
  - name: SEO
    teaser: >-
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi
      excepturi? Eius, voluptates quia dolorem obcaecat.
    icon: seo
  - name: Service Design
    teaser: 'Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.'
    icon: service-design
  - name: SEA
    teaser: Lorem ipsum dolor sit amet consectetur adipisicing elit.
    icon: sea
  - name: Content
    teaser: 'Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.'
    icon: content
  - name: Data Science
    teaser: >-
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi
      excepturi? Eius, voluptates quia dolorem obcaecat.
    icon: data-science
liipers:
  - name: Hannes Gassert
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/d1996e9334b17b85162f7f9b9f65ad19403e44a7.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/d1996e9334b17b85162f7f9b9f65ad19403e44a7.jpeg
  - name: Nadja Perroulaz
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/fe9af5612b6b9b5f4c89c2f067a6148903934a2d.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/fe9af5612b6b9b5f4c89c2f067a6148903934a2d.jpeg
  - name: Gerhard Andrey
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/50f1c94fc7d926f6a29e80b7edcd2cd9ffb04b74.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/50f1c94fc7d926f6a29e80b7edcd2cd9ffb04b74.jpeg
  - name: Brian King
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/66ef3db52a066525e6769644a5e248092be5ed49.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/66ef3db52a066525e6769644a5e248092be5ed49.jpeg
  - name: Christian Stocker
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/b537639e539efcc3df4459ef87c5963aa5079ca6.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/b537639e539efcc3df4459ef87c5963aa5079ca6.jpeg
  - name: Adrian Schlegel
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/1b0ece9c2eb862a4dd151a48f135f94f440e4eb6.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/1b0ece9c2eb862a4dd151a48f135f94f440e4eb6.jpeg
  - name: David Buchmann
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/6b2c6d04335a90b5b9f9f04218b6955ae4ad6fd4.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/6b2c6d04335a90b5b9f9f04218b6955ae4ad6fd4.jpeg
  - name: Benjamin Wohlwend
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/c32ffcf03142c133a405f609a2dfe094f8eeccb8.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/c32ffcf03142c133a405f609a2dfe094f8eeccb8.jpeg
  - name: Lukas Kahwe Smith
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/7fd5ff8888ea580f6f6388b5aaf9860a6fe2aafb.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/7fd5ff8888ea580f6f6388b5aaf9860a6fe2aafb.jpeg
  - name: Pascal Helfenstein
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/71af1da1d9803c01fad45271ed6be984a0a373d1.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/71af1da1d9803c01fad45271ed6be984a0a373d1.jpeg
  - name: Jean-Christophe Zulian
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/80d1c7a194a3f0cc88fbf2c018a1b2c4e1e9ace5.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/80d1c7a194a3f0cc88fbf2c018a1b2c4e1e9ace5.jpeg
  - name: Kevin Müller
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/23d4cfc3da49820a106c2c6ec402f0e8a62cc155.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/23d4cfc3da49820a106c2c6ec402f0e8a62cc155.jpeg
  - name: Thomas Botton
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/4906043129d24e2de21e20763dee3aae4d756419.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/4906043129d24e2de21e20763dee3aae4d756419.jpeg
  - name: Tonio Zemp
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/7608a1879cab18ae98b168fe2566fbe2acee7532.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/7608a1879cab18ae98b168fe2566fbe2acee7532.jpeg
  - name: Jonas Vonlanthen
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/56047d3f6510ac9e25049fa1eeba7e90e09238b4.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/56047d3f6510ac9e25049fa1eeba7e90e09238b4.jpeg
  - name: Laurent Prodon
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/9a6e4e039325007f185f501c7cc25b319d9fc9b4.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/9a6e4e039325007f185f501c7cc25b319d9fc9b4.jpeg
  - name: Benoît Pointet
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/134656a229d9debdf16306e854bdb8af99a4f529.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/134656a229d9debdf16306e854bdb8af99a4f529.jpeg
  - name: Zahida Huber
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/798f26af9f8856ea94332303dc9efbec07261248.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/798f26af9f8856ea94332303dc9efbec07261248.jpeg
  - name: Philipp Egli
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/76912ad62ae380826b5cc5bb8f26cd6ffe189ef1.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/76912ad62ae380826b5cc5bb8f26cd6ffe189ef1.jpeg
  - name: Sylvain Fankhauser
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/a1e3bb55f1fa078996c01542fc9182024760f477.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/a1e3bb55f1fa078996c01542fc9182024760f477.jpeg
  - name: Donato Rotunno
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/aba39a1483a52b24a9acf800223e534181b8e583.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/aba39a1483a52b24a9acf800223e534181b8e583.jpeg
  - name: Colin Frei
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/e9fce3c6a1e86ecb4132aa155e6c287ed155bac2.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/e9fce3c6a1e86ecb4132aa155e6c287ed155bac2.jpeg
  - name: Geoffroy Perriard
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/6c766ec7924fd6b6d98a7761ac36d8f23353b64d.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/6c766ec7924fd6b6d98a7761ac36d8f23353b64d.jpeg
  - name: Andreas Amsler
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/1cf73618f9b49243344809df44ea5124765102f6.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/1cf73618f9b49243344809df44ea5124765102f6.jpeg
  - name: David Jeanmonod
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/ce8785b49c319b17a7e20acf772de449aa4a0680.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/ce8785b49c319b17a7e20acf772de449aa4a0680.jpeg
  - name: Boris Hofer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/8d2506eb8e050b82125a872f44734ebc9a54a9d8.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/8d2506eb8e050b82125a872f44734ebc9a54a9d8.jpeg
  - name: Noora Suurnäkki
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/10cd2e343a37a7f9ec4387ecb8564595dee8288e.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/10cd2e343a37a7f9ec4387ecb8564595dee8288e.jpeg
  - name: Dorian Villet
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/40e86ead6976ee5b80b6987aa94e95b008511b1c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/40e86ead6976ee5b80b6987aa94e95b008511b1c.jpeg
  - name: Didier Raboud
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/d244587eb94db7ba721bb1008b2b00c3e9a931be.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/d244587eb94db7ba721bb1008b2b00c3e9a931be.jpeg
  - name: Christoph Meier
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/cd7269446dfb84f339ef670104479a3e286551a8.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/cd7269446dfb84f339ef670104479a3e286551a8.jpeg
  - name: Melanie Mächler
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/3ecc89c259acbbbb20aec2532619832b9401c710.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/3ecc89c259acbbbb20aec2532619832b9401c710.jpeg
  - name: Tobias Schultze
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/f562a03ff9f7738f13399de88a9c188d395bc702.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/f562a03ff9f7738f13399de88a9c188d395bc702.jpeg
  - name: Cédric Hofstetter
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/78851412d830f7f6446f6d0286a6577aa4dc15cb.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/78851412d830f7f6446f6d0286a6577aa4dc15cb.jpeg
  - name: Stefan Oderbolz
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/b7d007cc0f2bfd96472b766ec45c6bca6e50794a.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/b7d007cc0f2bfd96472b766ec45c6bca6e50794a.jpeg
  - name: Tiziano Rullo
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/de61471b4e4c7431829f238163163645426c2921.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/de61471b4e4c7431829f238163163645426c2921.jpeg
  - name: Jan Hug
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/885160d7d78bbc763a379684715f02f92b8a5ecd.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/885160d7d78bbc763a379684715f02f92b8a5ecd.jpeg
  - name: Andreas Frey Sang
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/8b0351cf494581f88637636c20ed1ae25ac463a7.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/8b0351cf494581f88637636c20ed1ae25ac463a7.jpeg
  - name: Rita Barracha
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/02111c9a0564dd1dfcdf277974b3f12bfac85c4c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/02111c9a0564dd1dfcdf277974b3f12bfac85c4c.jpeg
  - name: Daniel Frey
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/1071f47e912f78d3a1587e8db089937110b514e5.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/1071f47e912f78d3a1587e8db089937110b514e5.jpeg
  - name: Martin Janser
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/c2195c36709f4b76d6fb0a45cdab50ffd670be7d.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/c2195c36709f4b76d6fb0a45cdab50ffd670be7d.jpeg
  - name: Noé Froidevaux
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/1693b9c30121ef5b67130b471c632234bb13fce1.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/1693b9c30121ef5b67130b471c632234bb13fce1.jpeg
  - name: Fabian Schweizer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/0251807e7dc281731e6f63ccccb5528c2e1bcbbf.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/0251807e7dc281731e6f63ccccb5528c2e1bcbbf.jpeg
  - name: Matthieu Cornut
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/9f2af2535358ec849d1bb955e689805e4481372a.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/9f2af2535358ec849d1bb955e689805e4481372a.jpeg
  - name: Christian Riesen
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/f439e5034cd83c1fad1cae2e1a983fb0cc0ad82e.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/f439e5034cd83c1fad1cae2e1a983fb0cc0ad82e.jpeg
  - name: François Bruneau
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/e355745ff9d444e9b665dabd6506b42496afc246.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/e355745ff9d444e9b665dabd6506b42496afc246.jpeg
  - name: Daniel Lanz
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/8276d02973e283407a473b0aa8ea71585a6d0000.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/8276d02973e283407a473b0aa8ea71585a6d0000.jpeg
  - name: Pascal Thormeier
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/181f2a704f3cde4bd0cae4e790728c5f1dbc7ee6.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/181f2a704f3cde4bd0cae4e790728c5f1dbc7ee6.jpeg
  - name: Rae Knowler
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/fdce424983dea400525c5f2ec48499d145236d48.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/fdce424983dea400525c5f2ec48499d145236d48.jpeg
  - name: Nadia Fischer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/a475cd0044c258bd6febf44f856d371a2a0bcb36.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/a475cd0044c258bd6febf44f856d371a2a0bcb36.jpeg
  - name: Michelle Sanver
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/2545e444c6b43cb97a3f5159c60f253a7b10ca07.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/2545e444c6b43cb97a3f5159c60f253a7b10ca07.jpeg
  - name: Nicolas Dougoud
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/75dfce993993303a4bc4c9b5ed162c1258e5a038.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/75dfce993993303a4bc4c9b5ed162c1258e5a038.jpeg
  - name: Theres Scherrer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/3458b1d977968dc1f1e8b60e3be7423e6ecca165.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/3458b1d977968dc1f1e8b60e3be7423e6ecca165.jpeg
  - name: Pascal Cudré
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/7e812c45798f7d528a56a1fb0cb57f0e282c7753.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/7e812c45798f7d528a56a1fb0cb57f0e282c7753.jpeg
  - name: Benoît Burgener
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/ee55d4df1b1475cbd278311185b2a5740c4cfdc9.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/ee55d4df1b1475cbd278311185b2a5740c4cfdc9.jpeg
  - name: Marlene Stroj-Rullo
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/6b43ee08887985cee734d5008a7228ddfec3a0f9.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/6b43ee08887985cee734d5008a7228ddfec3a0f9.jpeg
  - name: Yves Bertrand
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/40270077658ad9940f340050220ea9a5a833c2a5.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/40270077658ad9940f340050220ea9a5a833c2a5.jpeg
  - name: Maxim Gubar
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/7e10c4f975e6c8662fdc3de16de358f3d83fb896.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/7e10c4f975e6c8662fdc3de16de358f3d83fb896.jpeg
  - name: Olivia Müller
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/2129be20080aeadbd05c408dc5eb8571eaa1fd6b.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/2129be20080aeadbd05c408dc5eb8571eaa1fd6b.jpeg
  - name: Jonathan Macheret
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/e2a1aedd9c74d7073ba3b2c30882e77382969051.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/e2a1aedd9c74d7073ba3b2c30882e77382969051.jpeg
  - name: Lennart Jegge
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/ef3a19d9508890d2114ebb3422efc16aa8d50ccc.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/ef3a19d9508890d2114ebb3422efc16aa8d50ccc.jpeg
  - name: Darja Gartner
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/90677823827e0f468c63481599040fba00a3955e.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/90677823827e0f468c63481599040fba00a3955e.jpeg
  - name: Dominique Sorg
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/aef32ff84340a560490f86420a295ba96b438775.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/aef32ff84340a560490f86420a295ba96b438775.jpeg
  - name: Marc Brühwiler
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/53621f3f8e379ec75ec0e64e59775a1c147bcdfe.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/53621f3f8e379ec75ec0e64e59775a1c147bcdfe.jpeg
  - name: Jennifer Bächtold
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/124ecadc4c5311d5ff05b065663639a3ec1d2612.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/124ecadc4c5311d5ff05b065663639a3ec1d2612.jpeg
  - name: Kilian Schefer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/9b42a053cf2bd11ce4005d80527cbfecd8b391c8.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/9b42a053cf2bd11ce4005d80527cbfecd8b391c8.jpeg
  - name: Fabio Santschi
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/d95bd1a844869008cf35773a151598f72572849e.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/d95bd1a844869008cf35773a151598f72572849e.jpeg
  - name: Tatjana Nebel
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/9944e5add255c563d41ab22ceb13ec06eaafa201.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/9944e5add255c563d41ab22ceb13ec06eaafa201.jpeg
  - name: Maximilian Lemke
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/bd4805586ccb82a1f599ce3104e79210602eec8f.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/bd4805586ccb82a1f599ce3104e79210602eec8f.jpeg
  - name: Bettina Brennwald
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/cc8898782e14b35f27d24e3bf7533176a5ed6f9b.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/cc8898782e14b35f27d24e3bf7533176a5ed6f9b.jpeg
  - name: Pedro Couto
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/f33d0117be4dd474f6551cb5d800b6202d8ae9f6.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/f33d0117be4dd474f6551cb5d800b6202d8ae9f6.jpeg
  - name: Sylvain Aerni
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/acfc20e5b9c26ab3ac603192d95fe6f10b06707c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/acfc20e5b9c26ab3ac603192d95fe6f10b06707c.jpeg
  - name: Philippe Savary
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/ba86f518243215bdb8e6de3f3bc0ff6b0451c56b.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/ba86f518243215bdb8e6de3f3bc0ff6b0451c56b.jpeg
  - name: Jürg Hunziker
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/4bee8b607dbd0131aa6a3fa6b37db23696b4e113.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/4bee8b607dbd0131aa6a3fa6b37db23696b4e113.jpeg
  - name: Emanuele Panzeri
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/ba3462765617c21d95700ccbb8962791f23399b7.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/ba3462765617c21d95700ccbb8962791f23399b7.jpeg
  - name: Ludovic Turmel
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/1f2052974d02513cae8fa2a3c6d5ff8e698f439c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/1f2052974d02513cae8fa2a3c6d5ff8e698f439c.jpeg
  - name: Karine Chor
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/22a8134e4effa3e4a4a8d599e83412541fd7ac54.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/22a8134e4effa3e4a4a8d599e83412541fd7ac54.jpeg
  - name: David Jordan
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/961b857ab12f6495049d6662de0a3e73079d1799.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/961b857ab12f6495049d6662de0a3e73079d1799.jpeg
  - name: Mathieu Barras
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/4ad27d39e859a9f99d724bf7b209c30326cde42c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/4ad27d39e859a9f99d724bf7b209c30326cde42c.jpeg
  - name: Laura Helfer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/92e7e4bd76ca54965eb738a578a2d088493920fd.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/92e7e4bd76ca54965eb738a578a2d088493920fd.jpeg
  - name: Martin Meier
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/cb1df65df8e5ee59273dba41066d4d4e6e480e5c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/cb1df65df8e5ee59273dba41066d4d4e6e480e5c.jpeg
  - name: Łukasz Gintowt
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/7e2501881edae1cdd1b68c6319075bc900568574.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/7e2501881edae1cdd1b68c6319075bc900568574.jpeg
  - name: András Czövek
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/5b3b5cc7277e7dc63c45494854b49d2b6eff6c86.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/5b3b5cc7277e7dc63c45494854b49d2b6eff6c86.jpeg
  - name: Thierry Krummenacher
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/a423c3b95c567dc5bb8ee85586944b635a5eb93a.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/a423c3b95c567dc5bb8ee85586944b635a5eb93a.jpeg
  - name: Tim Keller
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/88920033615941080f144fdd84877f303d9ded64.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/88920033615941080f144fdd84877f303d9ded64.jpeg
  - name: Patrick Stadler
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/310018864edaeec53e7b49b319f51bcf3d2009a8.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/310018864edaeec53e7b49b319f51bcf3d2009a8.jpeg
  - name: Romina Borga
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/aaa846d96d1809b9bf37dbe1cf682317d089e9e9.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/aaa846d96d1809b9bf37dbe1cf682317d089e9e9.jpeg
  - name: Stéphanie Möckli
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/8f792c7b4505c1d58a3b503fe399aec02b870903.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/8f792c7b4505c1d58a3b503fe399aec02b870903.jpeg
  - name: Luca Sardonini
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/0001cfcaa9fe13331ce41f3db403b4714670fbef.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/0001cfcaa9fe13331ce41f3db403b4714670fbef.jpeg
  - name: Christina Henkel
    avatar: null
  - name: Andrea Meyer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/4e5afc143412665482c1d71839bae711d017c483.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/4e5afc143412665482c1d71839bae711d017c483.jpeg
  - name: Tri Nhan Nguyen
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/93db581bfa44ed9ed062a766d534e3327dac8281.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/93db581bfa44ed9ed062a766d534e3327dac8281.jpeg
  - name: Clarissa Küchler
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/108979f7c42625851ce5194d1d4a09c8b6572fcb.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/108979f7c42625851ce5194d1d4a09c8b6572fcb.jpeg
  - name: Andrii Poplavskyi
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/c4c1ac9d1e5c4ca700947f098b934582e3eeb830.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/c4c1ac9d1e5c4ca700947f098b934582e3eeb830.jpeg
  - name: Vera Lorenzi
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/6eef4e2a3bb27b306483ccb3a688b3125fbb4326.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/6eef4e2a3bb27b306483ccb3a688b3125fbb4326.jpeg
  - name: Elena Rigamonti
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/28af72753d15da2418889d8a7beba3450daff8d0.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/28af72753d15da2418889d8a7beba3450daff8d0.jpeg
  - name: Thomas Riotte
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/03ab64a217bc2a78b58ac2659a5848592733aaeb.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/03ab64a217bc2a78b58ac2659a5848592733aaeb.jpeg
  - name: Eléonore Leibzig
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/692842efb5aa1ada75d20f3ac7c006983a823b47.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/692842efb5aa1ada75d20f3ac7c006983a823b47.jpeg
  - name: Miriam Pretzlaff
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/806e2756f45f259c7bbe7b2256d10e24860da769.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/806e2756f45f259c7bbe7b2256d10e24860da769.jpeg
  - name: Alain Frapolli
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/78fbdf03c418eca0a6c69ecfb38703488254cf91.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/78fbdf03c418eca0a6c69ecfb38703488254cf91.jpeg
  - name: Michael Weibel
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/a3f9101bca57a2ee78cd7e43f522bfed22a84401.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/a3f9101bca57a2ee78cd7e43f522bfed22a84401.jpeg
  - name: Isaline Mülhauser
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/7cadeaaa4eec1bf05452ae1e73b957e89cd8afc9.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/7cadeaaa4eec1bf05452ae1e73b957e89cd8afc9.jpeg
  - name: Fabian Ryf
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/34a1fa530b3f6f25084c44d492429bf721f372b2.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/34a1fa530b3f6f25084c44d492429bf721f372b2.jpeg
  - name: Marcel Tanner
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/04496e5f09de05b27799751cadebe173e7721366.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/04496e5f09de05b27799751cadebe173e7721366.jpeg
  - name: Biram Ly
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/fac224afbe7adc76c9fe83dbecb49f07ff99639f.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/fac224afbe7adc76c9fe83dbecb49f07ff99639f.jpeg
  - name: David Pacassi Torrico
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/bb3cd390c99b41aca650867257c6cb3d04dba589.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/bb3cd390c99b41aca650867257c6cb3d04dba589.jpeg
  - name: Stefanie Taepke
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/3f46a91ca11ae079cedfd6b8c23f1dbb34e828e5.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/3f46a91ca11ae079cedfd6b8c23f1dbb34e828e5.jpeg
  - name: Yaren Kurt
    avatar: null
  - name: Thomas Ebermann
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/c8c15bc7cf5d31e20e1fed8171a0fba4c365943f.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/c8c15bc7cf5d31e20e1fed8171a0fba4c365943f.jpeg
  - name: Yuri Bänninger
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/5a656374b4c46c553a05f9a9dec578799483b994.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/5a656374b4c46c553a05f9a9dec578799483b994.jpeg
  - name: Marton Orehovszky
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/e524fd9d2271a77d7e9b906712915e5cebb9c638.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/e524fd9d2271a77d7e9b906712915e5cebb9c638.jpeg
  - name: Christof Leuenberger
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/c9d2f885c1d1001c743322d16965c99e62129dbb.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/c9d2f885c1d1001c743322d16965c99e62129dbb.jpeg
  - name: Stefan Schweingruber
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/3badb152227bca02c180c21d0e5d988e968c701d.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/3badb152227bca02c180c21d0e5d988e968c701d.jpeg
  - name: Philipp Klein
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/41a69077347878790df4da3b7ebca859a30378a4.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/41a69077347878790df4da3b7ebca859a30378a4.jpeg
  - name: Sascha Aeppli
    avatar: null
  - name: Fabio Anderegg
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/14c0b1e3e31afd3275b0458b61d381f4a192bc9b.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/14c0b1e3e31afd3275b0458b61d381f4a192bc9b.jpeg
  - name: Joscha Jenni
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/11e8ad00f4e7f6cb12212997278ffc70eab8ac1d.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/11e8ad00f4e7f6cb12212997278ffc70eab8ac1d.jpeg
  - name: Viktoria Kluckner
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/b47318240c933133ce85b9b8600eb17e05f8d55f.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/b47318240c933133ce85b9b8600eb17e05f8d55f.jpeg
  - name: Claes Lennman
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/fb2cc8366791101735ca68ce8457545e59ce5c9a.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/fb2cc8366791101735ca68ce8457545e59ce5c9a.jpeg
  - name: Robert Filipponi
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/055fb5927052664a41b1e54b9fb1843a9563770b.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/055fb5927052664a41b1e54b9fb1843a9563770b.jpeg
  - name: Krisztian Kovacs
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/4f6ba46fdb03972827e771aa9674252d1277d0ec.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/4f6ba46fdb03972827e771aa9674252d1277d0ec.jpeg
  - name: Urs Stucki
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/9fa12182067e5c5ed3dab7210e412ea38ccca17b.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/9fa12182067e5c5ed3dab7210e412ea38ccca17b.jpeg
  - name: Julia Hertrich
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/9330e1f70e90c79f4681b00814784dfa4ca14754.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/9330e1f70e90c79f4681b00814784dfa4ca14754.jpeg
  - name: Jonas Schmid
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/6faa6426c257058bbeae570c285e5469464f381c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/6faa6426c257058bbeae570c285e5469464f381c.jpeg
  - name: Ksénia Jonin
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/24fa7ad0fe78e5f309fb36d3f37c3d0a317a60df.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/24fa7ad0fe78e5f309fb36d3f37c3d0a317a60df.jpeg
  - name: Raphaël Santos
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/f436dfa764a883d45c24d4d25ecbc6a0269118c1.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/f436dfa764a883d45c24d4d25ecbc6a0269118c1.jpeg
  - name: Romain Sickenberg
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/068ab091799e4843044a9d695d32e77a6b3bc9bf.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/068ab091799e4843044a9d695d32e77a6b3bc9bf.jpeg
  - name: Janina Kürsteiner
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/c6a616c992490e400c5626ccce2189db12752ebb.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/c6a616c992490e400c5626ccce2189db12752ebb.jpeg
  - name: Jonas Wyssen
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/d25995ccefa39d12527fc8bed6b070be421a9ba3.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/d25995ccefa39d12527fc8bed6b070be421a9ba3.jpeg
  - name: Sonja Nydegger
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/d9efdc28f4567d83b93ed26a3d385918f52d6354.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/d9efdc28f4567d83b93ed26a3d385918f52d6354.jpeg
  - name: Sina Marty
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/a98aa8262ada149399268ca36ff10cd637c2f758.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/a98aa8262ada149399268ca36ff10cd637c2f758.jpeg
  - name: Matteo Piatti
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/e6017b0218fa8efcefb188fc6f97862690634371.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/e6017b0218fa8efcefb188fc6f97862690634371.jpeg
  - name: Weronika Sieradzka
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/149799c46d85bbc5b01bb8d07038bd0a525b5fc3.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/149799c46d85bbc5b01bb8d07038bd0a525b5fc3.jpeg
  - name: Manuel Escrig
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/1e3260d90c0ebb041a3ba1885c46669ab8048640.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/1e3260d90c0ebb041a3ba1885c46669ab8048640.jpeg
  - name: Ursina Spadin
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/55dda75db2f5c6bca77f68a87c52a9ef1640ae6d.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/55dda75db2f5c6bca77f68a87c52a9ef1640ae6d.jpeg
  - name: Lars Peyer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/f1d2e3d12a7ecaeab45e7db59069aae9b1b982b2.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/f1d2e3d12a7ecaeab45e7db59069aae9b1b982b2.jpeg
  - name: Simone Wegelin
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/f6c64ad7bf2fc6dcbf8ff719c9984c7a264f1fe8.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/f6c64ad7bf2fc6dcbf8ff719c9984c7a264f1fe8.jpeg
  - name: Giorgio Nadig
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/6112f780809e3ef29e6a25dc808f7385ada0f1d5.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/6112f780809e3ef29e6a25dc808f7385ada0f1d5.jpeg
  - name: Jonathan Droz
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/002edf6c98dae85315e7d6f9bf80668724a5ad9c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/002edf6c98dae85315e7d6f9bf80668724a5ad9c.jpeg
  - name: David Lopez Pazos
    avatar: null
  - name: Denis Haramincic
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/25a74895deaf4fa21f0ff7affb09a16f054f7481.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/25a74895deaf4fa21f0ff7affb09a16f054f7481.jpeg
  - name: Stefan Heinemann
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/d7e4a269d996ede7c70059464ccef461e0575fc5.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/d7e4a269d996ede7c70059464ccef461e0575fc5.jpeg
  - name: Tina Hegi
    avatar: null
  - name: Hugo Torres
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/9d542bf710b80f3b6a9a0483e62a7ba18ed6b377.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/9d542bf710b80f3b6a9a0483e62a7ba18ed6b377.jpeg
  - name: Rami Jumaah
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/486d3f78489536c1d6bcf37dbd39d37596640a56.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/486d3f78489536c1d6bcf37dbd39d37596640a56.jpeg
  - name: Patrik Dummermuth
    avatar: null
  - name: Patrick Retornaz
    avatar: null
  - name: Léo Davesne
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/3b26ff6bd533baf1c25cbb0cde30fc888359fd3d.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/3b26ff6bd533baf1c25cbb0cde30fc888359fd3d.jpeg
  - name: Joëlle Mary
    avatar: null
  - name: Doran Kayoumi
    avatar: null
  - name: Mannar Hielal
    avatar: null
offices:
  - name: Lausanne
  - name: Fribourg
  - name: Bern
  - name: Zürich
  - name: St.Gallen
id: cookies-banner-dialog
title: Cookies settings
services:
  - id: facebookPixel
    label: Facebook Pixel
    description: >-
      Facebook Pixel allows us to measure the impact of Liip publications on
      Facebook.
  - id: linkedinInsight
    label: LinkedIn Insight
    description: >-
      LinkedIn Insight allows us to measure the impact of Liip publications on
      LinkedIn.
  - id: hotjar
    label: Hotjar
    description: >-
      Hotjar is a tool for collecting and analysing the interactions of all
      users in the form of a heat map. This tool is used to improve the content
      provided.
  - id: googleAnalytics
    label: Google Analytics
    description: >-
      Google Analytics is a tool provided by Google that enables us to collect
      and analyse information on the properties of the traffic visiting the
      website, the interactions with the content provided, and the consumption
      performance of all this content, in order to improve the content supplied.
  - id: googleOptimize
    label: Google Optimize
    description: >-
      Google Optimize allows you to offer multiple variants of a website's
      content or structure in order to determine the version that obtains the
      best results from users, also known as A/B testing, and to personalise a
      website based on how it is utilised by its users. This tool is provided by
      Google.

This component allows you to display a Cookies consent banner including an advanced settings dialog that lets the user enable cookies per services.

The “Accept all” button triggers a callback you can use to load all services. The “Decline all” button triggers a callback you can use to remember no services should be loaded. Remember that this should only be used to save the user preferences, services using cookies shouldn’t be loaded prior to user agreement.

Note that such banner should come with a privacy policy page.

Initialization

window.addEventListener('DOMContentLoaded', function() {
  var cookiesBannerNode = document.querySelector('#cookies-banner');
  if (cookiesBannerNode) {
    var cookiesBanner = new Styleguide.CookiesBanner(cookiesBannerNode, {
      settingsDialog: '#id-of-the-settings-dialog',
      onAcceptAll: function() {
        console.log('Accepted all cookies!');
      },
      onDeclineAll: function() {
        console.log('Declined all cookies!');
      },
      onToggle: function(name, enabled, values) {
        console.log('Toggle cookie consent for', name, enabled, values);
      },
      onToggleAll: function(enabled, values) {
        console.log('Toggle all', enabled, values);
      }
    });
    cookiesBanner.show();
  }
})

Options

  • settingsDialog String (default: null) A valid selector to the settings Dialog
  • onToggle Function (default: null) Callback when one service status is toggled
  • onToggleAll Function (default: null) Callback when all services status is toggled
  • onAcceptAll Function (default: null) Callback when “Accept all” button is clicked
  • onDeclineAll Function (default: null) Callback when “Decline all” button is clicked

Methods

  • show Display the dialog
  • hide Hide the dialog
  • getValues Return an object with all services and their corresponding state