Les images

Prévisualisation Style guide @cImg [New window]

Tour Eiffel

Label Tour Eiffel

Tour Eiffel

Label Tour Eiffel

Photo de la Tour Eiffel

Macro

        <@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>

Html

<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="sr-only">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>
Les paramètres
  • @param - id - string - optional - identifiant unique de l'image
  • @param - class - string - optional - classe(s) css de l'image
  • @param - src - string - required - source du fichier image
  • @param - alt - string - optional - texte alternatif de l'image
  • @param - labelDescribedBy - string - optional - aria label de l'image
  • @param - showLabelDescribedBy - boolean - required - si true, affiche le label saisi dans le paramètre "labelDescribedBy"
  • @param - params - string - optional - permet d'ajouter des paramètres HTML à l'image

Prévisualisation Style guide @cFigure [New window]

The Eiffel Tower
La Tour Eiffel

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>

Html

<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)

Les paramètres
  • @param - id - string - optional - identifiant unique de la figure
  • @param - class - string - optional - classe(s) css de la figure
  • @param - caption - string - optional - contenu de la balise "figcaption"
  • @param - params - string - optional - permet d'ajouter des paramètres HTML à la figure

Elément @cFigCaption (figcaption)

Les paramètres
  • @param - id - string - optional - identifiant unique du figCaption
  • @param - class - string - optional - classe(s) css du figCaption
  • @param - params - string - optional - permet d'ajouter des paramètres HTML au figCaption

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>

Html

<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)

Les paramètres
  • @param - id - string - optional - identifiant unique de la picture
  • @param - class - string - optional - classe(s) css de la picture
  • @param - params - string - optional - permet d'ajouter des paramètres HTML à la picture

Elément @cPictureSrc (Source)

Les paramètres
  • @param - id - string - optional - identifiant unique de la source
  • @param - class - string - optional - classe(s) css de la source
  • @param - srcset - string - required - source de l'image
  • @param - media - string - optional - Media Query
  • @param - type - string - optional - type de ressource
  • @param - params - string - optional - permet d'ajouter des paramètres HTML à la source

Les icônes

Par défaut le thème embarque un pack d'icônes spécifiques au site Paris.fr designé par la DICOM.

Prévisualisation Style guide @parisIcon [New window]

Navigation

Function

State

Theme

Logo

Old Icons

Macro

            

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' />

Html

<h3>Navigation</h3>
<svg class="paris-icon paris-icon-burger" focusable="false" >
<use xlink:href="#paris-icon-burger"></use>
</svg>
<svg class="paris-icon paris-icon-close" focusable="false" >
<use xlink:href="#paris-icon-close"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-double-right" focusable="false" >
<use xlink:href="#paris-icon-arrow-double-right"></use>
</svg>
<svg class="paris-icon paris-icon-external-link" focusable="false" >
<use xlink:href="#paris-icon-external-link"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-left" focusable="false" >
<use xlink:href="#paris-icon-arrow-left"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-right" focusable="false" >
<use xlink:href="#paris-icon-arrow-right"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-up" focusable="false" >
<use xlink:href="#paris-icon-arrow-up"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-down" focusable="false" >
<use xlink:href="#paris-icon-arrow-down"></use>
</svg>
<svg class="paris-icon paris-icon-home" focusable="false" >
<use xlink:href="#paris-icon-home"></use>
</svg>
<h3>Function</h3>
<svg class="paris-icon paris-icon-user" focusable="false" >
<use xlink:href="#paris-icon-user"></use>
</svg>
<svg class="paris-icon paris-icon-plus" focusable="false" >
<use xlink:href="#paris-icon-plus"></use>
</svg>
<svg class="paris-icon paris-icon-agenda" focusable="false" >
<use xlink:href="#paris-icon-agenda"></use>
</svg>
<svg class="paris-icon paris-icon-trash" focusable="false" >
<use xlink:href="#paris-icon-trash"></use>
</svg>
<svg class="paris-icon paris-icon-upload" focusable="false" >
<use xlink:href="#paris-icon-upload"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-download" focusable="false" >
<use xlink:href="#paris-icon-arrow-download"></use>
</svg>
<svg class="paris-icon paris-icon-off" focusable="false" >
<use xlink:href="#paris-icon-off"></use>
</svg>
<svg class="paris-icon paris-icon-dash" focusable="false" >
<use xlink:href="#paris-icon-dash"></use>
</svg>
<svg class="paris-icon paris-icon-disk" focusable="false" >
<use xlink:href="#paris-icon-disk"></use>
</svg>
<svg class="paris-icon paris-icon-search" focusable="false" >
<use xlink:href="#paris-icon-search"></use>
</svg>
<svg class="paris-icon paris-icon-shield" focusable="false" >
<use xlink:href="#paris-icon-shield"></use>
</svg>
<svg class="paris-icon paris-icon-eye" focusable="false" >
<use xlink:href="#paris-icon-eye"></use>
</svg>
<svg class="paris-icon paris-icon-eye-off" focusable="false" >
<use xlink:href="#paris-icon-eye-off"></use>
</svg>
<svg class="paris-icon paris-icon-refresh" focusable="false" >
<use xlink:href="#paris-icon-refresh"></use>
</svg>
<svg class="paris-icon paris-icon-overview" focusable="false" >
<use xlink:href="#paris-icon-overview"></use>
</svg>
<svg class="paris-icon paris-icon-edit" focusable="false" >
<use xlink:href="#paris-icon-edit"></use>
</svg>
<svg class="paris-icon paris-icon-edit-profile" focusable="false" >
<use xlink:href="#paris-icon-edit-profile"></use>
</svg>
<svg class="paris-icon paris-icon-edit-document" focusable="false" >
<use xlink:href="#paris-icon-edit-document"></use>
</svg>
<svg class="paris-icon paris-icon-archive" focusable="false" >
<use xlink:href="#paris-icon-archive"></use>
</svg>
<svg class="paris-icon paris-icon-mail" focusable="false" >
<use xlink:href="#paris-icon-mail"></use>
</svg>
<svg class="paris-icon paris-icon-like" focusable="false" >
<use xlink:href="#paris-icon-like"></use>
</svg>
<svg class="paris-icon paris-icon-settings" focusable="false" >
<use xlink:href="#paris-icon-settings"></use>
</svg>
<svg class="paris-icon paris-icon-filter" focusable="false" >
<use xlink:href="#paris-icon-filter"></use>
</svg>
<h3>State</h3>
<svg class="paris-icon paris-icon-check" focusable="false" >
<use xlink:href="#paris-icon-check"></use>
</svg>
<svg class="paris-icon paris-icon-check-circle" focusable="false" >
<use xlink:href="#paris-icon-check-circle"></use>
</svg>
<svg class="paris-icon paris-icon-exclamation-circle" focusable="false" >
<use xlink:href="#paris-icon-exclamation-circle"></use>
</svg>
<svg class="paris-icon paris-icon-exclamation" focusable="false" >
<use xlink:href="#paris-icon-exclamation"></use>
</svg>
<svg class="paris-icon paris-icon-stop-circle" focusable="false" >
<use xlink:href="#paris-icon-stop-circle"></use>
</svg>
<h3>Theme</h3>
<svg class="paris-icon paris-icon-file-text" focusable="false" >
<use xlink:href="#paris-icon-file-text"></use>
</svg>
<svg class="paris-icon paris-icon-file-euro" focusable="false" >
<use xlink:href="#paris-icon-file-euro"></use>
</svg>
<svg class="paris-icon paris-icon-file-image" focusable="false" >
<use xlink:href="#paris-icon-file-image"></use>
</svg>
<svg class="paris-icon paris-icon-help" focusable="false" >
<use xlink:href="#paris-icon-help"></use>
</svg>
<svg class="paris-icon paris-icon-pin" focusable="false" >
<use xlink:href="#paris-icon-pin"></use>
</svg>
<svg class="paris-icon paris-icon-play" focusable="false" >
<use xlink:href="#paris-icon-play"></use>
</svg>
<svg class="paris-icon paris-icon-volume" focusable="false" >
<use xlink:href="#paris-icon-volume"></use>
</svg>
<svg class="paris-icon paris-icon-clock" focusable="false" >
<use xlink:href="#paris-icon-clock"></use>
</svg>
<svg class="paris-icon paris-icon-layout" focusable="false" >
<use xlink:href="#paris-icon-layout"></use>
</svg>
<svg class="paris-icon paris-icon-desk" focusable="false" >
<use xlink:href="#paris-icon-desk"></use>
</svg>
<svg class="paris-icon paris-icon-bell" focusable="false" >
<use xlink:href="#paris-icon-bell"></use>
</svg>
<svg class="paris-icon paris-icon-flag-fr" focusable="false" >
<use xlink:href="#paris-icon-flag-fr"></use>
</svg>
<svg class="paris-icon paris-icon-flag-en" focusable="false" >
<use xlink:href="#paris-icon-flag-en"></use>
</svg>
<h3>Logo</h3>
<svg class="paris-icon paris-icon-nef" focusable="false" >
<use xlink:href="#paris-icon-nef"></use>
</svg>
<svg class="paris-icon paris-icon-fc" focusable="false" >
<use xlink:href="#paris-icon-fc"></use>
</svg>
<svg class="paris-icon paris-icon-facebook" focusable="false" >
<use xlink:href="#paris-icon-facebook"></use>
</svg>
<svg class="paris-icon paris-icon-instagram" focusable="false" >
<use xlink:href="#paris-icon-instagram"></use>
</svg>
<svg class="paris-icon paris-icon-twitter" focusable="false" >
<use xlink:href="#paris-icon-twitter"></use>
</svg>
<svg class="paris-icon paris-icon-x" focusable="false" >
<use xlink:href="#paris-icon-x"></use>
</svg>
<svg class="paris-icon paris-icon-linkedin" focusable="false" >
<use xlink:href="#paris-icon-linkedin"></use>
</svg>
<h3>Old Icons</h3>
<svg class="paris-icon paris-icon-shortcut-coins" focusable="false" >
<use xlink:href="#paris-icon-shortcut-coins"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-cloud" focusable="false" >
<use xlink:href="#paris-icon-shortcut-cloud"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-form" focusable="false" >
<use xlink:href="#paris-icon-shortcut-form"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-family" focusable="false" >
<use xlink:href="#paris-icon-shortcut-family"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-id-card" focusable="false" >
<use xlink:href="#paris-icon-shortcut-id-card"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-housing" focusable="false" >
<use xlink:href="#paris-icon-shortcut-housing"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-trash-can-dirty" focusable="false" >
<use xlink:href="#paris-icon-shortcut-trash-can-dirty"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-bulky" focusable="false" >
<use xlink:href="#paris-icon-shortcut-bulky"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-car" focusable="false" >
<use xlink:href="#paris-icon-shortcut-car"></use>
</svg>
<svg class="paris-icon paris-icon-shortcut-briefcase" focusable="false" >
<use xlink:href="#paris-icon-shortcut-briefcase"></use>
</svg>
<svg class="paris-icon paris-icon-check" focusable="false" >
<use xlink:href="#paris-icon-check"></use>
</svg>
<svg class="paris-icon paris-icon-share" focusable="false" >
<use xlink:href="#paris-icon-share"></use>
</svg>
<svg class="paris-icon paris-icon-info" focusable="false" >
<use xlink:href="#paris-icon-info"></use>
</svg>
<svg class="paris-icon paris-icon-bookmark" focusable="false" >
<use xlink:href="#paris-icon-bookmark"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-bottom" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
<svg class="paris-icon paris-icon-comment" focusable="false" >
<use xlink:href="#paris-icon-comment"></use>
</svg>
<svg class="paris-icon paris-icon-edit" focusable="false" >
<use xlink:href="#paris-icon-edit"></use>
</svg>
<svg class="paris-icon paris-icon-upload" focusable="false" >
<use xlink:href="#paris-icon-upload"></use>
</svg>
<svg class="paris-icon paris-icon-mail" focusable="false" >
<use xlink:href="#paris-icon-mail"></use>
</svg>
<svg class="paris-icon paris-icon-alert-warning" focusable="false" >
<use xlink:href="#paris-icon-alert-warning"></use>
</svg>
<svg class="paris-icon paris-icon-alert-danger" focusable="false" >
<use xlink:href="#paris-icon-alert-danger"></use>
</svg>
<svg class="paris-icon paris-icon-alert-info" focusable="false" >
<use xlink:href="#paris-icon-alert-info"></use>
</svg>
<svg class="paris-icon paris-icon-alert-check" focusable="false" >
<use xlink:href="#paris-icon-alert-check"></use>
</svg>
<svg class="paris-icon paris-icon-alert-success" focusable="false" >
<use xlink:href="#paris-icon-alert-success"></use>
</svg>
<svg class="paris-icon paris-icon-alert-close" focusable="false" >
<use xlink:href="#paris-icon-alert-close"></use>
</svg>
<svg class="paris-icon paris-icon-alert-error" focusable="false" >
<use xlink:href="#paris-icon-alert-error"></use>
</svg>
Les paramètres
  • @param - id - string - optional - identifiant unique de l'icône
  • @param - class - string - optional - classe(s) css de l'icône
  • @param - name - string - required - nom de l'icône, title
  • @param - title - string - optional - titre de l'icon
  • @param - params - string - optional - 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

Prévisualisation Style guide @cIcon [New window]

DEPRECATED :

Macro

            <@cIcon label='Contact' class='address-book' prefix='far fa-' />

Html

<p class="mt-l">
<strong class="main-danger-color me-xl">
DEPRECATED :</strong>
<svg class="paris-icon paris-icon-nef" focusable="false" >
<use xlink:href="#paris-icon-nef"></use>
</svg>
</p>