Organisms

Article Card

Usage : {{> article-card }}
Options :
  • art-card-title - String
<a class="article-card thumbnail link link-text" href="#">
	<div class="picture-label">
		<figure class="effect-selena">
			<img src="../build/img/stan.jpg" alt="Article image" class="picture img-responsive">

		</figure> <span class="label label-primary ">Label</span>
	</div>
	<div class="caption">
		<h4 class="h5 no-margin">Après Muse, le déluge?</h4>
		<p class="small no-margin"><span class="not-sign">9 juin 2015</span> • <span class="text-strong" href="#">Concert</span> • <span class="text-strong" href="#">Tournée</span></p>
		<p class="text-serif">Le trio britannique était samedi au festival Sonisphere à Bienne. L’occasion de rencontrer le bassiste du groupe…</p>
	</div>
</a>

Article Full

Usage : {{> article-full }}
Stan the Man
Tennis

La symphonie en tennis majeur de Stanislas Wawrinka

Le Vaudois a stupéfié le monde, ce dimanche, en remportant le tournoi de Roland-Garros face au grandissime favori qu’était Djokovic. Torrent d’éloges internationaux pour l’extra-terrien

On aura donc vu Novak Djokovic pleurer, indique Libération. Acclamé par le central de Roland-Garros qui n’en aurait certainement pas fait autant si le Serbe avait gagné le tournoi, comme c’était prévu. Auparavant, on l’avait vu reculer, et ça, c’était encore plus inimaginable. On se demandait, avant le tournoi, qui serait capable de battre le numéro 1 mondial, intouchable depuis des mois. Ce ne fut pas Nadal, balayé en quarts. Ce ne fut pas Murray, écœuré en demi. Ce fut donc Wawrinka en finale.

Et quel Wawrinka! Il a déjoué les plans de l’épouvantail joli titre, non? C’est celui de L’Avenir qui, comme beaucoup de médias, insiste davantage sur la défaite de Novak Djokovic – un Djokovic maudit, titrent Les Echos – sur le court de la finale de Roland-Garros 2015 que sur la victoire du Vaudois, tout de même qualifié par le journal belge d’impérial. Mais aussi – indécrottables clichés – de petit suisse, avec minuscule, qui fut pile à l’heure… suisse pour son rendez-vous avec l’histoire et a matraqué le Serbe, écrit BBC Afrique.

Ad

À propos de l'auteur

Ad
<article>
	<div class="article-cover text-center">
		<img src="../build/img/stan.jpg" alt="Stan the Man">
	</div>

	<div class="container">
		<div class="row">
			<div class="col-sm-3 col-md-2">
				<section class="article-info hidden-xs text-sans-serif">
					<p class="reading-time"><i class="ltpsicon ltpsicon-watch"></i><span>7 minutes</span> de lecture</p>
					<p><a href="#" class="article-author">Olivier Perrin</a>, de retour de Roland Garros.
						<br>Publié le lundi 8 juin 2015 à 12:34, modifié mardi 9 juin 2015 à 10:15.</p>

					<div class="share">
						<p class="text-uppercase">Partage</p>
						<ul class="list-unstyled">
							<li><a href="#" class="share-email"><i class="fa fa-paper-plane"></i><span class="sr-only">Partager par </span>Email</a></li>
							<li><a href="#" class="share-facebook"><i class="fa fa-facebook"></i><span class="sr-only">Partager sur </span>Facebook</a></li>
							<li><a href="#" class="share-twitter"><i class="fa fa-twitter"></i><span class="sr-only">Partager sur </span>Twitter</a></li>
						</ul>
					</div>
				</section>
			</div>
			<div class="col-sm-9 col-md-6">
				<article class="article-content article-content-inset main-content">
					<a id="main-content"></a>
					<div class="label label-primary">Tennis</div>
					<h1>La symphonie en tennis majeur de Stanislas Wawrinka</h1>
					<p class="lead">Le Vaudois a stupéfié le monde, ce dimanche, en remportant le tournoi de Roland-Garros face au grandissime favori qu’était Djokovic. Torrent d’éloges internationaux pour l’extra-terrien</p>

					<section class="article-info visible-xs-block text-sans-serif">
						<p class="reading-time"><i class="ltpsicon ltpsicon-watch"></i><span>7 minutes</span> de lecture</p>
						<p><a href="#" class="article-author">Olivier Perrin</a>, de retour de Roland Garros.
							<br>Publié le lundi 8 juin 2015 à 12:34, modifié mardi 9 juin 2015 à 10:15.</p>

						<div class="share">
							<p class="text-uppercase">Partage</p>
							<ul class="list-unstyled">
								<li><a href="#" class="share-email"><i class="fa fa-paper-plane"></i><span class="sr-only">Partager par </span>Email</a></li>
								<li><a href="#" class="share-facebook"><i class="fa fa-facebook"></i><span class="sr-only">Partager sur </span>Facebook</a></li>
								<li><a href="#" class="share-twitter"><i class="fa fa-twitter"></i><span class="sr-only">Partager sur </span>Twitter</a></li>
							</ul>
						</div>
					</section>
					<div class="text-serif">
						<p>On aura donc vu Novak Djokovic pleurer, indique Libération. Acclamé par le central de Roland-Garros qui n’en aurait certainement pas fait autant si le Serbe avait gagné le tournoi, comme c’était prévu. Auparavant, on l’avait vu reculer, et ça, c’était
							encore plus inimaginable. On se demandait, avant le tournoi, qui serait capable de battre le numéro 1 mondial, intouchable depuis des mois. Ce ne fut pas Nadal, balayé en quarts. Ce ne fut pas Murray, écœuré en demi. Ce fut donc Wawrinka en finale.</p>
						<p>Et quel Wawrinka! Il a déjoué les plans de l’épouvantail joli titre, non? C’est celui de L’Avenir qui, comme beaucoup de médias, insiste davantage sur la défaite de Novak Djokovic – un Djokovic maudit, titrent Les Echos – sur le court de la finale
							de Roland-Garros 2015 que sur la victoire du Vaudois, tout de même qualifié par le journal belge d’impérial. Mais aussi – indécrottables clichés – de petit suisse, avec minuscule, qui fut pile à l’heure… suisse pour son rendez-vous avec l’histoire
							et a matraqué le Serbe, écrit BBC Afrique.</p>
					</div>

					<div class="ad">
						<a href="#"><img class="img-responsive" src="../build/img/ad-16by9.png" alt="Ad"></a>
					</div>
				</article>

				<h2 class="text-muted h3">À propos de l'auteur</h2>
				<aside class="author">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object img-circle" src="../build/img/author.png" alt="Olivier Perrin">
							</a>
						</div>
						<div class="media-body">
							<h4 class="media-heading">Olivier Perrin</h4>
							<p class="author-social"><a class="link link-social twitter" href="http://twitter.com">@OlivierPerrin</a></p>
							<p>Journaliste au Temps depuis plus de 8 ans, de tous les sujets & sur tous les terrains!</p>
							<ul class="list-inline">
								<li><a href="#">Voir ses articles</a></li>
								<li><a href="mailto:example@example.com">Lui écrire</a></li>
							</ul>
						</div>
					</div>
				</aside>
			</div>
			<div class="visible-md-block visible-lg-block col-md-4 text-right">
				<div class="spacer spacer-md"></div>
				<div class="ad">
					<a href="#"><img class="img-responsive" src="../build/img/ad-vertical.png" alt="Ad"></a>
				</div>
			</div>
		</div>
	</div>
</article>

Article Full Teaser

Usage : {{> article-full-teaser }}
<article class="bg-white">
	<div class="article-cover text-center">
		<img src="../build/img/stan.jpg" alt="Stan the Man">
	</div>

	<div class="container">
		<div class="row">
			<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
				<article class="article-content article-content-inset main-content">
					<a id="main-content"></a>
					<div class="label label-primary">Tennis</div>
					<h1><a href="#" class="link link-text">La symphonie en tennis majeur de Stanislas Wawrinka</a></h1>
					<p class="text-muted">
						Par <a href="#">Olivier Perrin</a>, publié le 26 juin 2015 à 14:10
					</p>
					<p class="text-serif">Le Vaudois a stupéfié le monde, ce dimanche, en remportant le tournoi de Roland-Garros face au grandissime favori qu’était Djokovic. Torrent d’éloges internationaux pour l’extra-terrien</p>
				</article>
			</div>
		</div>
	</div>
</article>

Article Headliner

Usage : {{> article-headliner }}
Options :
  • art-headliner-title - String
<h4 class="article-headliner">
  <span class="article-categories"><span class="label label-primary ">Label</span>
</span>
  <a href="#" class="link link-shade">Le bénéfice de Trafigura bondit de 39%</a>
  <small><a class="link link-muted not-sign" href="#">7 juin 2015</a></small>
</h4>

Article Info

Usage : {{> article-info }}
Options :
  • info-classes - String
<section class="article-info  text-sans-serif">
	<p class="reading-time"><i class="ltpsicon ltpsicon-watch"></i><span>7 minutes</span> de lecture</p>
	<p><a href="#" class="article-author">Olivier Perrin</a>, de retour de Roland Garros.
		<br>Publié le lundi 8 juin 2015 à 12:34, modifié mardi 9 juin 2015 à 10:15.</p>

	<div class="share">
		<p class="text-uppercase">Partage</p>
		<ul class="list-unstyled">
			<li><a href="#" class="share-email"><i class="fa fa-paper-plane"></i><span class="sr-only">Partager par </span>Email</a></li>
			<li><a href="#" class="share-facebook"><i class="fa fa-facebook"></i><span class="sr-only">Partager sur </span>Facebook</a></li>
			<li><a href="#" class="share-twitter"><i class="fa fa-twitter"></i><span class="sr-only">Partager sur </span>Twitter</a></li>
		</ul>
	</div>
</section>

Article Media

Usage : {{> article-media }}
Options :
  • option - Type
Portrait

Le bénéfice de Trafigura bondit de 39%

12 juin 2015GenèvePétrole

Le géant genevois du négoce de pétrole et métaux a dégagé un bénéfice net record à 654 millions de dollars (+39%).

<div class="article-media media">
	<div class="media-left">
		<a href="#">
			<img class="media-object" src="../build/img/article-thumb.png" alt="image">
		</a>
	</div>
	<div class="media-body">
		<div class="article-categories"><span class="label label-primary ">Portrait</span>
		</div>
		<h4 class="media-heading h5"><a class="link link-text" href="#">Le bénéfice de Trafigura bondit de 39%</a></h4>
		<p class="small no-margin"><a class="link link-muted not-sign" href="#">12 juin 2015</a> • <a class="text-strong" href="#">Genève</a> • <a class="text-strong" href="#">Pétrole</a></p>
		<p class="text-serif">Le géant genevois du négoce de pétrole et métaux a dégagé un bénéfice net record à 654 millions de dollars (+39%).</p>
	</div>
</div>

Article Teaser

Usage : {{> article-teaser }}
Options :
  • art-card-title - String
<div class="article-teaser">
	<a href="#">
		<div class="picture-label">
			<figure class="effect-selena">
				<img src="../build/img/stan.jpg" alt="Article image" class="picture img-responsive">

			</figure> <span class="label label-primary ">Label</span>
		</div>
	</a>
	<div class="spacer spacer-sm"></div>
	<h2 class="no-margin"><a href="#" class="link link-text">Après Muse, le déluge?</a></h2>
	<p class="small no-margin"><a class="link link-muted not-sign" href="#">9 juin 2015</a> • <a class="text-strong" href="#">Concert</a> • <a class="text-strong" href="#">Tournée</a></p>
	<p class="text-serif">Le trio britannique était samedi au festival Sonisphere à Bienne. L’occasion de rencontrer le bassiste du groupe…</p>
</div>

Author

Usage : {{> author }}

À propos de l'auteur

<h2 class="text-muted h3">À propos de l'auteur</h2>
<aside class="author">
	<div class="media">
		<div class="media-left">
			<a href="#">
				<img class="media-object img-circle" src="../build/img/author.png" alt="Olivier Perrin">
			</a>
		</div>
		<div class="media-body">
			<h4 class="media-heading">Olivier Perrin</h4>
			<p class="author-social"><a class="link link-social twitter" href="http://twitter.com">@OlivierPerrin</a></p>
			<p>Journaliste au Temps depuis plus de 8 ans, de tous les sujets & sur tous les terrains!</p>
			<ul class="list-inline">
				<li><a href="#">Voir ses articles</a></li>
				<li><a href="mailto:example@example.com">Lui écrire</a></li>
			</ul>
		</div>
	</div>
</aside>

Author Line

Usage : {{> author-line }}
Options :
  • author-name - String

Par Olivier Perrin, publié le 26 juin 2015 à 14:10

<p class="text-muted">
	Par <a href="#">Olivier Perrin</a>, publié le 26 juin 2015 à 14:10
</p>

Form

Usage : {{> form }}
Options :
  • option - Type
TBD
TBD