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="my-5">
<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="my-5">
<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="my-5">
<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>
Voici la liste des différents paramètres de la macro :
<@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>
Elément @cFigure (Figure)
Voici la liste des différents paramètres de la macro :
Elément @cFigCaption (figcaption)
Voici la liste des différents paramètres de la macro :
<p class="my-5">
<@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>
</p>
<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>
Elément @cPicture (Picture)
Voici la liste des différents paramètres de la macro :
Elément @cPictureSrc (Source)
Voici la liste des différents paramètres de la macro :
Par défaut le thème embarque un pack d'icônes spécifiques au site Paris.fr designé par la DICOM.
Navigation
<@parisIcon name='burger' />
<@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' />
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' />
State
<@parisIcon name='check' />
<@parisIcon name='check-circle' />
<@parisIcon name='exclamation-circle' />
<@parisIcon name='exclamation' />
<@parisIcon name='stop-circle' />
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' />
Logo
<@parisIcon name='nef' />
<@parisIcon name='fc' />
<@parisIcon name='facebook' />
<@parisIcon name='instagram' />
<@parisIcon name='twitter' />
<@parisIcon name='x' />
<@parisIcon name='linkedin' />
Old Icons
<@parisIcon name='shortcut-coins' />
<@parisIcon name='shortcut-cloud' />
<@parisIcon name='shortcut-form' />
<@parisIcon name='shortcut-family' />
<@parisIcon name='shortcut-id-card' />
<@parisIcon name='shortcut-housing' />
<@parisIcon name='shortcut-trash-can-dirty' />
<@parisIcon name='shortcut-bulky' />
<@parisIcon name='shortcut-car' />
<@parisIcon name='shortcut-briefcase' />
<@parisIcon name='check' />
<@parisIcon name='share' />
<@parisIcon name='info' />
<@parisIcon name='bookmark' />
<@parisIcon name='arrow-bottom' />
<@parisIcon name='comment' />
<@parisIcon name='edit' />
<@parisIcon name='upload' />
<@parisIcon name='mail' />
<@parisIcon name='alert-warning' />
<@parisIcon name='alert-danger' />
<@parisIcon name='alert-info' />
<@parisIcon name='alert-check' />
<@parisIcon name='alert-success' />
<@parisIcon name='alert-close' />
<@parisIcon name='alert-error' />
<h3>Navigation</h3>
<svg class="paris-icon paris-icon-burger" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-burger"></use>
</svg>
<svg class="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-close"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-double-right" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-double-right"></use>
</svg>
<svg class="paris-icon paris-icon-external-link" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-external-link"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-left" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-left"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-right" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-right"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-up" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-up"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-down" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-down"></use>
</svg>
<svg class="paris-icon paris-icon-home" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-home"></use>
</svg>
<h3>Function</h3>
<svg class="paris-icon paris-icon-user" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-user"></use>
</svg>
<svg class="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-plus"></use>
</svg>
<svg class="paris-icon paris-icon-agenda" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-agenda"></use>
</svg>
<svg class="paris-icon paris-icon-trash" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-trash"></use>
</svg>
<svg class="paris-icon paris-icon-upload" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-upload"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-download" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-download"></use>
</svg>
<svg class="paris-icon paris-icon-off" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-off"></use>
</svg>
<svg class="paris-icon paris-icon-dash" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-dash"></use>
</svg>
<svg class="paris-icon paris-icon-disk" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-disk"></use>
</svg>
<svg class="paris-icon paris-icon-search" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-search"></use>
</svg>
<svg class="paris-icon paris-icon-shield" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-shield"></use>
</svg>
<svg class="paris-icon paris-icon-eye" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-eye"></use>
</svg>
<svg class="paris-icon paris-icon-eye-off" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-eye-off"></use>
</svg>
<svg class="paris-icon paris-icon-refresh" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-refresh"></use>
</svg>
<svg class="paris-icon paris-icon-overview" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-overview"></use>
</svg>
<svg class="paris-icon paris-icon-edit" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-edit"></use>
</svg>
<svg class="paris-icon paris-icon-edit-profile" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-edit-profile"></use>
</svg>
<svg class="paris-icon paris-icon-edit-document" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-edit-document"></use>
</svg>
<svg class="paris-icon paris-icon-archive" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-archive"></use>
</svg>
<svg class="paris-icon paris-icon-mail" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-mail"></use>
</svg>
<svg class="paris-icon paris-icon-like" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-like"></use>
</svg>
<svg class="paris-icon paris-icon-settings" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-settings"></use>
</svg>
<svg class="paris-icon paris-icon-filter" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-filter"></use>
</svg>
<h3>State</h3>
<svg class="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-check"></use>
</svg>
<svg class="paris-icon paris-icon-check-circle" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-check-circle"></use>
</svg>
<svg class="paris-icon paris-icon-exclamation-circle" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-exclamation-circle"></use>
</svg>
<svg class="paris-icon paris-icon-exclamation" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-exclamation"></use>
</svg>
<svg class="paris-icon paris-icon-stop-circle" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-stop-circle"></use>
</svg>
<h3>Theme</h3>
<svg class="paris-icon paris-icon-file-text" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-file-text"></use>
</svg>
<svg class="paris-icon paris-icon-file-euro" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-file-euro"></use>
</svg>
<svg class="paris-icon paris-icon-file-image" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-file-image"></use>
</svg>
<svg class="paris-icon paris-icon-help" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-help"></use>
</svg>
<svg class="paris-icon paris-icon-pin" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-pin"></use>
</svg>
<svg class="paris-icon paris-icon-play" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-play"></use>
</svg>
<svg class="paris-icon paris-icon-volume" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-volume"></use>
</svg>
<svg class="paris-icon paris-icon-clock" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-clock"></use>
</svg>
<svg class="paris-icon paris-icon-layout" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-layout"></use>
</svg>
<svg class="paris-icon paris-icon-desk" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-desk"></use>
</svg>
<svg class="paris-icon paris-icon-bell" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-bell"></use>
</svg>
<svg class="paris-icon paris-icon-flag-fr" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-flag-fr"></use>
</svg>
<svg class="paris-icon paris-icon-flag-en" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-flag-en"></use>
</svg>
<h3>Logo</h3>
<svg class="paris-icon paris-icon-nef" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-nef"></use>
</svg>
<svg class="paris-icon paris-icon-fc" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-fc"></use>
</svg>
<svg class="paris-icon paris-icon-facebook" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-facebook"></use>
</svg>
<svg class="paris-icon paris-icon-instagram" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-instagram"></use>
</svg>
<svg class="paris-icon paris-icon-twitter" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-twitter"></use>
</svg>
<svg class="paris-icon paris-icon-x" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-x"></use>
</svg>
<svg class="paris-icon paris-icon-linkedin" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-linkedin"></use>
</svg>
<h3>Old Icons</h3>
<svg class="paris-icon paris-icon-shortcut-coins" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-shortcut-coins"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-cloud" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-shortcut-cloud"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-form" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-shortcut-form"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-family" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-shortcut-family"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-id-card" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-shortcut-id-card"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-housing" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-shortcut-housing"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-trash-can-dirty" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-shortcut-trash-can-dirty"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-bulky" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-shortcut-bulky"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-car" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-shortcut-car"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-briefcase" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-shortcut-briefcase"></use>
</svg>
<svg class="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-check"></use>
</svg>
<svg class="paris-icon paris-icon-share" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-share"></use>
</svg>
<svg class="paris-icon paris-icon-info" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-info"></use>
</svg>
<svg class="paris-icon paris-icon-bookmark" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-bookmark"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
<svg class="paris-icon paris-icon-comment" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-comment"></use>
</svg>
<svg class="paris-icon paris-icon-edit" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-edit"></use>
</svg>
<svg class="paris-icon paris-icon-upload" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-upload"></use>
</svg>
<svg class="paris-icon paris-icon-mail" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-mail"></use>
</svg>
<svg class="paris-icon paris-icon-alert-warning" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-alert-warning"></use>
</svg>
<svg class="paris-icon paris-icon-alert-danger" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-alert-danger"></use>
</svg>
<svg class="paris-icon paris-icon-alert-info" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-alert-info"></use>
</svg>
<svg class="paris-icon paris-icon-alert-check" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-alert-check"></use>
</svg>
<svg class="paris-icon paris-icon-alert-success" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-alert-success"></use>
</svg>
<svg class="paris-icon paris-icon-alert-close" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-alert-close"></use>
</svg>
<svg class="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-alert-error"></use>
</svg>
Voici la liste des différents paramètres de la macro :
Par défaut les icônes héritent de la couleur donnée à leur parent HTML
DEPRECATED :
<@cIcon label='Contact' class='address-book' prefix='far fa-' />
<p class="mt-l">
<strong class="main-danger-color me-xl">
DEPRECATED :</strong>
<svg class="paris-icon paris-icon-nef" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-nef"></use>
</svg>
</p>
Cette macro est dépréciée, merci d'utiliser parisIcon
DEPRECATED : Si vous voyez l'icone "nef" dans vos contenu, c'est que cette macro est utilisée mais doit être remplacée par une macro @parisIcon ou par un SVG.