Organisms
Featured Articles
Usage : {{> featured-articles }}
Options :
- featured-title - String
<div class="sandy">
<div class="spacer spacer-sm"></div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image relative-wrapper">
<div class="bottom-wrapper">
<h3>Omega European Master</h3>
<button class="icon-button icon-button-plain">
<span class="button-label-wrapper">
<span class="button-label">
Voir la galerie
</span>
</span>
<i class="voticons voticons-camera"></i>
</button>
</div>
<div id="thumbnail-carousel-1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="absolute-wrapper gradient"></div>
<img src="../build/img/vot-demo-05.jpg" class="img-responsive">
</div>
<div class="item">
<div class="absolute-wrapper gradient"></div>
<img src="../build/img/vot-demo-09.jpg" class="img-responsive">
</div>
<div class="item">
<div class="absolute-wrapper gradient"></div>
<img src="../build/img/vot-demo-14.jpg" class="img-responsive">
</div>
<div class="item">
<div class="absolute-wrapper gradient"></div>
<img src="https://unsplash.it/400/370/?random" class="img-responsive">
</div>
</div>
<button class="left carousel-control" href="#thumbnail-carousel-1" role="button" data-slide="prev">
<i class="voticons voticons-chevron-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</button>
<button class="right carousel-control" href="#thumbnail-carousel-1" role="button" data-slide="next">
<i class="voticons voticons-chevron-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</button>
</div>
</div>
<div class="caption">
<p>
Matteo Manassero sera à Crans-Montana!
</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image relative-wrapper">
<div class="absolute-wrapper gradient"></div>
<div class="bottom-wrapper">
<h3>Omega European Master</h3>
<button class="icon-button icon-button-plain">
<span class="button-label-wrapper">
<span class="button-label">
En savoir plus
</span>
</span>
<i class="voticons voticons-pen"></i>
</button>
</div>
<img src="../build/img/vot-demo-14.jpg" class="img-responsive">
</div>
<div class="caption">
<p>
Tournoi saison 2015
</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image relative-wrapper">
<div class="absolute-wrapper gradient"></div>
<div class="bottom-wrapper">
<h3>Montreux Jazz 2014</h3>
<button class="icon-button icon-button-plain">
<span class="button-label-wrapper">
<span class="button-label">
Voir la vidéo
</span>
</span>
<i class="voticons voticons-play"></i>
</button>
</div>
<img src="../build/img/vot-demo-09.jpg" class="img-responsive">
</div>
<div class="caption">
<p>
Montreux Jazz Festival 2014 : Vidéo – Behind The Scenes
</p>
</div>
</a>
</div>
</div>
</div>
<div class="spacer spacer-sm"></div>
</div>Featured Athletism
<div class="sandy">
<div class="spacer spacer-sm"></div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image relative-wrapper">
<div class="absolute-wrapper gradient"></div>
<div class="bottom-wrapper">
<h3>20 km de Lausanne</h3>
<button class="icon-button icon-button-plain">
<span class="button-label-wrapper">
<span class="button-label">
En savoir plus
</span>
</span>
<i class="voticons voticons-chevron-right"></i>
</button>
</div>
<img src="../build/img/vot-demo-17.jpg" class="img-responsive">
</div>
<div class="caption">
<p>
Toutes les infos sur le 20 km de Lausanne
</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image relative-wrapper">
<div class="absolute-wrapper gradient"></div>
<div class="bottom-wrapper">
<h3>Weltklasse Zürich</h3>
<button class="icon-button icon-button-plain">
<span class="button-label-wrapper">
<span class="button-label">
En savoir plus
</span>
</span>
<i class="voticons voticons-chevron-right"></i>
</button>
</div>
<img src="../build/img/vot-demo-18.jpg" class="img-responsive">
</div>
<div class="caption">
<p>
Toutes les infos sur le Weltklasse Zürich
</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image relative-wrapper">
<div class="absolute-wrapper gradient"></div>
<div class="bottom-wrapper">
<h3>Athletissima</h3>
<button class="icon-button icon-button-plain">
<span class="button-label-wrapper">
<span class="button-label">
En savoir plus
</span>
</span>
<i class="voticons voticons-chevron-right"></i>
</button>
</div>
<img src="../build/img/vot-demo-21.jpg" class="img-responsive">
</div>
<div class="caption">
<p>
Toutes les infos sur le Athletissima
</p>
</div>
</a>
</div>
</div>
</div>
<div class="spacer spacer-sm"></div>
</div>Featured Cyclism
<div class="sandy">
<div class="spacer spacer-sm"></div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image relative-wrapper">
<div class="absolute-wrapper gradient"></div>
<div class="bottom-wrapper">
<h3>Tour de Romandie</h3>
<button class="icon-button icon-button-plain">
<span class="button-label-wrapper">
<span class="button-label">
En savoir plus
</span>
</span>
<i class="voticons voticons-chevron-right"></i>
</button>
</div>
<img src="../build/img/vot-demo-05.jpg" class="img-responsive">
</div>
<div class="caption">
<p>
Toutes les infos sur le Tour de Romandie
</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image relative-wrapper">
<div class="absolute-wrapper gradient"></div>
<div class="bottom-wrapper">
<h3>Tour de Suisse</h3>
<button class="icon-button icon-button-plain">
<span class="button-label-wrapper">
<span class="button-label">
En savoir plus
</span>
</span>
<i class="voticons voticons-chevron-right"></i>
</button>
</div>
<img src="../build/img/vot-demo-14.jpg" class="img-responsive">
</div>
<div class="caption">
<p>
Toutes les infos sur le Tour de Suisse
</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image relative-wrapper">
<div class="absolute-wrapper gradient"></div>
<div class="bottom-wrapper">
<h3>Swiss Cycling</h3>
<button class="icon-button icon-button-plain">
<span class="button-label-wrapper">
<span class="button-label">
En savoir plus
</span>
</span>
<i class="voticons voticons-chevron-right"></i>
</button>
</div>
<img src="../build/img/vot-demo-16.jpg" class="img-responsive">
</div>
<div class="caption">
<p>
Toutes les infos sur le Swiss Cycling
</p>
</div>
</a>
</div>
</div>
</div>
<div class="spacer spacer-sm"></div>
</div>Featured Golf
<div class="sandy">
<div class="spacer spacer-sm"></div>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image relative-wrapper">
<div class="absolute-wrapper gradient"></div>
<div class="bottom-wrapper">
<h3>Omega European Masters</h3>
<button class="icon-button icon-button-plain">
<span class="button-label-wrapper">
<span class="button-label">
En savoir plus
</span>
</span>
<i class="voticons voticons-chevron-right"></i>
</button>
</div>
<img src="../build/img/vot-demo-02.jpg" class="img-responsive">
</div>
<div class="caption">
<p>
Toutes les infos sur le Omega European Masters
</p>
</div>
</a>
</div>
</div>
</div>
<div class="spacer spacer-sm"></div>
</div>Featured Music
<div class="sandy">
<div class="spacer spacer-sm"></div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image relative-wrapper">
<div class="absolute-wrapper gradient"></div>
<div class="bottom-wrapper">
<h3>Lucerne Blues</h3>
<button class="icon-button icon-button-plain">
<span class="button-label-wrapper">
<span class="button-label">
En savoir plus
</span>
</span>
<i class="voticons voticons-chevron-right"></i>
</button>
</div>
<img src="../build/img/vot-demo-10.jpg" class="img-responsive">
</div>
<div class="caption">
<p>
Consultez la programmation de l’édition 2015
</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image relative-wrapper">
<div class="absolute-wrapper gradient"></div>
<div class="bottom-wrapper">
<h3>Blues ‘n’ Jazz Rapperswill</h3>
<button class="icon-button icon-button-plain">
<span class="button-label-wrapper">
<span class="button-label">
En savoir plus
</span>
</span>
<i class="voticons voticons-chevron-right"></i>
</button>
</div>
<img src="../build/img/vot-demo-19.jpg" class="img-responsive">
</div>
<div class="caption">
<p>
Festival de Blues ‘n’ Jazz Rapperswill 2015
</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image relative-wrapper">
<div class="absolute-wrapper gradient"></div>
<div class="bottom-wrapper">
<h3>Théâtre Equilibre-Nuithonie</h3>
<button class="icon-button icon-button-plain">
<span class="button-label-wrapper">
<span class="button-label">
En savoir plus
</span>
</span>
<i class="voticons voticons-chevron-right"></i>
</button>
</div>
<img src="../build/img/vot-demo-22.jpg" class="img-responsive">
</div>
<div class="caption">
<p>
Toutes les actualités et agendas du théâtre Equilibre-Nuithonie
</p>
</div>
</a>
</div>
</div>
<h4 class="text-muted">Ils pourraient aussi vous intéresser…</h4>
<ul class="text-primary">
<li><a href="#">Sion festival</a></li>
<li><a href="#">Solothurn Classics</a></li>
</ul>
</div>
<div class="spacer spacer-sm"></div>
</div>Gallery
<div id="demo-test-gallery" class="gallery">
<div class="row">
<a href="../build/img/vot-demo-05.jpg" class="col-sm-3" data-size="1200x1110" data-med="../build/img/vot-demo-05.jpg" data-med-size="800x740" data-author="Anonymous" class="demo-gallery__img--main">
<img src="../build/img/vot-demo-05.jpg" class="img-responsive" alt="alternate text" />
</a>
<a href="../build/img/vot-demo-14.jpg" class="col-sm-3" data-size="1200x1110" data-med="../build/img/vot-demo-14.jpg" data-med-size="800x740" data-author="Anonymous" class="demo-gallery__img--main">
<img src="../build/img/vot-demo-14.jpg" class="img-responsive" alt="alternate text" />
</a>
<a href="../build/img/vot-demo-16.jpg" class="col-sm-3" data-size="1200x1110" data-med="../build/img/vot-demo-16.jpg" data-med-size="800x740" data-author="Anonymous" class="demo-gallery__img--main">
<img src="../build/img/vot-demo-16.jpg" class="img-responsive" alt="alternate text" />
</a>
<a href="../build/img/vot-demo-05.jpg" class="col-sm-3" data-size="1200x1110" data-med="../build/img/vot-demo-05.jpg" data-med-size="800x740" data-author="Anonymous" class="demo-gallery__img--main">
<img src="../build/img/vot-demo-05.jpg" class="img-responsive" alt="alternate text" />
</a>
<a href="../build/img/vot-demo-14.jpg" class="col-sm-3" data-size="1200x1110" data-med="../build/img/vot-demo-14.jpg" data-med-size="800x740" data-author="Anonymous" class="demo-gallery__img--main">
<img src="../build/img/vot-demo-14.jpg" class="img-responsive" alt="alternate text" />
</a>
<a href="../build/img/vot-demo-16.jpg" class="col-sm-3" data-size="1200x1110" data-med="../build/img/vot-demo-16.jpg" data-med-size="800x740" data-author="Anonymous" class="demo-gallery__img--main">
<img src="../build/img/vot-demo-16.jpg" class="img-responsive" alt="alternate text" />
</a>
</div>
</div>
<div id="gallery" class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<!-- <div class="pswp__loading-indicator"><div class="pswp__loading-indicator__line"></div></div> -->
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip">
<!-- <a href="#" class="pswp__share--facebook"></a>
<a href="#" class="pswp__share--twitter"></a>
<a href="#" class="pswp__share--pinterest"></a>
<a href="#" download class="pswp__share--download"></a> -->
</div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center">
</div>
</div>
</div>
</div>
</div>Header
If cover is defined or true in the context page, the header will be in absolute with the .header-oncover. Otherwise, the .salemy class will be added for a green background.
<header class="salemy">
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="navbar-header col-sm-3">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="./build/svg/vot-logo.svg" onerror="this.onerror=null; this.src='./build/img/vot-logo.png'" class="img-responsive" />
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav text-center col-sm-7">
<li><a href="homepage.html">Accueil</a></li>
<li><a href="ontour.html">On tour</a></li>
<li><a href="concours.html">Concours</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-lang text-right col-sm-2">
<li class="active"><a href="#">FR <span class="sr-only">(current)</span></a></li>
<li><a href="#">DE</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="social-pill-wrapper">
<div class="social-pill">
<i class="voticons voticons-heart icon-heart" data-toggle="tooltip" data-placement="auto" title="Follow us"></i>
<a href="#" class="icon-circle icon-facebook"><i class="voticons voticons-facebook"></i></a>
<a href="#" class="icon-circle icon-twitter"><i class="voticons voticons-twitter"></i></a>
<a href="#" class="icon-circle icon-youtube"><i class="voticons voticons-youtube"></i></a>
</div>
</div>
</header>Partners
Nos partenaires
<div class="sandy">
<div class="spacer spacer-sm"></div>
<div class="container">
<h6>Nos partenaires</h6>
<div class="row">
<div class="col-sm-2 col-xs-4">
<div class="partner">
<a href="#">
<img src="../build/img/partners-20km-de-lausanne.png" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div class="partner">
<a href="#">
<img src="../build/img/partners-athletissima.png" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div class="partner">
<a href="#">
<img src="../build/img/partners-montreux-jazz.png" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div class="partner">
<a href="#">
<img src="../build/img/partners-nuithonie.png" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div class="partner">
<a href="#">
<img src="../build/img/partners-omega.png" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div class="partner">
<a href="#">
<img src="../build/img/partners-opera-de-lausanne.png" class="img-responsive">
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-4">
<div class="partner">
<a href="#">
<img src="../build/img/partners-swiss-cycling.png" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div class="partner">
<a href="#">
<img src="../build/img/partners-tour-de-romandie.png" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div class="partner">
<a href="#">
<img src="../build/img/partners-tour-de-suisse.png" class="img-responsive">
</a>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div class="partner">
<a href="#">
<img src="../build/img/partners-weltklasse-zurich.png" class="img-responsive">
</a>
</div>
</div>
</div>
</div>
<div class="spacer spacer-sm"></div>
</div>Sitemap
<div class="salemy sitemap">
<div class="spacer spacer-sm"></div>
<div class="container">
<div class="row">
<div class="col-sm-2">
<h5 class="heading-underlined"><a href="#">Accueil</a></h5>
</div>
<div class="col-sm-5">
<h5 class="heading-underlined"><a href="#">On Tour</a></h5>
<div class="row">
<div class="col-sm-6">
<h6 class="text-uppercase"><a href="#">Culture</a></h6>
<ul class="list-unstyled">
<li><a href="#">Musique & culture</a></li>
<li><a href="#">Montreux Jazz Festival</a></li>
<li><a href="#">Lucernes Blues</a></li>
<li><a href="#">Solothurn Classics</a></li>
<li><a href="#">Blues ‘n’ jazz Rapperswill</a></li>
<li><a href="#">Opéra de Lausanne</a></li>
<li><a href="#">Théâtre équilibre-Nuithonie</a></li>
<li><a href="#">Sion Festival</a></li>
</ul>
</div>
<div class="col-sm-6">
<h6 class="text-uppercase"><a href="#">Sports</a></h6>
<p>Golf</p>
<ul class="list-unstyled">
<li><a href="#">Omega European Masters</a></li>
</ul>
<div class="spacer spacer-xs"></div>
<p>Cyclisme</p>
<ul class="list-unstyled">
<li><a href="#">Tour de Romandie</a></li>
<li><a href="#">Tour de Suisse</a></li>
<li><a href="#">Swiss Cycling</a></li>
</ul>
<div class="spacer spacer-xs"></div>
<p>Athlétisme</p>
<ul class="list-unstyled">
<li><a href="#">20KM Lausanne</a></li>
<li><a href="#">Weltklasse Zürich</a></li>
<li><a href="#">Athletissima</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-2">
<h5 class="heading-underlined"><a href="#">Concours</a></h5>
<ul class="list-unstyled">
<li><a href="#">Concours A</a></li>
<li><a href="#">Concours B</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5 class="heading-underlined"><a href="#">Contact</a></h5>
<ul class="list-unstyled">
<li><a href="#">Vaudoise Assurances</a></li>
<li><a href="#">click2drive.ch - L’assurance auto en ligne</a></li>
<li><a href="#">click2drive.ch - L’assurance moto en ligne</a></li>
<li><a href="#">vaudoiseontour.ch</a></li>
</ul>
</div>
</div>
</div>
<div class="spacer spacer-sm"></div>
</div>