Web Styleguide
- 8.1.0
-
<div class="master">
<div class="navbar navbar--sticky">
<div class="navbar__body">
<a href="#" class="navbar__brand" title="Liip">
<div class="logo">
<svg class="logo__L" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.7 49">
<path d="M0.1,46.8h29.6v-9.7H11.2V2.5H0.4v44.3H0.1z M0.1,46.8h29.6v-9.7H11.2V2.5H0.4v44.3H0.1z"></path>
</svg>
<svg class="logo__II" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.8 49">
<path d="M13.5,48.3L35.2,5.1l-9.6-4.9L3.8,43.4L13.5,48.3 M38.6,48.3L60.4,5.1l-9.7-4.9L28.9,43.4
L38.6,48.3"></path>
</svg>
<svg class="logo__P" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.9 49">
<path d="M3.4,2.5v44.3h10.8V31h6.6c9.8,0,15-7,15-14.2c0-7.3-5.3-14.2-15-14.2H3.4L3.4,2.5z M14.3,12.3
h6.1c3,0,4.7,2.2,4.7,4.5s-1.7,4.5-4.7,4.5h-6.1V12.3L14.3,12.3z"></path>
</svg>
</div>
</a>
<button class="navbar__toggle btn btn--bare" data-toggle="collapse" data-target=".navbar__collapse" title="Toggle navbar">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="navbar-hamburger icon">
<rect x="4" y="5" width="16" height="2" class="navbar-hamburger__first" />
<rect x="4" y="11" width="16" height="2" class="navbar-hamburger__second" />
<rect x="4" y="17" width="16" height="2" class="navbar-hamburger__third" />
</svg>
</button>
<nav class="navbar__collapse collapse">
<ul class="navbar-menu">
<li><a href="#" class="navbar-menu__link">Services</a></li>
<li><a href="#" class="navbar-menu__link">Projects</a></li>
<li><a href="#" class="navbar-menu__link">Team</a></li>
<li><a href="#" class="navbar-menu__link">Blog</a></li>
</ul>
</nav>
</div>
</div>
<main>
<div class="section section--fit section--behind-navbar">
<div class="section__body">
<div class="grid">
<div class="grid__item md-w-1/2">
<div class="haiku">
<div class="haiku__intro">Tuesday 10:21</div>
<div class="haiku__title"><span class="haiku__number">150</span> self managed employees <a href="#">crafting digital solutions</a></div>
</div>
</div>
</div>
</div>
<div class="section__continue">
<svg class="icon icon--chevron-down icon--100 md-icon--200">
<use xlink:href="../../assets/icons.svg#chevron-down" />
</svg>
</div>
</div>
<div class="section">
<div class="section__body">
<ul class="expertises-tiles">
<li class="expertise-tiles__item">
<a href="#" class="expertise-tile">
<div class="expertise-tile__body">
<svg class="icon icon--ecommerce expertise-tile__icon icon--150 sm-icon--200">
<use xlink:href="../../assets/icons.svg#ecommerce" />
</svg>
<div class="expertise-tile__title h3 mrgt">
E-commerce
</div>
<div class="expertise-tile__teaser">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
</div>
</div>
</a>
</li>
<li class="expertise-tiles__item">
<a href="#" class="expertise-tile">
<div class="expertise-tile__body">
<svg class="icon icon--content-management expertise-tile__icon icon--150 sm-icon--200">
<use xlink:href="../../assets/icons.svg#content-management" />
</svg>
<div class="expertise-tile__title h3 mrgt">
Content Management
</div>
<div class="expertise-tile__teaser">
Lorem ipsum dolor.
</div>
</div>
</a>
</li>
<li class="expertise-tiles__item">
<a href="#" class="expertise-tile">
<div class="expertise-tile__body">
<svg class="icon icon--user-experience expertise-tile__icon icon--150 sm-icon--200">
<use xlink:href="../../assets/icons.svg#user-experience" />
</svg>
<div class="expertise-tile__title h3 mrgt">
User Experience
</div>
<div class="expertise-tile__teaser">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
</div>
</div>
</a>
</li>
<li class="expertise-tiles__item">
<a href="#" class="expertise-tile">
<div class="expertise-tile__body">
<svg class="icon icon--mobile expertise-tile__icon icon--150 sm-icon--200">
<use xlink:href="../../assets/icons.svg#mobile" />
</svg>
<div class="expertise-tile__title h3 mrgt">
Mobile
</div>
<div class="expertise-tile__teaser">
Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
</div>
</div>
</a>
</li>
<li class="expertise-tiles__item">
<a href="#" class="expertise-tile">
<div class="expertise-tile__body">
<svg class="icon icon--elearning expertise-tile__icon icon--150 sm-icon--200">
<use xlink:href="../../assets/icons.svg#elearning" />
</svg>
<div class="expertise-tile__title h3 mrgt">
E-learning
</div>
<div class="expertise-tile__teaser">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
</div>
</div>
</a>
</li>
<li class="expertise-tiles__item">
<a href="#" class="expertise-tile">
<div class="expertise-tile__body">
<svg class="icon icon--api expertise-tile__icon icon--150 sm-icon--200">
<use xlink:href="../../assets/icons.svg#api" />
</svg>
<div class="expertise-tile__title h3 mrgt">
API
</div>
<div class="expertise-tile__teaser">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</div>
</a>
</li>
<li class="expertise-tiles__item">
<a href="#" class="expertise-tile">
<div class="expertise-tile__body">
<svg class="icon icon--open-source expertise-tile__icon icon--150 sm-icon--200">
<use xlink:href="../../assets/icons.svg#open-source" />
</svg>
<div class="expertise-tile__title h3 mrgt">
Open Data
</div>
<div class="expertise-tile__teaser">
Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
</div>
</div>
</a>
</li>
<li class="expertise-tiles__item">
<a href="#" class="expertise-tile">
<div class="expertise-tile__body">
<svg class="icon icon--analytics expertise-tile__icon icon--150 sm-icon--200">
<use xlink:href="../../assets/icons.svg#analytics" />
</svg>
<div class="expertise-tile__title h3 mrgt">
Analytics
</div>
<div class="expertise-tile__teaser">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
</div>
</div>
</a>
</li>
<li class="expertise-tiles__item">
<a href="#" class="expertise-tile">
<div class="expertise-tile__body">
<svg class="icon icon--fintech expertise-tile__icon icon--150 sm-icon--200">
<use xlink:href="../../assets/icons.svg#fintech" />
</svg>
<div class="expertise-tile__title h3 mrgt">
Finance
</div>
<div class="expertise-tile__teaser">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</div>
</a>
</li>
<li class="expertise-tiles__item">
<a href="#" class="expertise-tile">
<div class="expertise-tile__body">
<svg class="icon icon--seo expertise-tile__icon icon--150 sm-icon--200">
<use xlink:href="../../assets/icons.svg#seo" />
</svg>
<div class="expertise-tile__title h3 mrgt">
SEO
</div>
<div class="expertise-tile__teaser">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
</div>
</div>
</a>
</li>
<li class="expertise-tiles__item">
<a href="#" class="expertise-tile">
<div class="expertise-tile__body">
<svg class="icon icon--service-design expertise-tile__icon icon--150 sm-icon--200">
<use xlink:href="../../assets/icons.svg#service-design" />
</svg>
<div class="expertise-tile__title h3 mrgt">
Service Design
</div>
<div class="expertise-tile__teaser">
Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
</div>
</div>
</a>
</li>
<li class="expertise-tiles__item">
<a href="#" class="expertise-tile">
<div class="expertise-tile__body">
<svg class="icon icon--sea expertise-tile__icon icon--150 sm-icon--200">
<use xlink:href="../../assets/icons.svg#sea" />
</svg>
<div class="expertise-tile__title h3 mrgt">
SEA
</div>
<div class="expertise-tile__teaser">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</div>
</a>
</li>
<li class="expertise-tiles__item">
<a href="#" class="expertise-tile">
<div class="expertise-tile__body">
<svg class="icon icon--content expertise-tile__icon icon--150 sm-icon--200">
<use xlink:href="../../assets/icons.svg#content" />
</svg>
<div class="expertise-tile__title h3 mrgt">
Content
</div>
<div class="expertise-tile__teaser">
Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
</div>
</div>
</a>
</li>
<li class="expertise-tiles__item">
<a href="#" class="expertise-tile">
<div class="expertise-tile__body">
<svg class="icon icon--data-science expertise-tile__icon icon--150 sm-icon--200">
<use xlink:href="../../assets/icons.svg#data-science" />
</svg>
<div class="expertise-tile__title h3 mrgt">
Data Science
</div>
<div class="expertise-tile__teaser">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="section">
<div class="section__body">
<div class="grid grid--large grid--multiline">
<div class="grid__item md-w-1/2 lg-w-1/3">
<div class="article-card">
<a href="#" class="article-card__link">
<figure class="image-branded">
<img src="/assets/images/hero/1.jpg" alt="Happy Liipers who just won the Best of Swiss Web gold award in creation" class="img-block">
</figure>
<h3 class="h4 article-card__title">Guacamole toast: a case study in-depth</h3>
<p class="article-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nihil quas error illum, inventore modi commodi voluptates doloribus incidunt saepe in explicabo omnis distinctio fugiat? Velit illo tempora, adipisci aut.</p>
</a>
<a href="#" class="liiper-card media media--middle liiper-card--small media--small">
<div class="media__left">
<div class="liiper-card__avatar avatar" style="background-image:url('https://liip.rokka.io/zebra_squared/1cf73618f9b49243344809df44ea5124765102f6.jpeg')"></div>
</div>
<div class="media__body">
<div class="liiper-card__name">Andreas Amsler</div>
<div class="liiper-card__role">Awesome liiper</div>
</div>
</a>
</div>
</div>
<div class="grid__item md-w-1/2 lg-w-1/3">
<div class="article-card">
<a href="#" class="article-card__link">
<figure class="image-branded">
<img src="/assets/images/hero/1.jpg" alt="Happy Liipers who just won the Best of Swiss Web gold award in creation" class="img-block">
</figure>
<h3 class="h4 article-card__title">Guacamole toast: a case study in-depth</h3>
<p class="article-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nihil quas error illum, inventore modi commodi voluptates doloribus incidunt saepe in explicabo omnis distinctio fugiat? Velit illo tempora, adipisci aut.</p>
</a>
<a href="#" class="liiper-card media media--middle liiper-card--small media--small">
<div class="media__left">
<div class="liiper-card__avatar avatar" style="background-image:url('https://liip.rokka.io/zebra_squared/e9fce3c6a1e86ecb4132aa155e6c287ed155bac2.jpeg')"></div>
</div>
<div class="media__body">
<div class="liiper-card__name">Colin Frei</div>
<div class="liiper-card__role">Awesome liiper</div>
</div>
</a>
</div>
</div>
<div class="grid__item md-w-1/2 lg-w-1/3 hidden-md-down">
<div class="article-card">
<a href="#" class="article-card__link">
<figure class="image-branded">
<img src="/assets/images/hero/1.jpg" alt="Happy Liipers who just won the Best of Swiss Web gold award in creation" class="img-block">
</figure>
<h3 class="h4 article-card__title">Guacamole toast: a case study in-depth</h3>
<p class="article-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nihil quas error illum, inventore modi commodi voluptates doloribus incidunt saepe in explicabo omnis distinctio fugiat? Velit illo tempora, adipisci aut.</p>
</a>
<a href="#" class="liiper-card media media--middle liiper-card--small media--small">
<div class="media__left">
<div class="liiper-card__avatar avatar" style="background-image:url('https://liip.rokka.io/zebra_squared/d9efdc28f4567d83b93ed26a3d385918f52d6354.jpeg')"></div>
</div>
<div class="media__body">
<div class="liiper-card__name">Sonja Nydegger</div>
<div class="liiper-card__role">Awesome liiper</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="section__body">
<h2 class="text-center mrgt0 mrgb+">Contact us</h2>
<form action="" id="contact-form" class="contact-form">
<div class="contact-form__body box box--default md-pdg+">
<div class="contact-form__step-1">
<div class="form-group">
<label for="message" class="field-label pdgt0">Message <abbr class="text-muted" title="Required field">*</abbr></label>
<textarea id="message" name="message" rows="4" class="contact-form__message field field--ghost field--large pdgt0" placeholder="Write your message here…" required></textarea>
</div>
</div>
<div class="contact-form__step-2 collapse">
<div class="pdgt+">
<div class="grid grid--large grid--multiline grid--bottom">
<div class="grid__item sm-w-1/2 xl-w-1/4">
<div class="form-group">
<label for="name" class="field-label pdgt0">Name <abbr class="text-muted" title="Required field">*</abbr></label>
<input type="text" id="name" name="name" class="contact-form__name field field--light field--primary pdgt0" required>
</div>
</div>
<div class="grid__item sm-w-1/2 xl-w-1/4">
<div class="form-group">
<label for="email" class="field-label pdgt0">E-mail <abbr class="text-muted" title="Required field">*</abbr></label>
<input type="email" id="email" name="email" class="contact-form__email field field--light field--primary pdgt0" required>
</div>
</div>
<div class="grid__item sm-w-1/2 xl-w-1/4">
<div class="form-group">
<label for="phone" class="field-label pdgt0">Phone</label>
<input type="text" id="phone" name="phone" class="contact-form__phone field field--light field--primary pdgt0" required>
</div>
</div>
<div class="grid__item sm-w-1/2 xl-w-1/4">
<button type="submit" class="btn btn--primary btn--block">Send</button>
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
var form = document.querySelector('#contact-form');
if (form) {
new Styleguide.ContactForm(form);
}
})
</script>
</div>
</div>
</main>
<footer class="footer">
<div class="section">
<div class="section__body">
<div class="addresses grid grid--multiline">
<div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/5">
<article class="address address--300">
<div class="address__weather">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon icon--200">
<path d="M21.9 10.9c.3-1.1.1-2.3-.6-3.2-.8-1.1-2-1.7-3.3-1.7-1-2.4-3.4-4-6-4-3.4 0-6.2 2.7-6.5 6-3.1.3-5.5 2.9-5.5 6 0 3.3 2.7 6 6 6h13c2.8 0 5-2.2 5-5 0-1.6-.8-3.1-2.1-4.1zM19 19H6c-2.8 0-5-2.2-5-5s2.2-5 5-5c.3 0 .5-.2.5-.5C6.5 5.5 9 3 12 3c2.3 0 4.4 1.5 5.2 3.7.1.2.3.3.5.3 1.1-.1 2.1.4 2.7 1.2.6.9.8 1.8.4 2.8-.1.2 0 .5.2.6 1.2.7 2 2 2 3.4 0 2.2-1.8 4-4 4z" />
<circle cx="12" cy="15.6" r=".7" />
<path d="M12 7.2c-1.4 0-2.6 1.2-2.6 2.6 0 .3.2.5.5.5s.5-.2.5-.5c0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.3 0-.5.2-.5.5V14c0 .3.2.5.5.5s.5-.2.5-.5v-1.6c1.2-.2 2.1-1.3 2.1-2.5 0-1.6-1.2-2.7-2.6-2.7z" />
</svg>
</div>
<h2 class="h4 address__title">Lausanne</h2>
<address class="address__body">
Rue de la Banque 1<br>
PO box 917<br>
CH-1701 Fribourg<br>
Phone: <a href="tel:+41264222511" class="link-text">+41 26 422 25 11</a>
</address>
<a href="#" class="address__map-link">Open Map</a>
</article>
</div>
<div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/5">
<article class="address address--400">
<div class="address__weather">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon icon--200">
<path d="M21.9 10.9c.3-1.1.1-2.3-.6-3.2-.8-1.1-2-1.7-3.3-1.7-1-2.4-3.4-4-6-4-3.4 0-6.2 2.7-6.5 6-3.1.3-5.5 2.9-5.5 6 0 3.3 2.7 6 6 6h13c2.8 0 5-2.2 5-5 0-1.6-.8-3.1-2.1-4.1zM19 19H6c-2.8 0-5-2.2-5-5s2.2-5 5-5c.3 0 .5-.2.5-.5C6.5 5.5 9 3 12 3c2.3 0 4.4 1.5 5.2 3.7.1.2.3.3.5.3 1.1-.1 2.1.4 2.7 1.2.6.9.8 1.8.4 2.8-.1.2 0 .5.2.6 1.2.7 2 2 2 3.4 0 2.2-1.8 4-4 4z" />
<circle cx="12" cy="15.6" r=".7" />
<path d="M12 7.2c-1.4 0-2.6 1.2-2.6 2.6 0 .3.2.5.5.5s.5-.2.5-.5c0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.3 0-.5.2-.5.5V14c0 .3.2.5.5.5s.5-.2.5-.5v-1.6c1.2-.2 2.1-1.3 2.1-2.5 0-1.6-1.2-2.7-2.6-2.7z" />
</svg>
</div>
<h2 class="h4 address__title">Fribourg</h2>
<address class="address__body">
Rue de la Banque 1<br>
PO box 917<br>
CH-1701 Fribourg<br>
Phone: <a href="tel:+41264222511" class="link-text">+41 26 422 25 11</a>
</address>
<a href="#" class="address__map-link">Open Map</a>
</article>
</div>
<div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/5">
<article class="address address--500">
<div class="address__weather">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon icon--200">
<path d="M21.9 10.9c.3-1.1.1-2.3-.6-3.2-.8-1.1-2-1.7-3.3-1.7-1-2.4-3.4-4-6-4-3.4 0-6.2 2.7-6.5 6-3.1.3-5.5 2.9-5.5 6 0 3.3 2.7 6 6 6h13c2.8 0 5-2.2 5-5 0-1.6-.8-3.1-2.1-4.1zM19 19H6c-2.8 0-5-2.2-5-5s2.2-5 5-5c.3 0 .5-.2.5-.5C6.5 5.5 9 3 12 3c2.3 0 4.4 1.5 5.2 3.7.1.2.3.3.5.3 1.1-.1 2.1.4 2.7 1.2.6.9.8 1.8.4 2.8-.1.2 0 .5.2.6 1.2.7 2 2 2 3.4 0 2.2-1.8 4-4 4z" />
<circle cx="12" cy="15.6" r=".7" />
<path d="M12 7.2c-1.4 0-2.6 1.2-2.6 2.6 0 .3.2.5.5.5s.5-.2.5-.5c0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.3 0-.5.2-.5.5V14c0 .3.2.5.5.5s.5-.2.5-.5v-1.6c1.2-.2 2.1-1.3 2.1-2.5 0-1.6-1.2-2.7-2.6-2.7z" />
</svg>
</div>
<h2 class="h4 address__title">Bern</h2>
<address class="address__body">
Rue de la Banque 1<br>
PO box 917<br>
CH-1701 Fribourg<br>
Phone: <a href="tel:+41264222511" class="link-text">+41 26 422 25 11</a>
</address>
<a href="#" class="address__map-link">Open Map</a>
</article>
</div>
<div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/5">
<article class="address address--600">
<div class="address__weather">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon icon--200">
<path d="M21.9 10.9c.3-1.1.1-2.3-.6-3.2-.8-1.1-2-1.7-3.3-1.7-1-2.4-3.4-4-6-4-3.4 0-6.2 2.7-6.5 6-3.1.3-5.5 2.9-5.5 6 0 3.3 2.7 6 6 6h13c2.8 0 5-2.2 5-5 0-1.6-.8-3.1-2.1-4.1zM19 19H6c-2.8 0-5-2.2-5-5s2.2-5 5-5c.3 0 .5-.2.5-.5C6.5 5.5 9 3 12 3c2.3 0 4.4 1.5 5.2 3.7.1.2.3.3.5.3 1.1-.1 2.1.4 2.7 1.2.6.9.8 1.8.4 2.8-.1.2 0 .5.2.6 1.2.7 2 2 2 3.4 0 2.2-1.8 4-4 4z" />
<circle cx="12" cy="15.6" r=".7" />
<path d="M12 7.2c-1.4 0-2.6 1.2-2.6 2.6 0 .3.2.5.5.5s.5-.2.5-.5c0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.3 0-.5.2-.5.5V14c0 .3.2.5.5.5s.5-.2.5-.5v-1.6c1.2-.2 2.1-1.3 2.1-2.5 0-1.6-1.2-2.7-2.6-2.7z" />
</svg>
</div>
<h2 class="h4 address__title">Zürich</h2>
<address class="address__body">
Rue de la Banque 1<br>
PO box 917<br>
CH-1701 Fribourg<br>
Phone: <a href="tel:+41264222511" class="link-text">+41 26 422 25 11</a>
</address>
<a href="#" class="address__map-link">Open Map</a>
</article>
</div>
<div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/5">
<article class="address address--700">
<div class="address__weather">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon icon--200">
<path d="M21.9 10.9c.3-1.1.1-2.3-.6-3.2-.8-1.1-2-1.7-3.3-1.7-1-2.4-3.4-4-6-4-3.4 0-6.2 2.7-6.5 6-3.1.3-5.5 2.9-5.5 6 0 3.3 2.7 6 6 6h13c2.8 0 5-2.2 5-5 0-1.6-.8-3.1-2.1-4.1zM19 19H6c-2.8 0-5-2.2-5-5s2.2-5 5-5c.3 0 .5-.2.5-.5C6.5 5.5 9 3 12 3c2.3 0 4.4 1.5 5.2 3.7.1.2.3.3.5.3 1.1-.1 2.1.4 2.7 1.2.6.9.8 1.8.4 2.8-.1.2 0 .5.2.6 1.2.7 2 2 2 3.4 0 2.2-1.8 4-4 4z" />
<circle cx="12" cy="15.6" r=".7" />
<path d="M12 7.2c-1.4 0-2.6 1.2-2.6 2.6 0 .3.2.5.5.5s.5-.2.5-.5c0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.3 0-.5.2-.5.5V14c0 .3.2.5.5.5s.5-.2.5-.5v-1.6c1.2-.2 2.1-1.3 2.1-2.5 0-1.6-1.2-2.7-2.6-2.7z" />
</svg>
</div>
<h2 class="h4 address__title">St Gallen</h2>
<address class="address__body">
Rue de la Banque 1<br>
PO box 917<br>
CH-1701 Fribourg<br>
Phone: <a href="tel:+41264222511" class="link-text">+41 26 422 25 11</a>
</address>
<a href="#" class="address__map-link">Open Map</a>
</article>
</div>
</div>
</div>
</div>
<hr class="mrgv0">
<div class="section pdgv md-pdgv+">
<div class="section__body">
<ul class="list-inline list-inline--tight list-inline--center">
<li class="mrgv-- mrgh- md-mrgh"><a href="#" class="btn btn--bare">Jobs</a></li>
<li class="mrgv-- mrgh- md-mrgh"><a href="#" class="btn btn--bare">Contact</a></li>
<li class="mrgv-- mrgh- md-mrgh"><a href="#" class="btn btn--bare">Open-source</a></li>
<li class="mrgv-- mrgh- md-mrgh"><a href="#" class="btn btn--bare">Press</a></li>
<li class="mrgv-- mrgh- md-mrgh"><a href="#" class="btn btn--bare">Code of Conduct</a></li>
<li class="mrgv-- mrgh- md-mrgh"><a href="#" class="btn btn--bare">Privacy Policy</a></li>
<li class="mrgv-- mrgh- md-mrgh"><a href="#" class="btn btn--bare">Impressum</a></li>
</ul>
</div>
</div>
<hr class="mrgv0">
<div class="section">
<div class="section__body">
<div class="grid grid--large grid--middle grid--multiline">
<div class="grid__item sm-w-1/2 lg-w-2/3">
<ul class="actions">
<li>
<label for="language-switcher" class="visible-sr">Language</label>
<select class="language-switcher field " id="language-switcher">
<option>English</option>
<option>Deutsch</option>
<option>Français</option>
</select>
</li>
</ul>
</div>
<div class="grid__item sm-w-1/2 lg-w-1/3">
<ul class="list-inline list-inline--justified">
<li>
<a href="https://www.facebook.com/liipag" class="link-text" title="Facebook">
<svg class="icon icon--facebook icon--100 md-icon--150">
<use xlink:href="../../assets/icons.svg#facebook" />
</svg>
</a>
</li>
<li>
<a href="https://twitter.com/liip" class="link-text" title="Twitter">
<svg class="icon icon--twitter icon--100 md-icon--150">
<use xlink:href="../../assets/icons.svg#twitter" />
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/liip_ch" class="link-text" title="Instagram">
<svg class="icon icon--instagram icon--100 md-icon--150">
<use xlink:href="../../assets/icons.svg#instagram" />
</svg>
</a>
</li>
<li>
<a href="https://github.com/liip" class="link-text" title="GitHub">
<svg class="icon icon--github icon--100 md-icon--150">
<use xlink:href="../../assets/icons.svg#github" />
</svg>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/267051" class="link-text" title="LinkedIn">
<svg class="icon icon--linkedin icon--100 md-icon--150">
<use xlink:href="../../assets/icons.svg#linkedin" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-text" title="RSS Feed">
<svg class="icon icon--rss icon--100 md-icon--150">
<use xlink:href="../../assets/icons.svg#rss" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
<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 id="cookies-banner-dialog" class="dialog" aria-hidden="true" aria-labelledby="cookies-banner-dialog-dialog-title">
<div class="dialog-overlay" data-a11y-dialog-hide></div>
<div class="dialog-content" role="document">
<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'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>
<script>
window.addEventListener('DOMContentLoaded', function() {
var navbar = document.querySelector('.navbar');
new Styleguide.Navbar(navbar);
});
</script>
<div class="master">
{% render '@navbar', { modifier: 'navbar--sticky' } %}
<main>
<div class="section section--fit section--behind-navbar">
<div class="section__body">
<div class="grid">
<div class="grid__item md-w-1/2">
{% render '@sentence--default' %}
</div>
</div>
</div>
<div class="section__continue">
{% render '@icon', { id: "chevron-down", class: "icon--100 md-icon--200" } %}
</div>
</div>
<div class="section">
<div class="section__body">
{% render '@expertises-tiles' %}
</div>
</div>
<div class="section">
<div class="section__body">
{% render '@article-cards-list' %}
</div>
</div>
<div class="section">
<div class="section__body">
<h2 class="text-center mrgt0 mrgb+">Contact us</h2>
{% render '@contact-form' %}
</div>
</div>
</main>
{% render '@footer' %}
</div>
{% render '@cookies-banner' %}
<script>
window.addEventListener('DOMContentLoaded', function() {
var navbar = document.querySelector('.navbar');
new Styleguide.Navbar(navbar);
});
</script>
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
- Handle: @home
- Preview:
- Filesystem Path: components/04-example-pages/home.nunj
- References (8): @navbar, @sentence--default, @icon, @expertises-tiles, @article-cards-list, @contact-form, @footer, @cookies-banner
No notes defined.