Molecules

Calendar

Événements à venir
Tour de Romandie 2015
28 avril 2015
au 3 mai 2015
le Tour de Romandie est avant tout une expérience unique réunissant cyclistes, fans de la petite reine, organisateurs, sponsors et curieux dans une ambiance indescriptible composée d'un mélange de compétition, festivités et détente.

En savoir plus

Tour de Romandie 2015
28 avril 2015
Athletissima
09 Juillet 2015
Montreux Jazz Festival
11 juillet 2015 
<table class="table table-striped table-hover table-calendar">
	<thead class="meadowy">
		<tr>
			<th><i class="voticons voticons-lg voticons-calendar"></i></th>
			<th>
				<h3 class="h2 heading-light">Événements à venir</h3>
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><i class="voticons voticons-lg voticons-bike"></i></td>
			<td>
				<h6>Tour de Romandie 2015</h6>
				<small class="text-uppercase">
          28 avril 2015<br>
          au 3 mai 2015
        </small>
				<div class="spacer spacer-sm"></div>
				<blockquote>
					le Tour de Romandie est avant tout une expérience unique réunissant cyclistes, fans de la petite reine, organisateurs, sponsors et curieux dans une ambiance indescriptible composée d'un mélange de compétition, festivités et détente.
				</blockquote>
				<p>
					<a href="#" class="btn btn-primary">En savoir plus</a>
				</p>
			</td>
		</tr>
		<tr>
			<td><i class="voticons voticons-lg voticons-bike"></i></td>
			<td>
				<div class="row">
					<div class="col-sm-7">
						<h6 class="text-inline">Tour de Romandie 2015</h6>
						<small class="text-uppercase">28 avril 2015</small>
					</div>
					<div class="col-sm-5">
						<div class="spacer spacer-xs"></div>
						<div class="pull-right">
							<button class="icon-button icon-button-sm icon-button-outlined icon-button-outlined-gray">
								<span class="button-label-wrapper">
                  <span class="button-label">
                    En savoir plus
                  </span>
								</span>
								<i class="voticons voticons-chevron-right"></i>
							</button>
						</div>
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td><i class="voticons voticons-lg voticons-runner"></i></td>
			<td>
				<div class="row">
					<div class="col-sm-7">
						<h6 class="text-inline">Athletissima</h6>
						<small class="text-uppercase">09 Juillet 2015</small>
					</div>
					<div class="col-sm-5">
						<div class="spacer spacer-xs"></div>
						<div class="pull-right">
							<button class="icon-button icon-button-sm icon-button-outlined icon-button-outlined-gray">
								<span class="button-label-wrapper">
                  <span class="button-label">
                    En savoir plus
                  </span>
								</span>
								<i class="voticons voticons-chevron-right"></i>
							</button>
						</div>
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td><i class="voticons voticons-lg voticons-music"></i></td>
			<td>
				<div class="row">
					<div class="col-sm-7">
						<h6 class="text-inline">Montreux Jazz Festival</h6>
						<small class="text-uppercase">11 juillet 2015</small>
					</div>
					<div class="col-sm-5">
						<div class="pull-right">
							<div class="spacer spacer-xs"></div>
							<button class="icon-button icon-button-sm icon-button-outlined icon-button-outlined-gray">
								<span class="button-label-wrapper">
                  <span class="button-label">
                    En savoir plus
                  </span>
								</span>
								<i class="voticons voticons-chevron-right"></i>
							</button>
						</div>
					</div>
				</div>
			</td>
		</tr>
	</tbody>
</table>

Social Pill

<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>

Social Row

<div class="social-row text-center">
	<div class="row">
		<div class="col-sm-4 col-sm-offset-2">
			<div class="spacer spacer-xs"></div>
			<i class="voticons voticons-heart icon-heart" data-toggle="tooltip" data-placement="auto" title="Follow us"></i>
			<small class="text-uppercase"><b>Rejoignez notre communauté</b></small>
		</div>
		<div class="col-sm-4">
			<a href="#" class="icon-circle icon-circle-lg icon-facebook"><i class="voticons voticons-lg voticons-facebook"></i></a>
			<a href="#" class="icon-circle icon-circle-lg icon-twitter"><i class="voticons voticons-lg voticons-twitter"></i></a>
			<a href="#" class="icon-circle icon-circle-lg icon-youtube"><i class="voticons voticons-lg voticons-youtube"></i></a>
		</div>
	</div>
</div>

Thumbnail

Usage : {{> thumbnail }}
Options :
  • thumbnail-title - String
  • thumbnail-img - String
  • thumbnail-carousel - Boolean
  • thumbnail-carousel-first - String
  • thumbnail-carousel-second - String
  • thumbnail-carousel-third - String
  • thumbnail-carousel-fourth - String
  • thumbnail-text - String

title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quaesita enim virtus est. 

<a href="#" class="thumbnail">
	<div class="thumbnail-image relative-wrapper">
		<div class="absolute-wrapper gradient"></div>
		<div class="bottom-wrapper">
			<h3>title</h3>
			<button class="icon-button icon-button-plain">
				<span class="button-label-wrapper">
          <span class="button-label">
            label
          </span>
				</span>
				<i class="voticons voticons-heart"></i>
			</button>
		</div>

		<img src="https://unsplash.it/400/370/?random" class="img-responsive">


	</div>
	<div class="caption">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quaesita enim virtus est.
		</p>
	</div>
</a>

Thumbnail Cover

Usage : {{> thumbnail-cover }}
Options :

Format

  • thumbnail-large - boolean
  • thumbnail-landscape - boolean
  • thumbnail-medium - boolean

State

  • thumbnail-minimal - boolean

Content

  • thumbnail-voticon - String
  • thumbnail-title - String
  • thumbnail-subtitle - String
  • thumbnail-img - String

title

subtitle
 
<div class="thumbnail-cover">
	<a href="#">
		<div class="absolute-wrapper gradient"></div>


		<div class="bottom-wrapper">
			<div class="container-fluid">

				<div class="row">
					<div class="col-sm-8">
						<i class="voticons voticons-heart voticons-lg"></i>
						<h3 class="h1">title</h3>
						<h5>subtitle</h5>
					</div>
					<div class="col-sm-4 text-right absolute-wrapper pull-right">
						<div class="table-wrapper pull-right">
							<div class="cell-wrapper">
								<button class="icon-button">
									<span class="button-label-wrapper">
                    <span class="button-label">
                      label
                    </span>
									</span>
									<i class="voticons voticons-heart"></i>
								</button>
							</div>
						</div>
					</div>
				</div>
				<div class="spacer spacer-sm"></div>
			</div>
		</div>

		<div class="focuspoint" data-focus-x="0" data-focus-y="-0" data-image-w="" data-image-h="">
			<img src="https://unsplash.it/1920/550/?random" />
		</div>
	</a>
</div>

Thumbnail Cover Landscape

This is an example of the {{> thumbnail-cover }} molecule

Dans le monde des petits pronostics

25 mars 2015
 
<div class="thumbnail-cover thumbnail-cover-landscape">
	<a href="http://google.com">
		<div class="absolute-wrapper gradient"></div>


		<div class="bottom-wrapper">

			<div class="container relative-wrapper">
				<div class="row">
					<div class="col-sm-8">
						<i class="voticons voticons-bike voticons-lg"></i>
						<h3 class="h1">Dans le monde des petits pronostics</h3>
						<h5>25 mars 2015</h5>
					</div>
					<div class="col-sm-4 text-right absolute-wrapper pull-right">
						<div class="table-wrapper pull-right">
							<div class="cell-wrapper">
								<button class="icon-button icon-button-lg icon-button-outlined">
									<span class="button-label-wrapper">
                    <span class="button-label">
                      Lire l&#x27;article
                    </span>
									</span>
									<i class="voticons voticons-pen"></i>
								</button>
							</div>
						</div>
					</div>
				</div>
				<div class="spacer spacer-sm"></div>
			</div>
		</div>

		<div class="focuspoint" data-focus-x="0" data-focus-y="-0" data-image-w="1920" data-image-h="350">
			<img src="../build/img/vot-demo-15.jpg" />
		</div>
	</a>
</div>

Thumbnail Cover Large

This is an example of the {{> thumbnail-cover }} molecule

Tour de Romandie 2015

du 3 au 18 juillet 2015
 
<div class="thumbnail-cover thumbnail-cover-lg">
	<a href="#">
		<div class="absolute-wrapper gradient"></div>


		<div class="bottom-wrapper">
			<div class="container relative-wrapper">

				<div class="row">
					<div class="col-sm-8">
						<i class="voticons voticons-bike voticons-lg"></i>
						<h1>Tour de Romandie 2015</h1>
						<h5>du 3 au 18 juillet 2015</h5>
					</div>
					<div class="col-sm-4 text-right absolute-wrapper pull-right">
						<div class="table-wrapper pull-right">
							<div class="cell-wrapper">
								<button class="icon-button icon-button-lg icon-button-outlined">
									<span class="button-label-wrapper">
                    <span class="button-label">
                      Voir plus
                    </span>
									</span>
									<i class="voticons voticons-chevron-right"></i>
								</button>
							</div>
						</div>
					</div>
				</div>
				<div class="spacer spacer-sm"></div>
			</div>
		</div>

		<div class="focuspoint" data-focus-x="0" data-focus-y="-0" data-image-w="1920" data-image-h="550">
			<img src="build/img/vot-demo-03.jpg" />
		</div>
	</a>
</div>

Thumbnail Cover Medium

This is an example of the {{> thumbnail-cover }} molecule

Grand concours

Tour de Romandie 2015

Participez à notre grand concours et gagnez des week-ends à Amsterdam. 

<div class="thumbnail-cover thumbnail-cover-md">
	<a href="#">
		<div class="absolute-wrapper gradient"></div>


		<div class="bottom-wrapper">
			<div class="container-fluid">

				<div class="row">
					<div class="col-sm-8">
						<i class="voticons voticons-bike voticons-lg"></i>
						<h3 class="h1">Grand concours</h3>
						<h5>Tour de Romandie 2015</h5>
						<p>
							Participez à notre grand concours et gagnez des week-ends à Amsterdam.
						</p>
					</div>
					<div class="col-sm-4 text-right absolute-wrapper pull-right">
						<div class="table-wrapper pull-right">
							<div class="cell-wrapper">
								<button class="icon-button icon-button-lg icon-button-outlined">
									<span class="button-label-wrapper">
                    <span class="button-label">
                      Voir plus
                    </span>
									</span>
									<i class="voticons voticons-chevron-right"></i>
								</button>
							</div>
						</div>
					</div>
				</div>
				<div class="spacer spacer-sm"></div>
			</div>
		</div>

		<div class="focuspoint" data-focus-x="0" data-focus-y="-0" data-image-w="740" data-image-h="400">
			<img src="../build/img/vot-demo-20.jpg" />
		</div>
	</a>
</div>

Thumbnail Cover Minimal

This is an example of the {{> thumbnail-cover }} molecule

<div class="thumbnail-cover thumbnail-cover-landscape">

	<div class="absolute-wrapper gradient"></div>


	<div class="focuspoint" data-focus-x="0" data-focus-y="-0" data-image-w="1920" data-image-h="350">
		<img src="../build/img/vot-demo-11.jpg" />
	</div>

</div>

Tooltips

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</button>

Well

Usage : {{> well }}
Options :
  • modifier - String
  • cotnent - String
Lorem ipsum dolor sit amet, consectetur adipiscing elit. An potest, inquit ille, quicquam esse suavius quam nihil dolere? Philosophi autem in suis lectulis plerumque moriuntur. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. 
<div class="well">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. An potest, inquit ille, quicquam esse suavius quam nihil dolere? Philosophi autem in suis lectulis plerumque moriuntur. Potius inflammat, ut coercendi magis quam dedocendi esse videantur.
</div>