Chapo
Titre de niveau 2
Paragraphe
Titre de niveau 3
Paragraphe
Titre de niveau 4
Paragraphe
- Item 1
- Item 2
- Item 1
- Item 2
La police utilisé par le thème est Montserrat. Les fonts utilisées sont de type "sans-serif".
La propriété font-familly est déclarée dans le fichier css "theme\themes\skin\parisfr\css\_variables.css" et les font faces dans le fichier css "theme\themes\skin\parisfr\css\_fonts.css"
Les fonts utilisées sont dans l'ordre:
Pour France Connect la famille utilisée est "Marianne". Consulter le site du Design System de l'Etat
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 :
.mt-m pour margin top - start - "sm" size, .mx-m pour margin inline "m" size,.mb-xs pour margin bottom -end- "xs" size...De la même façon que les marges -margin- les classes sont formée de 3 valeurs :
.pt-m pour padding top - start - "sm" size, .px-m pour padding inline "m" size,.pb-xs pour padding bottom -end- "xs" size...
<@cTitle>Titre de niveau 1</@cTitle>
<@cTitle level=2>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>
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
Texte exemple
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat accusamus sed, at optio porro iusto vitae dolorum. Incidunt dolores a, aut, reiciendis, consequatur rerum quod dolorum porro laudantium aspernatur perferendis?
<@cText>Texte exemple</@cText>
<@cText class='chapo'>Texte exemple</@cText>
<@cText class='text-cap'>Texte exemple</@cText>
<@cText class='truncate'>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat accusamus sed, at optio porro iusto vitae dolorum. Incidunt dolores a, aut, reiciendis, consequatur rerum quod dolorum porro laudantium aspernatur perferendis?</@cText>
<p>
Texte exemple</p>
<p class="chapo">
Texte exemple</p>
<p class="text-cap">
Texte exemple</p>
<p class="truncate">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat accusamus sed, at optio porro iusto vitae dolorum. Incidunt dolores a, aut, reiciendis, consequatur rerum quod dolorum porro laudantium aspernatur perferendis?</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>
<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 :
Par défault <@cInline> est paramétre pour afficher une balise HTML >span<. Pour autant elle peut être utiliser pour n'importe quel tag HTML inline en modifiant le paramètre "type".
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.visually-hidden Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti ad tenetur ut officia similique? Provident esse vitae voluptatibus laudantium dolorem, quisquam libero nam aspernatur illo neque. Provident dolorum illum aut.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti ad tenetur ut officia similique? Provident esse vitae voluptatibus laudantium dolorem, quisquam libero nam aspernatur illo neque. Provident dolorum illum aut.
<@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 mt-0 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 mt-0 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 mt-0 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.
Chapo
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">
<p class="text-cap">
Chapo</p>
<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