Molecules

Background Box

Usage : {{> background-box }}

Coordonnées

Rue de Plaisance 2
1400 Yverdon-les-Bains

Accès Google Maps

Contact

daisy@ehnv.ch
Tél. 024 424 54 21
Fax 024 424 54 20

Ouverture du lundi au vendredi, dès 7h du matin. 

<div class="row d-flex">
	<div class="col-sm-6 d-flex">
		<div class="bg-dark-blue w-100">
			<h3 class="h2 font-weight-bold mt-0">Coordonnées</h3>
			<p>
				<a href="#">
					Rue de Plaisance 2<br />
					1400 Yverdon-les-Bains
				</a>
			</p>
			<a href="#" class="btn mb-0">Accès Google Maps</a>
		</div>
	</div>
	<div class="col-sm-6 d-flex">
		<div class="bg-light-blue w-100">
			<h3 class="h2 font-weight-bold mt-0">Contact</h3>
			<p>
				<a href="#">daisy@ehnv.ch</a><br />
				Tél. <a href="#">024 424 54 21</a><br />
				Fax 024 424 54 20
			</p>
			<p class="mb-0">
				Ouverture du lundi au vendredi, dès 7h du matin.
			</p>
		</div>
	</div>
</div>

Card List

Usage : {{> card-list }}

Ouverture à Orbe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat.

Ouverture à Orbe avec un très long titre

www.adressedelapage.ch

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat.

Ouverture à Orbe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat.

 
<div class="row">
	<div class="card-list">
		<div class="card-cell">
			<a href="#" class="card card-square">
				<i class="ehnvicon ehnvicon-long-arrow-right"></i>
				<div class="content">
					<h1>Ouverture à Orbe</h1>
					</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat.</p>
				</div>

			</a> </div>
		<div class="card-cell">
			<a href="#" class="card card-square">
				<i class="ehnvicon ehnvicon-long-arrow-right"></i>
				<div class="content">
					<h1>Ouverture à Orbe avec un très long titre</h1>
					<h2>www.adressedelapage.ch</h2>
					</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat.</p>
				</div>

			</a> </div>
		<div class="card-cell">
			<a href="#" class="card card-square">
				<i class="ehnvicon ehnvicon-long-arrow-right"></i>
				<div class="content">
					<h1>Ouverture à Orbe</h1>
					</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat.</p>
				</div>

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

Color Box

Usage : {{> color-box }}
Options :
  • big-box - Bool
  • title - String

Title

Lorem ipsum dolor sit amet, sed quae tueretur. Sed haec quidem liberius ab eo dicuntur et saepius. Nescio quo modo praetervolavit oratio.

 
<a href="#" class="colox-box ">
	<div class="focuspoint" data-focus-x="0" data-focus-y="0" data-image-w="700" data-image-h="700">
		<img src="https://unsplash.it/700/700/?random" alt="">
	</div>

	<div href="#" class="content">
		<time datetime="2015-10-27"><i class="ehnvicon ehnvicon-clock"></i>27 Octobre 2015</time>
		<h4>Title</h4>
		<p class="excerp">Lorem ipsum dolor sit amet, sed quae tueretur. Sed haec quidem liberius ab eo dicuntur et saepius. Nescio quo modo praetervolavit oratio.</p>
	</div>
</a>

Cover

Usage : {{> cover }}
Options :
  • portrait - Bool
  • portrait-url - String
<div class="cover-container">
	<div class="cover greybg" style="background: url(build/img/bg_cover_infinite.png) center center repeat-x / auto 100%">
		<img src="build/img/bg_cover.png" alt="">
	</div>
	<div class="container portrait-container">
		<div class="col-sm-4 col-md-3 col-md-push-2 col-sm-push-0 col-xs-5">
			<figure class="portrait">
				<div class="icon-placeholder">
					<i class="ehnvicon ehnvicon-placeholder-dr"></i>
				</div>
			</figure>
		</div>
	</div>
</div>

Doc Box

Usage : {{> doc-box }}
48 médecins

Les médecins de DaisY

Consulter la liste 
<div class="doc-box">
	<span class="badge">48 médecins</span>
	<h3 class="h1 font-weight-bold text-dark-blue">Les médecins de DaisY</h3>
	<div class="spacer spacer-sm"></div>
	<a href="#" class="btn btn-primary mb-0">Consulter la liste</a>
</div>

Download List

zip Document 1
pdf Document 1
doc Document 1 
<div class="download-list">
	<div class="link">
		<span class="label lb-sm">zip</span> <a href="#" download="">Document 1 <i class="ehnvicon ehnvicon-download"></i></a>
	</div>
	<div class="link">
		<span class="label">pdf</span> <a href="#" download="">Document 1 <i class="ehnvicon ehnvicon-download"></i></a>
	</div>
	<div class="link">
		<span class="label">doc</span> <a href="#" download="">Document 1 <i class="ehnvicon ehnvicon-download"></i></a>
	</div>
</div>

Entry Footer

Usage : {{> entry-footer }}

Etablissement

Hôpital d’Yverdon-les-Bains
Hôpital de St-Loup

olivier.borens@exemple.ch
079 763 29 04
079 763 29 04 (Fax)
LinkedIn
Skype

Contact

Hôpital d’Yverdon-les-Bains
Hôpital de St-Loup

olivier.borens@exemple.ch
079 763 29 04
079 763 29 04 (Fax)
LinkedIn
Skype

Contact

Hôpital d’Yverdon-les-Bains
Hôpital de St-Loup

olivier.borens@exemple.ch
079 763 29 04
079 763 29 04 (Fax)
LinkedIn
Skype 
<div class="entry-footer">
	<div class="row">
		<div class="col-md-6">
			<div class="contact-infos">
				<h2>Etablissement</h2>
				<a href="#" class="btn btn-link">Hôpital d’Yverdon-les-Bains <i class="ehnvicon ehnvicon-arrow-right"></i></a><br>
				<a href="#" class="btn btn-link">Hôpital de St-Loup <i class="ehnvicon ehnvicon-arrow-right"></i></a><br>
				<br>
				<a href="#">olivier.borens@exemple.ch</a><br>
				<a href="#">079 763 29 04</a><br>
				<a href="#">079 763 29 04 (Fax)</a><br>
				<a href="#">LinkedIn</a><br>
				<a href="#">Skype</a>
			</div>
			<div class="spacer spacer-xl visible-xs-block"></div>

		</div>
		<div class="col-md-6">
			<div class="contact-infos">
				<h2>Contact</h2>
				<a href="#" class="btn btn-link">Hôpital d’Yverdon-les-Bains <i class="ehnvicon ehnvicon-arrow-right"></i></a><br>
				<a href="#" class="btn btn-link">Hôpital de St-Loup <i class="ehnvicon ehnvicon-arrow-right"></i></a><br>
				<br>
				<a href="#">olivier.borens@exemple.ch</a><br>
				<a href="#">079 763 29 04</a><br>
				<a href="#">079 763 29 04 (Fax)</a><br>
				<a href="#">LinkedIn</a><br>
				<a href="#">Skype</a>
			</div>
			<div class="spacer spacer-xl visible-xs-block"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6">
			<div class="contact-infos">
				<h2>Contact</h2>
				<a href="#" class="btn btn-link">Hôpital d’Yverdon-les-Bains <i class="ehnvicon ehnvicon-arrow-right"></i></a><br>
				<a href="#" class="btn btn-link">Hôpital de St-Loup <i class="ehnvicon ehnvicon-arrow-right"></i></a><br>
				<br>
				<a href="#">olivier.borens@exemple.ch</a><br>
				<a href="#">079 763 29 04</a><br>
				<a href="#">079 763 29 04 (Fax)</a><br>
				<a href="#">LinkedIn</a><br>
				<a href="#">Skype</a>
			</div>
			<div class="spacer spacer-xl visible-xs-block"></div>
		</div>
	</div>
</div>

Filter

Usage : {{> filter }}
Options :
  • option - Type
Désactiver les filtres 
<div class="filter">
	<a role="button" data-toggle="collapse" href="#collapse-input-group" aria-expanded="false" aria-controls="collapse-input-group" class="toggle-collapse collapsed">
		<h2>Rechercher un médecin <i class="ehnvicon ehnvicon-arrow-down"></i></h2>
	</a>
	<div class="collapse" id="collapse-input-group">
		<div class="input-group">
			<input type="text" class="form-control" placeholder="Rechercher">
			<span class="input-group-btn">
				<button class="btn btn-primary" type="button">Ok</button>
			</span>
		</div>
	</div>

	<div class="spacer"></div>

	<a role="button" data-toggle="collapse" href="#collapse-tags-select" aria-expanded="false" aria-controls="collapse-tags-select" class="toggle-collapse collapsed">
		<h2>Filtrer par spécialité <i class="ehnvicon ehnvicon-arrow-down"></i></h2>
	</a>
	<div class="collapse" id="collapse-tags-select">
		<select class="form-control tags-select" multiple="multiple">
			<option value="">Pédiatrie</option>
			<option value="">Option 1</option> te
			<option value="">Option 2 </option>
		</select> </div>
	<div class="spacer"></div>

	<a role="button" data-toggle="collapse" href="#collapse-checkbox" aria-expanded="false" aria-controls="collapse-checkbox" class="toggle-collapse collapsed">
		<h2>Filtrer par lieux <i class="ehnvicon ehnvicon-arrow-down"></i></h2>
	</a>
	<div class="collapse" id="collapse-checkbox">
		<div class="checkbox">
			<label><input type="checkbox" value="">&nbsp;Option 2</label>
		</div>
		<div class="checkbox">
			<label><input type="checkbox" value="" checked>&nbsp;Option 18</label>
		</div>
	</div>

	<div class="spacer"></div>

	<a href="#" class="btn btn-default btn-block" role="button">Désactiver les filtres</a>
	<div class="spacer"></div>
	<div class="spacer spacer-xl visible-xs-block"></div>

</div>

Map

Usage : {{> map }}
<div class="map">
	<div class="icons">
		<a style="top:20%;left:25%" data-toggle="tooltip" data-placement="right" title="Tooltip content for this pin" href="#" class="pin">
			<i class="ehnvicon ehnvicon-pin"></i>
		</a>
		<a style="top:40%;left:60%" data-toggle="tooltip" data-placement="bottom" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." href="#" class="pin">
			<i class="ehnvicon ehnvicon-pin"></i>
		</a>
	</div>
	<img class="img-responsive" src="build/img/map.jpg" alt="">
</div>

Mobile Nav

Usage : {{> mobile-nav }}
<button type="button" class="btn toggle-mobile-nav" data-toggle="modal" data-target="#myModal"><i class="ehnvicon ehnvicon-nav"></i>
</button>

<div id="myModal" class="modal fade" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="btn toggle-mobile-nav" data-dismiss="modal"><i class="ehnvicon ehnvicon-close"></i></button>
			</div>
			<div class="modal-body">
				<ul class="nav  main">
					<li>
						<a href="#">Urgences </a>
					</li>
					<li>
						<a href="#">Patient </a>
					</li>
					<li>
						<a href="#">Visiteur </a>
					</li>
					<li>
						<a href="#">Médecins &amp; spécialités </a>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Organisation <i class="ehnvicon ehnvicon-arrow-down"></i>
						</a>
						<ul class="dropdown-menu">
							<li><a href="#">Le conseil de direction</a></li>
							<li><a href="#">L&#x27;association</a></li>
							<li><a href="#">Offrir son aide</a></li>
							<li><a href="#">Transparence et qualité</a></li>
							<li><a href="#">Les eHnv du futur</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Actualités </a>
					</li>
				</ul>
				<ul class="nav   secondary">
					<li>
						<a href="#">Presse</a>
					</li>
					<li>
						<a href="#">Professionnels</a>
					</li>
					<li>
						<a href="#">Emplois</a>
					</li>
					<li>
						<a href="#">Contact</a>
					</li>
				</ul>
			</div>
			<div class="modal-footer">
				<div class="search-box  white ">
					<form class="search-form">
						<input class="text" type="text">
						<button class="submit" type="submit" value="Search"><i class="ehnvicon ehnvicon-search"></i>
						</button>
					</form>

				</div>
			</div>

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

News Box

Usage : {{> news-box }}
Immersion dans le service de pédiatrie
Immersion dans le service de pédiatrie

En lire plus... 

<a href="#" class="news-box ">
	<figure>
		<img src="http://placehold.it/500x300" alt="Immersion dans le service de pédiatrie">
	</figure>
	<div class="content mt-auto">
		<div class="row">
			<div class="col-xs-12">
				<div class="spacer spacer-sm"></div>
				<div class="col-xs-8">
					<h5 class="title"><strong>Immersion dans le service de pédiatrie</strong></h5>
				</div>
				<div class="col-xs-4 text-right">
					<time>
						<i class="ehnvicon ehnvicon-clock"></i>13 février 2017
					</time>
				</div>
				<div class="col-xs-12">
					<div class="spacer spacer-xs"></div>
					<p class="text">
						En lire plus...
					</p>
				</div>
			</div>
		</div>
	</div>
</a>

Peoples

Usage : {{> peoples }}

Dr Bertrand Vuilleumier
Président

Jeannine Rainaud-Meylan
Vice-présidente

Michel Beetschen

Jean-Daniel Carrard

Philippe Dépraz

Isabelle Gay-Crosier

Henri Germond

Vassilis Venizelos

Jean-Claude Nicod

Jacques Levaillant

Christian Kramer

Dr Philippe Hungerbuehler

Catherine Zeiter
Conseil de direction

Jean-François Cardis
Directeur général

Pascal Cotter
Directeur général adjoint

Dr Julien Ombelli
Directeur médical

Christian Kordo
Directrice des soins

Laure Jagiello
Directrice des soins

Christophe Habisreutinger
Directeur de la logistique hospitalière

Nicolas Aubert
Directeur administratif et financier

Véronique Devenoge
Responsable planification et financement

Loïc Favre
Responsable communication

Véronique Gendre
Responsable des ressources humaines

Pierre-François Gérin
Responsable qualité, sécurité et risques

José Gil
Responsable communication

<div class="peoples-container">
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_15@8x.png">
		<p><strong>Dr Bertrand Vuilleumier </strong><br><small>Président</small></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_1@8x.png">
		<p><strong>Jeannine Rainaud-Meylan</strong><br><small>Vice-présidente</small></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_Michel_Beetschen.png">
		<p><strong>Michel Beetschen</strong></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_2@8x.png">
		<p><strong>Jean-Daniel Carrard</strong></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_3@8x.png">
		<p><strong>Philippe Dépraz</strong></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_4@8x.png">
		<p><strong>Isabelle Gay-Crosier</strong></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_Henri_Germond.png">
		<p><strong>Henri Germond</strong></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_5@8x.png">
		<p><strong>Vassilis Venizelos</strong></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_6@8x.png">
		<p><strong>Jean-Claude Nicod</strong></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_7@8x.png">
		<p><strong>Jacques Levaillant</strong></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_8@8x.png">
		<p><strong>Christian Kramer</strong></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_9@8x.png">
		<p><strong>Dr Philippe Hungerbuehler</strong></p>
	</div>

	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_10@8x.png">
		<p><strong>Catherine Zeiter</strong><br><small>Conseil de direction</small></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_11@8x.png">
		<p><strong>Jean-François Cardis</strong><br><small>Directeur général</small></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_12@8x.png">
		<p><strong>Pascal Cotter</strong><br><small>Directeur général adjoint</small></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_13@8x.png">
		<p><strong>Dr Julien Ombelli</strong><br><small>Directeur médical</small></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_14@8x.png">
		<p><strong>Christian Kordo</strong><br><small>Directrice des soins</small></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_20@8x.png">
		<p><strong>Laure Jagiello</strong><br><small>Directrice des soins</small></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_19@8x.png">
		<p><strong>Christophe Habisreutinger</strong><br><small>Directeur de la logistique hospitalière</small></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_18@8x.png">
		<p><strong>Nicolas Aubert</strong><br><small>Directeur administratif et financier</small></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_17@8x.png">
		<p><strong>Véronique Devenoge</strong><br><small>Responsable planification et financement</small></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_16@8x.png">
		<p><strong>Loïc Favre</strong><br><small>Responsable communication</small></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_21@8x.png">
		<p><strong>Véronique Gendre</strong><br><small>Responsable des ressources humaines</small></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_22@8x.png">
		<p><strong>Pierre-François Gérin</strong><br><small>Responsable qualité, sécurité et risques</small></p>
	</div>
	<div class="people">
		<img class="img-responsive" src="build/img/comite/EHNV_Comite_23@8x.png">
		<p><strong>José Gil</strong><br><small>Responsable communication</small></p>
	</div>
</div>

Secondary Nav

Usage : {{> secondary-nav }}
Options :
  • navbar - Bool
  • navbar-right - Bool
<ul class="nav   secondary">
	<li>
		<a href="#">Presse</a>
	</li>
	<li>
		<a href="#">Professionnels</a>
	</li>
	<li>
		<a href="#">Emplois</a>
	</li>
	<li>
		<a href="#">Contact</a>
	</li>
</ul>

Side Nav

Usage : {{> side-nav }}

Centres et hôpitaux

<div class="side-nav">
	<div class="spacer spacer-xs"></div>
	<h3>Centres et hôpitaux</h3>
	<nav>
		<ul>
			<li><a href="#">Hôpital d'Yverdon</a></li>
			<li><a href="#">Hôpital d'Orbe</a></li>
			<li><a href="#">Hôpital de Chamblon</a></li>
			<li><a href="#">Hôpital de la Vallée de Joux</a></li>
			<li><a href="#">Hôpital de St-Loup</a></li>
			<li><a href="#">Centre DaisY</a></li>
			<li><a href="#">Permanence de Cossonay</a></li>
		</ul>
	</nav>
	<div class="spacer spacer-xs"></div>
</div>

Summary Box

Urgences d’Yverdon-les-bains

Rue d'Entremonts 11
1400 Yverdon-les-bains

024 424 44 44
Réception 24/24 

<div href="#" class="summary-box">
	<a class="figure" href="#" style="background: url(https://unsplash.it/700/700/?random) 50% 50% / cover"></a>
	<div class="content">
		<div class="informations">
			<div class="col-xs-12">
				<a href="#">
					<h2>Urgences d’Yverdon-les-bains</h2>
				</a>
				<div class="row">
					<div class="col-sm-12">
						<div class="icon-container">
							<i class="ehnvicon ehnvicon-pin"></i>
						</div>
						<div class="text-container">
							<p>
								<a href="#">
									Rue d'Entremonts 11<br>
									1400 Yverdon-les-bains
								</a>
							</p>
						</div>
						<div class="spacer spacer-sm"></div>
					</div>
					<div class="col-sm-12">
						<div class="icon-container">
							<i class="ehnvicon ehnvicon-phone"></i>
						</div>
						<div class="text-container">
							<p>
								<a href="tel:0244244444">024 424 44 44</a><br>
								Réception 24/24
							</p>
						</div>
						<div class="spacer spacer-sm"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Table

Usage : {{> table }}
Titre Site Echéance Taux
Un(e) infirmier(ère) Yverdon-les-Bains 1 Octobre 2016 60%
Un(e) secrétaire avec connaissance en informatique Grange-sous-Trey 1 avril 2016 90%
Un(e) directeur/directrice de la communication Grange-sous-Trey 1 avril 2016 90% 
<table class="tablesaw" data-tablesaw-sortable data-tablesaw-mode="stack">
	<thead>
		<tr>
			<th>
				Titre
			</th>
			<th width="25%" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">
				Site <i class="ehnvicon ehnvicon-arrow-down"></i>
			</th>
			<th width="23%" data-tablesaw-sortable-col data-tablesaw-priority="2">
				Echéance <i class="ehnvicon ehnvicon-arrow-down"></i>
			</th>
			<th data-tablesaw-sortable-col data-tablesaw-priority="1">
				Taux <i class="ehnvicon ehnvicon-arrow-down"></i>
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				Un(e) infirmier(ère)
			</td>
			<td>
				<a href="#">Yverdon-les-Bains</a>
			</td>
			<td>
				1 Octobre 2016
			</td>
			<td>
				60%
			</td>
		</tr>
		<tr>
			<td>
				Un(e) secrétaire avec connaissance en informatique
			</td>
			<td>
				<a href="#">Grange-sous-Trey</a>
			</td>
			<td>
				1 avril 2016
			</td>
			<td>
				90%
			</td>
		</tr>
		<tr>
			<td>
				Un(e) directeur/directrice de la communication
			</td>
			<td>
				<a href="#">Grange-sous-Trey</a>
			</td>
			<td>
				1 avril 2016
			</td>
			<td>
				90%
			</td>
		</tr>
	</tbody>
</table>
<div class="spacer spacer-xl visible-xs-block"></div>

Teaser

Urgences d’Yverdon-les-bains
Plus d'informations

Rue d'Entremonts 11
1400 Yverdon-les-bains

024 424 44 44
Réception 24/24 

<div href="#" class="summary-box">
	<div class="content">
		<a href="">
			<figure>
				<img src="https://unsplash.it/700/700/?random" alt="">
				<figcaption>
					Urgences d’Yverdon-les-bains
				</figcaption>
			</figure>

			<div href="#" class="summary-box-informations-link">Plus d'informations <i class="ehnvicon ehnvicon-arrow-right"></i></div>
		</a>
		<div class="spacer spacer-sm visible-xs-block visible-sm-block"></div>
		<div class="row informations">
			<div class="col-xs-12">
				<div class="col-sm-12 col-md-7">
					<div class="spacer spacer-sm"></div>
					<div class="icon-container">
						<i class="ehnvicon ehnvicon-pin"></i>
					</div>
					<div class="text-container">
						<p>
							<a href="#">
								Rue d'Entremonts 11<br>
								1400 Yverdon-les-bains
							</a>
						</p>
					</div>
					<div class="spacer spacer-sm"></div>
				</div>
				<div class="col-sm-12 col-md-5">
					<div class="spacer spacer-sm"></div>
					<div class="icon-container">
						<i class="ehnvicon ehnvicon-phone"></i>
					</div>
					<div class="text-container">
						<p>
							<a href="tel:0244244444">024 424 44 44</a><br>
							Réception 24/24
						</p>
					</div>
					<div class="spacer spacer-sm"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="spacer spacer-xl visible-xs-block"></div>

Thumb Box

Usage : {{> thumb-box-container }}
Options :
  • title - String

Title

Mauris placerat eu leo sed hendrerit. Torbi at metus placerat.

My button 
<div class="thumb-box text-center">
	<img src="https://randomuser.me/api/portraits/women/36.jpg" alt="">
	<h1>Title</h1>
	<p>Mauris placerat eu leo sed hendrerit. Torbi at metus placerat.</p>
	<a href="#" class="btn btn-default btn-block" role="button">My button</a>
</div>

User Cards List

Usage : {{> user-cards-list }}

Jacqueline Robin

Pédiatrie

Dr Nishantan Popol Antonipillaï

FMH en gynécologie et obstétrique

Mathilde Toussaint

Vitae

Gabriel Reynaud

Pédiatrie

Aimée Simon

Vitae

Mathilde Toussaint

Vitae

 
<div class="row">
	<div class="user-cards-list">
		<a href="#" class="user-card">
			<i class="ehnvicon ehnvicon-long-arrow-right"></i>

			<div class="vignette">
				<div class="icon-placeholder">
					<i class="ehnvicon ehnvicon-placeholder-dr"></i>
				</div>
			</div>
			<div class="user-card-infos">
				<h3>Jacqueline Robin</h3>
				<p>Pédiatrie</p>
			</div>
		</a> <a href="#" class="user-card">
			<i class="ehnvicon ehnvicon-long-arrow-right"></i>

			<div class="vignette">
				<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
			</div>
			<div class="user-card-infos">
				<h3>Dr Nishantan Popol Antonipillaï</h3>
				<p>FMH en gynécologie et obstétrique</p>
			</div>
		</a> <a href="#" class="user-card">
			<i class="ehnvicon ehnvicon-long-arrow-right"></i>

			<div class="vignette">
				<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
			</div>
			<div class="user-card-infos">
				<h3>Mathilde Toussaint</h3>
				<p>Vitae</p>
			</div>
		</a> <a href="#" class="user-card">
			<i class="ehnvicon ehnvicon-long-arrow-right"></i>

			<div class="vignette">
				<div class="icon-placeholder">
					<i class="ehnvicon ehnvicon-placeholder-dr"></i>
				</div>
			</div>
			<div class="user-card-infos">
				<h3>Gabriel Reynaud</h3>
				<p>Pédiatrie</p>
			</div>
		</a> <a href="#" class="user-card">
			<i class="ehnvicon ehnvicon-long-arrow-right"></i>

			<div class="vignette">
				<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
			</div>
			<div class="user-card-infos">
				<h3>Aimée Simon</h3>
				<p>Vitae</p>
			</div>
		</a> <a href="#" class="user-card">
			<i class="ehnvicon ehnvicon-long-arrow-right"></i>

			<div class="vignette">
				<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
			</div>
			<div class="user-card-infos">
				<h3>Mathilde Toussaint</h3>
				<p>Vitae</p>
			</div>
		</a> </div>
</div>
<div class="spacer spacer-xl visible-xs-block"></div>