Thème Paris.fr
Exemple
Label Tour Eiffel
Label Tour Eiffel
<@cSection>
<@cImg src='images/paul-dufour-5XndD3FhH-w-unsplash.png' alt='Tour Eiffel' labelDescribedBy='Label Tour Eiffel' />
</@cSection>
<@cSection>
<@cImg src='images/paul-dufour-5XndD3FhH-w-unsplash.png' alt='Tour Eiffel' labelDescribedBy='Label Tour Eiffel' showLabelDescribedBy=true />
</@cSection>
<@cSection>
<@cImg src='images/paul-dufour-5XndD3FhH-w-unsplash.png' alt='Photo de la Tour Eiffel' class='img-fluid img-thumbnail rounded mx-auto d-block' />
</@cSection>
<div class="mb-m">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="Tour Eiffel" class="img-fluid" aria-descridedby="descridedby_tour_eiffel" id="tour_eiffel">
<p id="descridedby_tour_eiffel" class="visually-hidden">Label Tour Eiffel</p>
</div>
<div class="mb-m">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="Tour Eiffel" class="img-fluid" aria-descridedby="descridedby_tour_eiffel" id="tour_eiffel">
<p id="descridedby_tour_eiffel">Label Tour Eiffel</p>
</div>
<div class="mb-m">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="Photo de la Tour Eiffel" class="img-fluid img-thumbnail rounded mx-auto d-block" id="photo_de_la_tour_eiffel">
</div>Paramètres
Voici la liste des différents paramètres de la macro :
- id (string) optionnal - identifiant unique de l'image
- class (string) optionnal - classe(s) css de l'image
- src (string) required - source du fichier image
- alt (string) optionnal - texte alternatif de l'image
- labelDescribedBy (string) optionnal - aria label de l'image
- showLabelDescribedBy (boolean) required - si true, affiche le label saisi dans le paramètre "labelDescribedBy"
- params (string) optionnal - permet d'ajouter des paramètres HTML à l'image
@cFigure
Exemple
<@cFigure caption='The Eiffel Tower'>
<@cImg src='images/paul-dufour-5XndD3FhH-w-unsplash.png' title='Tour Eiffel' labelDescribedBy='Label Tour Eiffel' />
</@cFigure>
<@cFigure>
<@cImg src='images/paul-dufour-5XndD3FhH-w-unsplash.png' title='Tour Eiffel' />
<@cFigCaption class='text-primary'>La Tour Eiffel</@cFigCaption>
</@cFigure>
<figure class="figure">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="img-fluid">
<figcaption class="figure-caption">The Eiffel Tower</figcaption>
</figure>
<figure class="figure">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="img-fluid">
<figcaption class="text-primary">
La Tour Eiffel</figcaption>
</figure>Paramètres
Elément @cFigure (Figure)
Voici la liste des différents paramètres de la macro :
- id (string) optionnal - identifiant unique de la figure
- class (string) optionnal - classe(s) css de la figure
- caption (string) optionnal - contenu de la balise "figcaption"
- params (string) optionnal - permet d'ajouter des paramètres HTML à la figure
Elément @cFigCaption (figcaption)
Voici la liste des différents paramètres de la macro :
- id (string) optionnal - identifiant unique du figCaption
- class (string) optionnal - classe(s) css du figCaption
- params (string) optionnal - permet d'ajouter des paramètres HTML au figCaption
@cPicture
Exemple
<@cText class='mb-m'>
<@cPicture>
<@cPictureSrc srcset='images/paul-dufour-5XndD3FhH-w-unsplash.png' media='(min-width: 800px)' />
<@cPictureSrc srcset='images/paul-dufour-5XndD3FhH-w-unsplash.png' media='(max-width: 799px)' />
<@cImg src='images/paul-dufour-5XndD3FhH-w-unsplash.png' title='Tour Eiffel' />
</@cPicture>
</@cText>
<picture>
<source srcset="images/paul-dufour-5XndD3FhH-w-unsplash.png" media="(min-width: 800px)">
<source srcset="images/paul-dufour-5XndD3FhH-w-unsplash.png" media="(max-width: 799px)">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="img-fluid">
</picture>Paramètres
Elément @cPicture (Picture)
Voici la liste des différents paramètres de la macro :
- id (string) optionnal - identifiant unique de la picture
- class (string) optionnal - classe(s) css de la picture
- params (string) optionnal - permet d'ajouter des paramètres HTML à la picture
Elément @cPictureSrc (Source)
Voici la liste des différents paramètres de la macro :
- id (string) optionnal - identifiant unique de la source
- class (string) optionnal - classe(s) css de la source
- srcset (string) required - source de l'image
- media (string) optionnal - Media Query
- type (string) optionnal - type de ressource
- params (string) optionnal - permet d'ajouter des paramètres HTML à la source
Par défaut le thème embarque un pack d'icônes spécifiques au site Paris.fr designé par la DICOM.
Exemple
Navigation
Function
State
Theme
Logo
<@cTitle level=3>Navigation
<@parisIcon name='burger' type='informative'/>
<@parisIcon name='close' />
<@parisIcon name='arrow-double-right' />
<@parisIcon name='external-link' />
<@parisIcon name='arrow-left' />
<@parisIcon name='arrow-right' />
<@parisIcon name='arrow-up' />
<@parisIcon name='arrow-down' />
<@parisIcon name='home' />
<@cTitle level=3>Function
<@parisIcon name='user' />
<@parisIcon name='plus' />
<@parisIcon name='agenda' />
<@parisIcon name='trash' />
<@parisIcon name='upload' />
<@parisIcon name='arrow-download' />
<@parisIcon name='off' />
<@parisIcon name='dash' />
<@parisIcon name='disk' />
<@parisIcon name='search' />
<@parisIcon name='shield' />
<@parisIcon name='eye' />
<@parisIcon name='eye-off' />
<@parisIcon name='refresh' />
<@parisIcon name='overview' />
<@parisIcon name='edit' />
<@parisIcon name='edit-profile' />
<@parisIcon name='edit-document' />
<@parisIcon name='archive' />
<@parisIcon name='mail' />
<@parisIcon name='like' />
<@parisIcon name='settings' />
<@parisIcon name='filter' />
<@cTitle level=3>State
<@parisIcon name='check' type='informative' title='check' />
<@parisIcon name='check-circle' type='informative' title='check-circle' />
<@parisIcon name='exclamation-circle' type='informative' title='exclamation-circle' />
<@parisIcon name='exclamation' type='informative' title='exclamation' />
<@parisIcon name='stop-circle' type='informative' title='stop-circle' />
<@cTitle level=3>Theme
<@parisIcon name='file-text' />
<@parisIcon name='file-euro' />
<@parisIcon name='file-image' />
<@parisIcon name='help' />
<@parisIcon name='pin' />
<@parisIcon name='play' />
<@parisIcon name='volume' />
<@parisIcon name='clock' />
<@parisIcon name='layout' />
<@parisIcon name='desk' />
<@parisIcon name='bell' />
<@parisIcon name='flag-fr' />
<@parisIcon name='flag-en' />
<@cTitle level=3>Logo
<@parisIcon name='nef' />
<@parisIcon name='fc' />
<@parisIcon name='facebook' />
<@parisIcon name='instagram' />
<@parisIcon name='twitter' />
<@parisIcon name='x' />
<@parisIcon name='linkedin' />
<h3 class="pb-m mt-0">
Navigation</h3>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="burger" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-burger copy-html"data-mce-svg="paris-icon paris-icon-burger" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-burger"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="arrow-double-right" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-arrow-double-right copy-html"data-mce-svg="paris-icon paris-icon-arrow-double-right" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-arrow-double-right"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="external-link" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-external-link copy-html"data-mce-svg="paris-icon paris-icon-external-link" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-external-link"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="arrow-left" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-arrow-left copy-html"data-mce-svg="paris-icon paris-icon-arrow-left" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-arrow-left"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="arrow-right" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-arrow-right copy-html"data-mce-svg="paris-icon paris-icon-arrow-right" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-arrow-right"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="arrow-up" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-arrow-up copy-html"data-mce-svg="paris-icon paris-icon-arrow-up" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-arrow-up"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="arrow-down" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-arrow-down copy-html"data-mce-svg="paris-icon paris-icon-arrow-down" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-arrow-down"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="home" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-home copy-html"data-mce-svg="paris-icon paris-icon-home" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-home"></use>
</svg>
</span>
<h3 class="pb-m">
Function</h3>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="user" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-user copy-html"data-mce-svg="paris-icon paris-icon-user" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-user"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="plus" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-plus copy-html"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-plus"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="agenda" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-agenda copy-html"data-mce-svg="paris-icon paris-icon-agenda" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-agenda"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="trash" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-trash copy-html"data-mce-svg="paris-icon paris-icon-trash" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-trash"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="upload" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-upload copy-html"data-mce-svg="paris-icon paris-icon-upload" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-upload"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="arrow-download" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-arrow-download copy-html"data-mce-svg="paris-icon paris-icon-arrow-download" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-arrow-download"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="off" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-off copy-html"data-mce-svg="paris-icon paris-icon-off" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-off"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="dash" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-dash copy-html"data-mce-svg="paris-icon paris-icon-dash" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-dash"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="disk" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-disk copy-html"data-mce-svg="paris-icon paris-icon-disk" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-disk"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="search" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-search copy-html"data-mce-svg="paris-icon paris-icon-search" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-search"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="shield" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-shield copy-html"data-mce-svg="paris-icon paris-icon-shield" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-shield"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="eye" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-eye copy-html"data-mce-svg="paris-icon paris-icon-eye" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-eye"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="eye-off" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-eye-off copy-html"data-mce-svg="paris-icon paris-icon-eye-off" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-eye-off"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="refresh" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-refresh copy-html"data-mce-svg="paris-icon paris-icon-refresh" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-refresh"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="overview" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-overview copy-html"data-mce-svg="paris-icon paris-icon-overview" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-overview"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="edit" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-edit copy-html"data-mce-svg="paris-icon paris-icon-edit" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-edit"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="edit-profile" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-edit-profile copy-html"data-mce-svg="paris-icon paris-icon-edit-profile" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-edit-profile"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="edit-document" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-edit-document copy-html"data-mce-svg="paris-icon paris-icon-edit-document" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-edit-document"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="archive" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-archive copy-html"data-mce-svg="paris-icon paris-icon-archive" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-archive"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="mail" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-mail copy-html"data-mce-svg="paris-icon paris-icon-mail" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-mail"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="like" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-like copy-html"data-mce-svg="paris-icon paris-icon-like" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-like"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="settings" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-settings copy-html"data-mce-svg="paris-icon paris-icon-settings" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-settings"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="filter" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-filter copy-html"data-mce-svg="paris-icon paris-icon-filter" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-filter"></use>
</svg>
</span>
<h3 class="pb-m">
State</h3>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="check" data-type="informative" data-title="check">
<svg class="paris-icon paris-icon-check copy-html"data-mce-svg="paris-icon paris-icon-check" aria-labelledby="paris-icon-check-paris-title-384557633220061" focusable="false" role="img">
<title id="paris-icon-check-paris-title-384557633220061">check</title>
<use xlink:href="#paris-icon-check"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="check-circle" data-type="informative" data-title="check-circle">
<svg class="paris-icon paris-icon-check-circle copy-html"data-mce-svg="paris-icon paris-icon-check-circle" aria-labelledby="paris-icon-check-circle-paris-title-388041894783531" focusable="false" role="img">
<title id="paris-icon-check-circle-paris-title-388041894783531">check-circle</title>
<use xlink:href="#paris-icon-check-circle"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="exclamation-circle" data-type="informative" data-title="exclamation-circle">
<svg class="paris-icon paris-icon-exclamation-circle copy-html"data-mce-svg="paris-icon paris-icon-exclamation-circle" aria-labelledby="paris-icon-exclamation-circle-paris-title-391526156347001" focusable="false" role="img">
<title id="paris-icon-exclamation-circle-paris-title-391526156347001">exclamation-circle</title>
<use xlink:href="#paris-icon-exclamation-circle"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="exclamation" data-type="informative" data-title="exclamation">
<svg class="paris-icon paris-icon-exclamation copy-html"data-mce-svg="paris-icon paris-icon-exclamation" aria-labelledby="paris-icon-exclamation-paris-title-395010417910471" focusable="false" role="img">
<title id="paris-icon-exclamation-paris-title-395010417910471">exclamation</title>
<use xlink:href="#paris-icon-exclamation"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="stop-circle" data-type="informative" data-title="stop-circle">
<svg class="paris-icon paris-icon-stop-circle copy-html"data-mce-svg="paris-icon paris-icon-stop-circle" aria-labelledby="paris-icon-stop-circle-paris-title-398494679473941" focusable="false" role="img">
<title id="paris-icon-stop-circle-paris-title-398494679473941">stop-circle</title>
<use xlink:href="#paris-icon-stop-circle"></use>
</svg>
</span>
<h3 class="pb-m">
Theme</h3>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="file-text" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-file-text copy-html"data-mce-svg="paris-icon paris-icon-file-text" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-file-text"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="file-euro" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-file-euro copy-html"data-mce-svg="paris-icon paris-icon-file-euro" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-file-euro"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="file-image" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-file-image copy-html"data-mce-svg="paris-icon paris-icon-file-image" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-file-image"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="help" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-help copy-html"data-mce-svg="paris-icon paris-icon-help" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-help"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="pin" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-pin copy-html"data-mce-svg="paris-icon paris-icon-pin" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-pin"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="play" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-play copy-html"data-mce-svg="paris-icon paris-icon-play" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-play"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="volume" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-volume copy-html"data-mce-svg="paris-icon paris-icon-volume" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-volume"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="clock" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-clock copy-html"data-mce-svg="paris-icon paris-icon-clock" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-clock"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="layout" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-layout copy-html"data-mce-svg="paris-icon paris-icon-layout" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-layout"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="desk" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-desk copy-html"data-mce-svg="paris-icon paris-icon-desk" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-desk"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="bell" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-bell copy-html"data-mce-svg="paris-icon paris-icon-bell" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-bell"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="flag-fr" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-flag-fr copy-html"data-mce-svg="paris-icon paris-icon-flag-fr" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-flag-fr"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="flag-en" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-flag-en copy-html"data-mce-svg="paris-icon paris-icon-flag-en" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-flag-en"></use>
</svg>
</span>
<h3 class="pb-m">
Logo</h3>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="nef" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-nef copy-html"data-mce-svg="paris-icon paris-icon-nef" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-nef"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="fc" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-fc copy-html"data-mce-svg="paris-icon paris-icon-fc" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-fc"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="facebook" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-facebook copy-html"data-mce-svg="paris-icon paris-icon-facebook" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-facebook"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="instagram" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-instagram copy-html"data-mce-svg="paris-icon paris-icon-instagram" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-instagram"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="twitter" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-twitter copy-html"data-mce-svg="paris-icon paris-icon-twitter" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-twitter"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="x" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-x copy-html"data-mce-svg="paris-icon paris-icon-x" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-x"></use>
</svg>
</span>
<span class="icon-wrapper main-color fs-4 fw-400 copy-html" data-bs-toggle="popover" data-bs-title="linkedin" data-type="decorative" data-title="">
<svg class="paris-icon paris-icon-linkedin copy-html"data-mce-svg="paris-icon paris-icon-linkedin" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-linkedin"></use>
</svg>
</span>Paramètres
Voici la liste des différents paramètres de la macro :
- id (string) optionnal - identifiant unique de l'icône
- class (string) optionnal - classe(s) css de l'icône
- name (string) required - nom de l'icône, title
- type (string) optionnal - type de l'icon pour l'accessibilité (défaut: "decorative", valeurs possibles: "decorative", "informative")
- title (string) optionnal - titre de l'icon
- params (string) optionnal - permet d'ajouter des paramètres HTML à l'icône
La macro @parisIcon permet de générer des icones spécifiques au site Paris.fr
Par défaut les icônes héritent de la couleur donnée à leur parent HTML