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 titres HTML de level 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>Generates an HTML heading element (h1-h6) with a configurable level. Used to display titles and headings on skin pages.
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>Generates an HTML block-level text element (paragraph by default). Wraps textual content on skin pages with a configurable tag.
@cInline peut être typé pour toute balise inline comme "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>Generates a generic HTML inline element (span by default). Useful for wrapping inline content with custom styling or attributes on skin pages.
@chList peut être utilisé pour générer des listes ordonnées ou non ordonnées
<@chList type='u' class='list-unstyled'>
<@chItem>Home</@chItem>
<@chItem>About</@chItem>
<@chItem>Contact</@chItem>
</@chList>
<@chList type='o'>
<@chItem>Step one</@chItem>
<@chItem>Step two</@chItem>
<@chItem>Step three</@chItem>
</@chList>
<ul class="list-unstyled" >
<li>
Home</li>
<li>
About</li>
<li>
Contact</li>
</ul>
<ol >
<li>
Step one</li>
<li>
Step two</li>
<li>
Step three</li>
</ol>Generates an HTML unordered (ul) or ordered (ol) list element. Use with chItem to build structured lists on skin pages.
@chItem peut être utilisé pour générer des éléments de liste à l'intérieur de chList
<@chList type='u'>
<@chItem>First item</@chItem>
<@chItem>Second item</@chItem>
<@chItem class='active'>Third item (active)</@chItem>
</@chList>
<@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>
<ol >
<li>
First item</li>
<li>
Second item</li>
<li class="active">
Third item (active)</li>
</ol>Generates an HTML list item (li) element for use inside a chList. Wraps individual entries in ordered or unordered lists.
@cContentFrame peut être utilisé pour générer des blocs de contenu mis en avant
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>Generates a highlighted content frame block with a title and styled wrapper for emphasizing text content on skin pages.
@cArticle peut être utilisé pour générer des éléments article HTML5 avec un titre et un contenu optionnel
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>Generates an HTML article element with an optional title and content section. Useful for structuring portlet content on skin pages.
@cDivider peut être utilisé pour 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>