Here is the content of the article displayed on the page.
Thème Paris.fr
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...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.
Titre - permet d'afficher des en-têtes HTML du niveau 1 à 6
<@cTitle level=1>Page Title</@cTitle>
<@cTitle level=2 class='section-title text-primary' id='services-heading'>
Our Services
</@cTitle>
<@cTitle level=3>Contact Information</@cTitle>
<h1>
Page Title</h1>
<h2 class="section-title text-primary" id="services-heading">
Our Services
</h2>
<h3>
Contact Information</h3>Génère un élément de titre HTML (h1-h6) avec un niveau configurable. Permet d'afficher des titres et des en-têtes sur les pages skin.
Paragraphe par défaut - @cText peut être typé en "pre", "blockquote"...
This is a paragraph of text on the page.
Public services should be accessible to all citizens.
<@cText>
This is a paragraph of text on the page.
</@cText>
<@cText type='blockquote' class='blockquote'>
Public services should be accessible to all citizens.
</@cText>
<p>
This is a paragraph of text on the page.
</p>
<blockquote class="blockquote">
Public services should be accessible to all citizens.
</blockquote>Génère un élément de texte HTML de niveau bloc (paragraphe par défaut). Encapsule le contenu textuel sur les pages skin avec une balise configurable.
@cInline peut être typé pour n'importe quelle balise inline telle que "strong" ou "em"
<@cInline class='text-primary'>Highlighted text</@cInline>
<@cInline type='strong' class='fw-bold'>Important notice</@cInline>
<@cInline type='em' params='data-toggle="tooltip" title="Additional info"'>Hover for details</@cInline>
<span class="text-primary">
Highlighted text</span>
<strong class="fw-bold">
Important notice</strong>
<em data-toggle="tooltip" title="Additional info">
Hover for details</em>Génère un élément HTML inline générique (span par défaut). Utile pour encapsuler du contenu inline avec un style ou des attributs personnalisés sur les pages du skin.
@chList permet de générer des listes ordonnées ou non ordonnées
or
<@chList type='u' class='list-unstyled'>
<@chItem>Home</@chItem>
<@chItem>About</@chItem>
<@chItem>Contact</@chItem>
</@chList>
<@cDivider />
<@chList type='o'>
<@chItem>Step one</@chItem>
<@chItem>Step two</@chItem>
<@chItem>Step three</@chItem>
</@chList>
<ul >
<li>
Home</li>
<li>
About</li>
<li>
Contact</li>
</ul>
<p class="divider">or</p>
<ol >
<li>
Step one</li>
<li>
Step two</li>
<li>
Step three</li>
</ol>Génère un élément de liste HTML non ordonnée (ul) ou ordonnée (ol). À utiliser avec chItem pour construire des listes structurées sur les pages skin.
@chItem permet de générer des éléments de liste à l'intérieur d'un chList
or
<@chList type='u'>
<@chItem>First item</@chItem>
<@chItem>Second item</@chItem>
<@chItem class='active'>Third item (active)</@chItem>
</@chList>
<@cDivider />
<@chList type='o'>
<@chItem>First item</@chItem>
<@chItem>Second item</@chItem>
<@chItem class='active'>Third item (active)</@chItem>
</@chList>
<ul >
<li>
First item</li>
<li>
Second item</li>
<li class="active">
Third item (active)</li>
</ul>
<p class="divider">or</p>
<ol >
<li>
First item</li>
<li>
Second item</li>
<li class="active">
Third item (active)</li>
</ol>Génère un élément de liste HTML (li) à utiliser à l'intérieur d'un chList. Encapsule les entrées individuelles dans des listes ordonnées ou non ordonnées.
@cContentFrame permet de générer des blocs de contenu mis en évidence
Please read the following instructions carefully.
This action cannot be undone.
How to use the vademecum effectively.
<@cContentFrame title='Important information'>
<@cText>Please read the following instructions carefully.</@cText>
</@cContentFrame>
<@cContentFrame title='Note' class='content-frame-secondary' titleLevel=3 >
<@cText>This action cannot be undone.</@cText>
</@cContentFrame>
<@cContentFrame title='Vademecum' class='content-frame-tertiary' titleLevel=3 >
<@cText>How to use the vademecum effectively.</@cText>
</@cContentFrame>
<div class="content-frame content-frame-primary" >
<h2 class="h4 mt-0 content-frame-title">
Important information</h2>
<div class="content-frame-content">
<p>
Please read the following instructions carefully.</p>
</div>
</div>
<div class="content-frame content-frame-secondary" >
<h3 class="h4 mt-0 content-frame-title">
Note</h3>
<div class="content-frame-content">
<p>
This action cannot be undone.</p>
</div>
</div>
<div class="content-frame content-frame-tertiary" >
<h3 class="h4 mt-0 content-frame-title">
Vademecum</h3>
<div class="content-frame-content">
<p>
How to use the vademecum effectively.</p>
</div>
</div>Génère un bloc de cadre de contenu mis en évidence avec un titre et un conteneur stylisé pour mettre en valeur du contenu textuel sur les pages skin.
@cArticle permet de générer des éléments article HTML5 avec un titre et un contenu optionnels
Here is the content of the article displayed on the page.
Details about the featured event.
<@cArticle title='Latest News' titleLevel=2>
<@cText>Here is the content of the article displayed on the page.</@cText>
</@cArticle>
<@cArticle title='Featured Event' titleLevel=3 titleClass='text-primary' class='portlet featured'>
<@cText>Details about the featured event.</@cText>
</@cArticle>
<article class=" portlet" >
<h2>
Latest News</h2>
<div class="article-content">
<p>
Here is the content of the article displayed on the page.</p>
</div>
</article>
<article class=" portlet featured" >
<h3 class="text-primary">
Featured Event</h3>
<div class="article-content">
<p>
Details about the featured event.</p>
</div>
</article>Génère un élément article HTML avec un titre optionnel et une section de contenu. Utile pour structurer le contenu des portlets sur les pages du skin.
@cDivider permet de générer des séparateurs horizontaux avec un texte optionnel
or
or continue with
<@cDivider />
<@cDivider label='or continue with' class='my-4' />
<p class="divider">or</p>
<p class="divider my-4">or continue with</p>