Atoms

Button

Introduced : 0.0.4
Updated : -
Usage : {{> button }}
<a href="#" class="btn btn-primary">.btn-primary</a>

Checkbox

Introduced : 0.0.4
Updated : -
Usage : {{> checkbox }}
<div class="checkbox">
	<label>
		<input type="checkbox" /> Resté connecté
	</label>
</div>

Chevron

Introduced : 0.5.0
Updated : -
Usage : {{> chevron }}
Options :
  • direction - String (default "bottom")
  • thin - Boolean (default false)
<span class="chevron chevron-bottom"></span>

Cover

Introduced : 0.4.0
Updated : -
Usage : {{> cover }}
Options :
  • cover-src - String
<div class="cover" style="background-image: url('https://unsplash.it/2000/650?image=984');">
	<img src="https://unsplash.it/2000/650?image=984" class="img-responsive" />
</div>

Input

Introduced : 0.0.4
Updated : 0.4.0
Usage : {{> input }}
Options :
  • input-id - String
  • input-type - String (email, text, password,...)
  • input-variant - String (has-error or has-success)
  • input-label - String
  • input-value - String
  • input-help - String

Example block-level help text here.

<div class="form-group">
	<label for="email">Email address</label>
	<input type="email" class="form-control" id="email" placeholder="Adresse email" value="" />
	<p class="help-block">Example block-level help text here.</p>
</div>

Input Error

Introduced : 0.0.4
Updated : -
Usage : {{> input-error }}

Example block-level help text here.

<div class="form-group has-error">
	<label for="email">Email address</label>
	<input type="email" class="form-control" id="email" placeholder="Adresse email" value="" />
	<p class="help-block">Example block-level help text here.</p>
</div>

Input Success

Introduced : 0.0.4
Updated : -
Usage : {{> input-success }}

Example block-level help text here.

<div class="form-group has-success">
	<label for="email">Email address</label>
	<input type="email" class="form-control" id="email" placeholder="Adresse email" value="" />
	<p class="help-block">Example block-level help text here.</p>
</div>

Label

Introduced : 0.3.1
Updated : -
Usage : {{> label }}
Options :
  • text - String
  • closable - Boolean (default false)
Default label
<span class="label label-default">
  Default label
  
</span>

Label Hierarchy

Introduced : 0.5.2
Updated : -
Usage : {{> label-hierarchy }}
Options :
  • parent - String
  • child - String
  • closable - Boolean (default false)
Default parent › Default child
<span class="label label-default">
  <strong>Default parent</strong> &rsaquo; Default child
  
</span>

Load More

Introduced : 0.4.2
Updated : -
Usage : {{> load-more }}
<a href="#" class="btn btn-default btn-lg btn-block">Voir plus...</a>

Loader

Introduced : 0.4.2
Updated : -
Usage : {{> loader }}
animated loader
<img src="build/svg/loader.svg" onerror="this.onerror=null; this.src='build/img/loader.gif'" alt="animated loader" class="img-responsive center-block" />

No Thumbnail

Introduced : 0.3.0
Updated : -
Usage : {{> no-thumbnail }}
Options :
  • type - String
<div class="no-thumbnail">
	<span class="media-icon icons icons-"></span>
</div>

Overlay

Introduced : 0.5.0
Updated : -
Usage : {{> overlay }}
Options :
  • fullscreen - Boolean (default false)
<div id="overlay" class="overlay">
</div>

Select

Introduced : 0.0.6
Updated : 0.4.0
Usage : {{> select }}
Options :
  • select-id - String
  • select-variant - String (has-error or has-success)
  • select-label - String
  • select-help - String

Example block-level help text here.

<div class="form-group">
	<label for="email">Votre canton</label>
	<select class="form-control">
		<option disabled selected>Votre canton</option>
		<optgroup>
			<option vale="ag">Argovie</option>
			<option vale="ai">Appenzell Rhodes intérieures</option>
			<option vale="ar">Appenzell Rhodes extérieures</option>
			<option vale="be">Berne</option>
			<option vale="bl">Bâle Campagne</option>
			<option vale="bs">Bâle Ville</option>
			<option vale="fr">Fribourg</option>
			<option vale="ge">Genève</option>
			<option vale="gl">Glaris</option>
			<option vale="gr">Grisons</option>
			<option vale="ju">Jura</option>
			<option vale="lu">Lucerne -Luzern</option>
			<option vale="ne">Neuchâtel</option>
			<option vale="nw">Nidwald</option>
			<option vale="ow">Obwald</option>
			<option vale="sg">Saint-Gall</option>
			<option vale="sh">Schaffhouse</option>
			<option vale="so">Soleure</option>
			<option vale="sz">Schwyz</option>
			<option vale="tg">Thurgovie</option>
			<option vale="ti">Ticino</option>
			<option vale="ur">Uri</option>
			<option vale="vd">Vaud</option>
			<option vale="vs">Valais</option>
			<option vale="zg">Zug</option>
			<option vale="zh">Zurich</option>
		</optgroup>
	</select>
	<p class="help-block">Example block-level help text here.</p>
</div>

Separator

Introduced : 0.1.1
Updated : -
Usage : {{> separator }}

<hr />

Spacer

Introduced : 0.0.4
Updated : -
Usage : {{> spacer }}
<div class="spacer"></div>

Textarea

Introduced : 0.0.6
Updated : 0.4.0
Usage : {{> textarea }}
Options :
  • textarea-id - String
  • textarea-variant - String (has-error or has-success)
  • textarea-label - String
  • textarea-help - String
<div class="form-group">
	<label for="email">Message</label>
	<textarea class="form-control" id="email" rows="8">Votre message</textarea>
</div>

Thumbnail

Introduced : 0.3.0
Updated : -
Usage : {{> thumbnail }}
Options :
  • thumbnail-object - Object
<div class="thumbnail" style="background-image: url('');">
	<img src="" alt="" class="img-responsive" />
</div>

Thumbnail Mondrian

Introduced : 0.6.0
Updated : -
Usage : {{> thumbnail-mondrian }}
Options :
  • thumbnail-object - Object
<div class="thumbnail">
	<img src="" alt="" width="" height="" />
</div>