Titre de niveau 2
Paragraphe
Titre de niveau 3
Paragraphe
Titre de niveau 4
Paragraphe
- Item 1
- Item 2
- Item 1
- Item 2
Thème Paris.fr
L'espacement entre les contenus est géré par la css "rythm.css" qui permet d'appliquer des règles uniformes d"espacement sur tous le site.
Pour gérer l'espacement des élements individuellement un certin nombre de classes utilistaires ont été ajouter pour se conformer aux règles d'espacement définit par le Design System.
Les classes utilitaires sont formée de 3 valeurs :
De la même façon que les marges -margni- les classes sont formée de 3 valeurs :
<@cTitle>Titre de niveau 1</@cTitle>
<@cTitle level=2 class='main-danger-color'>Titre de niveau 2</@cTitle>
<@cTitle level=3>Titre de niveau 3 avec fond de couleur principale</@cTitle>
<@cTitle level=4>Titre de niveau 4</@cTitle>
<h1>
Titre de niveau 1</h1>
<h2 class="main-danger-color">
Titre de niveau 2</h2>
<h3>
Titre de niveau 3</h3>
<h4>
Titre de niveau 4</h4>Voici la liste des différents paramètres de la macro :
Texte exemple
Texte exemple
<@cText>Texte exemple</@cText>
<@cText class='main-info-color text-cap'>Texte exemple</@cText>
<p>
Texte exemple</p>
<p class="main-info-color text-cap">
Texte exemple</p>Voici la liste des différents paramètres de la macro :
Contenu inline, donc dans un "span"
Contenu de type "strong"
<@cInline class='mt-m'>Contenu inline, donc dans un "span"</@cInline>
<@cInline type='strong'>Contenu de type "strong"</@cInline>
<p class="mt-l">
<span>
Contenu inline, donc dans un "span"</span>
<br>
<strong>
Contenu de type "strong"</strong>
</p>Voici la liste des différents paramètres de la macro :
Wrapper "Inline", tag html5
<@chList class="ps-m">
<@chItem>Ville de Paris</@chItem>
<@chItem>Ville de Nates</@chItem>
</@chList>
<@chList type=\'o\'>
<@chItem>Ville de Paris</@chItem>
<@chItem>Ville de Nates</@chItem>
</@chList>
<ul class="ps-m" >
<li>
Ville de Paris</li>
<li>
Ville de Nates</li>
</ul>
<ol >
<li>
Ville de Paris</li>
<li>
Ville de Nates</li>
</ol>Voici la liste des différents paramètres de la macro :
Génére le ul, paramètre par défaut, ou ol si on type la macro type='o'.
<@chList>
<@chItem>Ville de Paris</@chItem>
</@chList>
<ul class="ps-m" >
<li>
Ville de Paris</li>
</ul>Voici la liste des différents paramètres de la macro :
La tour Eiffel est une tour de fer puddlé de 324 métres de hauteur située é Paris, é l’extrémité nord-ouest du parc du Champ-de-Mars en bordure de la Seine dans le 7ᵉ arrondissement.
Son adresse officielle est 5, avenue Anatole-France.
La tour Eiffel est une tour de fer puddlé de 324 métres de hauteur située é Paris, é l’extrémité nord-ouest du parc du Champ-de-Mars en bordure de la Seine dans le 7ᵉ arrondissement.
Son adresse officielle est 5, avenue Anatole-France.
La tour Eiffel est une tour de fer puddlé de 324 métres de hauteur située é Paris, é l’extrémité nord-ouest du parc du Champ-de-Mars en bordure de la Seine dans le 7ᵉ arrondissement.
Son adresse officielle est 5, avenue Anatole-France.
<@cContentFrame title=\'Organisation du théme\'>
...
</@cContentFrame>
<div class="content-frame content-frame-primary mb-5" >
<h2 class="h4 content-frame-title ">
Organisation du thème</h2>
<div class="content-frame-content">
<h3 class="h1 mt-5">
La Tour Eiffel</h3>
<p class="mt-5">La tour Eiffel est une tour de fer puddlé de 324 métres de hauteur située é Paris, é l’extrémité nord-ouest du parc du Champ-de-Mars en bordure de la Seine dans le 7ᵉ arrondissement.</p>
<p>Son adresse officielle est 5, avenue Anatole-France. </p>
</div>
</div>
<div class="content-frame content-frame-secondary mb-5" >
<h2 class="h4 content-frame-title ">
Organisation du thème</h2>
<div class="content-frame-content">
<h3 class="h1 mt-5">
La Tour Eiffel</h3>
<p class="mt-5">La tour Eiffel est une tour de fer puddlé de 324 métres de hauteur située é Paris, é l’extrémité nord-ouest du parc du Champ-de-Mars en bordure de la Seine dans le 7ᵉ arrondissement.</p>
<p>Son adresse officielle est 5, avenue Anatole-France. </p>
</div>
</div>
<div class="content-frame content-frame-tertiary mb-5" >
<h2 class="h4 content-frame-title ">
Organisation du thème</h2>
<div class="content-frame-content">
<h3 class="h1 mt-5">
La Tour Eiffel</h3>
<p class="mt-5">La tour Eiffel est une tour de fer puddlé de 324 métres de hauteur située é Paris, é l’extrémité nord-ouest du parc du Champ-de-Mars en bordure de la Seine dans le 7ᵉ arrondissement.</p>
<p>Son adresse officielle est 5, avenue Anatole-France. </p>
</div>
</div>Voici la liste des différents paramètres de la macro :
Element graphique pour encadrer du contenu.
Paragraphe
Paragraphe
Paragraphe
<@cArticle title='Contenu Editorial'>
<@cTitle level=2>Titre de niveau 2</@cTitle>
<@cTitle level=3>Titre de niveau 3</@cTitle>
<@cTitle level=4>Titre de niveau 4</@cTitle>
<@cText>Paragraphe</@cText>
<@chList class="ps-m">
<@chItem>Item 1</@chItem>
<@chItem>Item 2</@chItem>
</@chList>
<@cText type='hr'>
</@chList type=k'o'>
<@chItem>Item 1</@chItem>
<@chItem>Item 2</@chItem>
</@chList>
</@cArticle>
<article class=" portlet" >
<h2>
Contenu Editorial</h2>
<div class="article-content">
<h2>
Titre de niveau 2</h2>
<p>
Paragraphe</p>
<h3>
Titre de niveau 3</h3>
<p>
Paragraphe</p>
<h4>
Titre de niveau 4</h4>
<p>
Paragraphe</p>
<ul class="ps-m" >
<li>
Item 1</li>
<li>
Item 2</li>
</ul>
<hr>
</hr>
<ol >
<li>
Item 1</li>
<li>
Item 2</li>
</ol>
</div>
</article>Wrapper "Article", tag html5