Atoms

Button

Usage : {{> button }}
Options :
  • button-content - String
  • button-type - String
<a href="#" class="btn btn-primary btn-block" role="button">My button</a>

Card

Usage : {{> card }}
Options :
  • card-title - String
  • card-subtitle - String
  • format - String
<a href="#" class="card card-default">
	<i class="ehnvicon ehnvicon-long-arrow-right"></i>
	<div class="content">
		<h1>Card Title</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>

Checkbox

Usage : {{> checkbox }}
Options :
  • label - String
  • checked - Bool
<div class="checkbox">
	<label><input type="checkbox" value="">&nbsp;My Checkbox</label>
</div>

Contact Infos

Usage : {{> contact-infos }}
Options :
  • title - String
<div class="contact-infos">
	<h2></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>

Email Input

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

Entry Title

Usage : {{> entry-title }}
Options :
  • title - String
  • subtitle - String

Title

<header class="entry-title">
	<h1>Title</h1>

	<p class="meta time">
		<i class="ehnvicon ehnvicon-clock"></i>
		<time datetime="2016-08-19">19 Août 2016</time>
	</p>
</header>

Input Group

Usage : {{> input-group }}
Options :
  • option - Type
<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>

Input Select

Usage : {{> input-select }}
Options :
  • label - String
  • placeholder - String
<div class="input-select form-group">


	<select class="form-control" default name="" id="">
		<option value="" class="placeholder" disabled selected>[object Object]</option>

		<option value="">Option 1</option>
		<option value="">Option 2</option>
		<option value="">Option 3</option>
		<option value="">Option 4</option>
	</select>
</div>

Input Text

Usage : {{> input-text }}
Options :
  • label - String
  • placeholder - String
  • type - String
<div class="input-text form-group">

	<input class="form-control" placeholder="[object Object]" type="text">
</div>

Input Textarea

Usage : {{> input-textarea }}
Options :
  • label - String
  • placeholder - String
<div class="input-textarea form-group">

	<textarea class="form-control" placeholder="[object Object]" name="" id="" cols="30" rows="10"></textarea>
</div>

Placeholder

Usage : {{> placeholder }}
Options :
  • placeholder-politesse - Bool
<div class="icon-placeholder">
	<i class="ehnvicon ehnvicon-placeholder-dr"></i>
</div>

Portrait

Usage : {{> portrait }}
Options :
  • portrait-url - Bool
<figure class="portrait">
	<div class="icon-placeholder">
		<i class="ehnvicon ehnvicon-placeholder-dr"></i>
	</div>
</figure>

Social Icon

Usage : {{> social-icon }}
Options :
  • service - String
<a href="#" target="_blank" class="social-link"><i class="ehnvicon ehnvicon-twitter"></i></a>

Tags Select

Usage : {{> 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>

User Card

Usage : {{> user-card }}
Options :
  • card-portrait-url - String
  • card-name - String
  • card-politesse - String
  • card-title - String
<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>card-title</h3>
		<p>card-title</p>
	</div>
</a>