Lorem ipsum dolor sit amet, consectetur adipiscing elit. Huius.
Lorem ipsum dolor sit amet, sed quae tueretur. Sed haec quidem liberius ab eo dicuntur et saepius. Nescio quo modo praetervolavit oratio.
Organisms
Color Box Container
Usage : {{> color-box-container }}
Options :
- title - Boolean
- summary - Boolean
Actualités
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Huius.
Lorem ipsum dolor sit amet, sed quae tueretur. Sed haec quidem liberius ab eo dicuntur et saepius. Nescio quo modo praetervolavit oratio.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Huius.
Lorem ipsum dolor sit amet, sed quae tueretur. Sed haec quidem liberius ab eo dicuntur et saepius. Nescio quo modo praetervolavit oratio.
<section class="color-box-container">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Actualités</h1>
</div>
</div>
<div class="spacer"></div>
<div class="row">
<div class="col-md-6 col-xs-12">
<a href="#" class="colox-box big-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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Huius.</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> </div>
<div class="col-md-6 col-xs-12">
<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Huius.</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> <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Huius.</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> </div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12">
<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Huius.</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> </div>
<div class="col-md-6 col-xs-12">
<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Huius.</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> </div>
</div>
</div>
</section>Contact Form
Usage : {{> contact-form }}
Options :
- option - Type
<form action="" class="contact-form">
<h1>Contact</h1>
<div class="row">
<div class="col-md-6">
<div class="input-text form-group">
<label for="">Nom</label>
<input class="form-control" placeholder="[object Object]" type="text">
</div>
</div>
<div class="col-md-6">
<div class="input-text form-group">
<label for="">Prénom</label>
<input class="form-control" placeholder="[object Object]" type="text">
</div>
</div>
<div class="col-md-6">
<div class="input-text form-group">
<label for="">E-Mail</label>
<input class="form-control" placeholder="[object Object]" type="email">
</div>
</div>
<div class="col-md-6">
<div class="input-text form-group">
<label for="">Téléphone</label>
<input class="form-control" placeholder="[object Object]" type="tel">
</div>
</div>
<div class="col-md-12">
<div class="input-select form-group">
<label for="">Le message concerne</label>
<select class="form-control" default name="" id="">
<option value="" class="placeholder" disabled selected>Tous les sujets</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="input-textarea form-group">
<textarea class="form-control" placeholder="Message..." name="" id="" cols="30" rows="10"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 center-block">
<a href="#" class="btn btn-primary btn-block" role="button">Envoyer</a> </div>
</div>
</form>
<div class="spacer spacer-xl visible-xs-block"></div>Header
Usage : {{> header }}
Options :
- option - Type
<div class="visible-xs-block">
<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 & 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'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>
</div>
<header class="header">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="row">
<div class="col-md-5 col-sm-4 col-xs-8">
<div class="navbar-header">
<a href="">
<img class="img-responsive" src="build/svg/logo_eHnv_full.svg" alt="eHnv - Etablissements Hospitaliers du Nord Vaudois." onerror="this.onerror=null; this.src='build/img/logo_eHnv_full.png'">
</a>
</div>
</div>
<div class="col-md-7 col-sm-8 hidden-xs">
<div class="collapse navbar-collapse">
<div class="row">
<ul class="nav navbar-nav navbar-right 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="row">
<div class="search-box toggle-able right">
<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>
<div class="row">
<div class="collapse navbar-collapse" id="collapse-nav">
<ul class="nav navbar-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 & 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'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>
</div>
</div>
</nav>
</div>
</header>Header Hmag
Usage : {{> header-hmag }}
Le magazine édité par les
<div class="visible-xs-block">
<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 & 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'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>
</div>
<header class="header-hmag">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="row">
<div class="col-md-4 col-sm-3 col-xs-5">
<div class="navbar-header">
<a href="http://ehnv.ch">
<img class="img-responsive hidden-xs hidden-sm" src="../build/svg/logo_Hmag.svg" alt="Hmag - Le magazine édité par les eHnv" onerror="this.onerror=null; this.src='../build/svg/logo_Hmag.png'">
</a>
</div>
</div>
<div class="col-lg-8 col-lg-offset-0 col-md-6 col-md-offset-2 col-sm-7 col-sm-offset-2 col-xs-offset-3 hidden-xs">
<div class="collapse navbar-collapse">
<div class="row">
<ul class="nav navbar-nav navbar-right secondary">
<li><a href="http://hmagazine.dev">Hmag</a></li>
<li><a href="http://hmagazine.dev/a-propos">A propos</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>
<div class="spacer spacer-md"></div>
<div class="lightbluebg">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="spacer spacer-xl"></div>
<p class="tagline text-center">
Le magazine édité par les <a href="http://www.ehnv.ch">
<img width="240" height="58" src="../build/svg/logo_eHnv_white.svg" alt="eHnv - Etablissements Hospitaliers du Nord Vaudois." onerror="this.onerror=null; this.src='../build/svg/logo_eHnv_white.png'">
</p>
<div class="spacer spacer-xl"></div>
</div>
</div>
</div>
</div>Location
Usage : {{> location }}
<section class="location">
<div class="container">
<div class="row">
<div class="col-md-4 lightbluebg title-container">
<div class="content">
<h2>Nous sommes près de chez vous.</h2>
<div class="spacer spacer-sm"></div>
</div>
<i class="ehnvicon ehnvicon-pin"></i>
</div>
<div class="col-md-8 lightbluebg mapCont">
<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>
</div>
</div>
</div>
</section>Newsletter
<section class="newsletter">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Professionnels</h1>
<h2>Newsletter pour les professionnels</h2>
<p>Mauris placerat eu leo sed hendrerit. Torbi at metus placerat eu leo sed hendrerit. vecop elit ultrices ullamcorper orbi at metus vel placerat eu leo sed. <a href="">Torbi at metus</a> placerat eu leo sed hendrerit. Metus placerat eu leo sed hendrerit.</p>
<div class="input-group email-input">
<input type="email" class="form-control" placeholder="Votre E-mail">
<span class="input-group-btn">
<button class="btn btn-default" type="button">S’inscrire</button>
</span>
</div>
</div>
</div>
</div>
</section>Thumb Box Container
Usage : {{> thumb-box-container }}
<section class="thumb-box-container">
<div class="container no-gutter">
<div class="row">
<div class="col-md-4">
<div class="thumb-box text-center">
<img src="https://randomuser.me/api/portraits/women/36.jpg" alt="">
<h1>Patients</h1>
<p>Mauris placerat eu leo sed hendrerit. Torbi at metus placerat.</p>
<a href="#" class="btn btn-default btn-block" role="button">Patients</a>
</div>
</div>
<div class="col-md-4">
<div class="thumb-box text-center">
<img src="https://randomuser.me/api/portraits/women/36.jpg" alt="">
<h1>Visiteurs</h1>
<p>Mauris placerat eu leo sed hendrerit. Torbi at metus placerat.</p>
<a href="#" class="btn btn-default btn-block" role="button">Visiteurs</a>
</div>
</div>
<div class="col-md-4">
<div class="thumb-box text-center">
<img src="https://randomuser.me/api/portraits/women/36.jpg" alt="">
<h1>Futurs parents</h1>
<p>Mauris placerat eu leo sed hendrerit. Torbi at metus placerat.</p>
<a href="#" class="btn btn-default btn-block" role="button">Futurs parents</a>
</div>
</div>
</div>
</div>
</section>Urgences Box
Usage : {{> urgences-box }}
Options :
- option - Type
Urgences vitales
Appeler le
144Urgences
Adultes et enfants
4 centres d’urgences (7j/7) et 2 permanences médicales (6j/7) sont à votre disposition.
<section class="urgences">
<div class="left darkbluebg">
<div class="content">
<div class="row">
<div class="col-md-12">
<h1>Urgences vitales</h1>
</div>
<div class="col-md-11 col-md-offset-1">
<h3><i class="ehnvicon ehnvicon-phone"></i> Appeler le</h3>
<a class="phone-number" href="tel:144">144</a>
</div>
</div>
<div class="ekg-container">
<svg class="ekg" width="172px" height="147px" viewBox="0 0 172 147" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<path d="M0.924384751,101.191932 L66.1578656,101.191932 L73.9363538,83.034062 L80.9917498,101.191932 L98.4618961,101.191932 L116.204537,0.579883885 L142.988197,146.797568 L157.618369,101.191932 L171.91357,101.191932" id="ekg" sketch:type="MSShapeGroup"></path>
</svg>
</div>
</div>
</div>
<div class="right lightbluebg">
<div class="content">
<div class="row">
<div class="col-md-11 col-md-offset-1">
<h1>Urgences</h1>
<h3>Adultes et enfants</h3>
<p>4 centres d’urgences (7j/7) et 2 permanences médicales (6j/7) sont à votre disposition.</p>
<div class="spacer spacer-sm"></div>
</div>
<div class="col-md-11 col-md-offset-1 no-gutter">
<div class="col-md-6">
<a href="#" class="btn btn-primary btn-block" role="button">CTA second</a> </div>
<div class="col-md-6">
<a href="#" class="btn btn-primary btn-block" role="button">CTA second</a> </div>
</div>
</div>
</div>
</div>
</section>
Social Box
Usage :
{{> social-box }}Suivez Hashtag, le mag des eHnv
Notre magazine dédié à votre bien-être