Guide de styles web standards de ge.ch

Introduction

En complément de la charte graphique le guide de styles (styleguide) porte sur la mise en application de ces éléments pour les projets internet de la République et Canton de Genève.

Il contient notamment les références couleur, les références typographiques ou même liste des iconographies. Le comportement du responsive webdesign y sont automatiquement intégrés.

Pour créer un site web (ou une application web ) l'utilisation du CSS de production permet partager efficacement ce guide de référence pour les projets. Il permet de valider la compatibilité sur les navigateurs et appareils du marché et de garantir la mise à jour de la documentation. La documentation est au coeur de la communication d’un projet. Elle est mise à jour à chaque modification pour toujours refléter l’état actuel des standards de ge.ch.

Ressources utiles

Des modèles sont disponibles pour intégrer les standards des applications -ou- sites devant appliquer ces visuels :

Entête https://www.ge.ch/templates/4.0/header.html
Pied de page https://www.ge.ch/templates/4.0/footer.html
Page https://www.ge.ch/templates/4.0/index.html

Un document complémentaire référence également les principes graphiques :

Charte graphique

Index

Couleurs > Couleurs de base | Couleurs de statut | Autres couleurs | Couleurs du mode sombre
Typographie > Polices de caractère | Enrichissement et styles | Titres
Références > Liens | Boutons
Eléments > Listes | Elément dépliable | Tableaux
Média > Vidéos
Modèles > Contact
Navigation > Fil d'Ariane | Langues | Pagination

Couleurs

Couleurs de base

La palette des couleurs propre au site est assez limitée pour ne pas donner plus d'importance au contenant qu'au contenu. Une série de gris neutre est ajoutée pour segmenter des zones de mise en avant.

primary
#0C6BA8

background
#ffffff

text
#333333

gris1
#ededed

gris2
#e1e1e1

gris3
#b2b2b2

Couleurs de statuts

Quatre couleurs de complément sont définies dans la palette, afin d'indiquer des statuts dans des formulaires et l'importance de messages à direction des aux usagers.

success
#5cb85c

info
#ffffff

warning
#f0ad4e

danger et notifications
#DD1840

Autres couleurs

Couleurs de complément générées.

#13204c

#555555

#777777

#888888

#999999

#cccccc

#f0f0f0

Couleurs du mode sombre

La palette des couleurs principales a été déclinée pour le mode sombre.

background
#1E1E1E

gris 100
#303030

gris 200
#444

gris 300
#6B6B6B

gris 400
#A5A5A5

gris 500
#E1E1E1

text
#EEE

primary
#eee

Usage

La couleur dominante "primary" [#33ab7] est utilisée pour les actions "positives" et les actions "recommandées". Le bouton avec la couleur "primary" garantissent une avance normale d'un processus, la conclusion d'une action ou d'une séquence.

Le bouton "primary" étant le lien le plus important et/ou l'action souhaitée logique, il doit:

Être le premier bouton dans l'ordre de tabulation des bouton "submit"
Se trouver à gauche quand deux boutons sont l'un à côté de l'autre.
Se trouver hors de portée d'une manipulation erronnée (exemple : la navigation au pouce droit sur un écran de mobile, risque de provoquer un clic non souhaité par simple déplacement vertical dans la page).

Exemple

Voir le code source

<a class="btn btn-primary" href="https://www.ge.ch/">Bouton d'action</a></div>
<a class="btn btn-secondary" href="https://www.ge.ch/">En savoir plus</a></div>

Retour à l'index

Typographie

Usage

Le site www.ge.ch utilise la police de caractère "Roboto" ainsi que les icônes de la police "Fontawesome". Les différentes graisses de la police Roboto sont utilisées selon le besoin (voir les sections "Titres" et "Enrichissements et styles"). L'interlignage est proportionnel à la taille de la police, avec un ratio de 0.73 pour le paragraphe, et de 0.8 pour les titres.

Exemple

Lorem ipsum

Dolor sit amet, consectetur adipiscing elit. Aliquam risus nisl, condimentum nec eros at, pellentesque blandit ipsum. Suspendisse est eros, finibus sit amet vulputate eu, semper eu eros. Suspendisse in mi nisl. Donec et lorem eu justo tincidunt lacinia. Nam blandit mi et purus imperdie, quis porta enim consectetur. Curabitur et nunc bibendum, vehicula felis et, condimentum ante. Suspendisse interdum orci metus, sit amet condimentum erat sollicitudin a.

Integer sagittis scelerisque elit, eget tincidunt sapien interdum.

Morbi efficitur blandit lacus a tristique. Proin gravida, quam vitae hendrerit lacinia, nulla magna ultricies nibh, eget consequat mauris ex at dui. Praesent vitae mi ut felis sodales posuere et ut ligula. Nam ultrices aliquet imperdiet. Duis eu euismod augue, vel ornare velit. Nunc ac sapien nec lacus consectetur bibendum. In non elit rhoncus, ornare augue ac, venenatis neque. In a eros ultrices mi convallis aliquam in vitae urna.

Voir le code source

<h5>
    Lorem ipsum
</h5>
<p>
    Dolor sit amet, consectetur adipiscing elit. Aliquam risus nisl, condimentum nec eros at, 
    pellentesque blandit ipsum. Suspendisse est eros, finibus sit amet vulputate eu, semper eu 
    eros. Suspendisse in mi nisl. Donec et lorem eu justo tincidunt lacinia. Nam blandit mi et 
    <strong>purus imperdie</strong>, quis porta enim consectetur. Curabitur et nunc bibendum, 
    vehicula felis et, condimentum ante. Suspendisse interdum orci metus, sit amet condimentum 
    erat sollicitudin a.
</p>
<div class="exergue">
    Integer sagittis scelerisque elit, eget tincidunt sapien interdum.
</div>
<p>
    <small>
        Morbi efficitur blandit lacus a tristique. Proin gravida, quam vitae hendrerit lacinia, nulla magna ultricies nibh, eget consequat mauris ex at dui. Praesent vitae mi ut felis sodales posuere et ut ligula. Nam ultrices aliquet imperdiet. Duis eu euismod augue, vel ornare velit. Nunc ac sapien nec lacus consectetur bibendum. In non elit rhoncus, ornare augue ac, venenatis neque. In a eros ultrices mi convallis aliquam in vitae urna.
    </small>
</p>

Retour à l'index

Enrichissements et styles

Les enrichissements typographique sont autorisés dans la limite de ce que propose l'éditeur WYSIWYG.

Normal: Lorem ipsum
Gras: Lorem ipsum
Italique: Lorem ipsum
Souligné: Lorem ipsum
Indice inférieur: Lorem _{ispum factor}
Indice supérieur: Lorem ^{auctor libero}
Espace insécable: Lorem ispum
Style de texte exergue: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Style en ligne insécable: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Style encart: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Voir le code source

<p>Normal</p>

<strong>Gras</strong>

<em>Italique</em>

<u>Souligné</u>

Indice <sub>inférieur</sub>

Indice <sup>supérieur</sup>

<span class="edg-cke-nbsp">Espace insécable</span>

<div class="exergue">Style de texte exergue</div>

<span class="edg-cke-nbsp">Style en ligne insécable</span>

Retour à l'index

Titres

Chaque page internet doit comporter un unique titre H1. Puis, pour les titres suivants e la page, il faut utiliser les autres titres dans l'ordre incrémental: H2, H3, etc.

Titre de taille H1

Titre de taille H2

Titre de taille H3

Titre de taille H4

Titre de taille H5

Titre de taille H6

Voir le code source

<h1>Titre de taille H1</h1>

<h2>Titre de taille H2</h2>

<h3>Titre de taille H3</h3>

<h4>Titre de taille H4</h4>

<h5>Titre de taille H5</h5>

<h6>Titre de taille H6</h6>

Retour à l'index

Liens

Usage

Les critères relatifs à la bonne utilisation du titre d’un lien sont basés selon le référentiel AccessiWeb

Exemples

Lien vers le site externe: https://www.ch.ch
Lien vers une adresse e-mail: mon-destinataire@son-fai.ch
Liens vers une autre section de la page courante: Retour en haut
Lien vers un page interne: Document
Lien vers la prestation e-démarche anonyme: Prestation e-démarche anonyme
Lien vers les réseaux sociaux: Facebook Twitter Instagram Linkedin

Voir le code source

<a href="http://ch.ch/">https://www.ch.ch</a>

<a href="mailto:mon-destinataire@son-fai.ch?subject=Le%20sujet%20de%20mon%20message%20(optionnel)&amp;body=Corps%20de%20mon%20message%20(optionnel)" title="Descriptif de l'action">mon-destinataire@son-fai.ch</a>

<a href="#Liens">Retour en haut</a>

<span class="document tag"><a href="/document/6025/telecharger" target="_blank" type="application/pdf" title="Document">Document<span class="far fa-file-pdf"></span></a></span>

<a aria-label="Lien vers la prestation e-demarche" class="e-demarche-logo col-12" href="/node/1"><span>Prestation e-démarche anonyme</span></a>

<a class="social-link no-external" href="https://www.facebook.com/semainedemocratiege"><span class="fa-facebook-square fab">&nbsp;</span><span>Facebook</span></a> 
<a class="social-link no-external" href="https://www.facebook.com/semainedemocratiege"><span class="fa-twitter-square fab">&nbsp;</span><span>Twitter</span></a> 
<a class="social-link no-external" href="https://www.facebook.com/semainedemocratiege"><span class="fab fa-instagram-square">&nbsp;</span><span>Instagram</span></a> 
<a class="social-link no-external" href="https://www.facebook.com/semainedemocratiege"><span class="fa-linkedin fab">&nbsp;</span><span>Linkedin</span></a>

Retour à l'index

Boutons

Usage

Les boutons peuvent être créés à partir:

d'un lien <a class="btn ...">
d'un bouton <button class="btn ...">
d'un champ "input" <input class="btn ...">

Exemples

Lien

Voir le code source

<a class="btn btn-dark">Lien</a>

<button class="btn btn-secondary" type="button">Bouton</button>

<input class="btn btn-primary" type="submit" value="Champ de soumission">

Retour à l'index

Tableaux

Usage

Les tables par défaut sont marquées par des filets de séparations horizontales et verticales. De plus, un rang sur deux à une couleur de fond alternée afin de faciliter la lecture.

A noter que les tableaux ne doivent pas servir au montage de contenus; ils sont exclusivement réservés à l'affichage de données tabulaires.

Exemples

Tableau de base

Prénom	Nom	E-mail
John	Doe	john@example.com
Marie	Moe	marie@exemple.com
Julie	dooley	julie@exemple.com

Tableau dynamique

TITRE	TITRE
data 1	data 2
data 3	data 4

Voir le code source

<table class="table table-responsive">
    <thead>
        <tr>
            <th>Prénom</th>
            <th>Nom</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td><a href="mailto:john@example.com">john@example.com</a></td>
        </tr>
        <tr>
            <td>Marie</td>
            <td>Moe</td>
            <td><a href="mailto:marie@exemple.com">marie@exemple.com</a></td>
        </tr>
        <tr>
            <td>Julie</td>
            <td>dooley</td>
            <td><a href="mailto:julie@exemple.com">julie@exemple.com</a></td>
        </tr>
    </tbody>
</table>


<table class="table datatables table-responsive">
    <thead>
        <tr>
            <th>TITRE</th>
            <th>TITRE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
        <tr>
            <td>data 3</td>
            <td>data 4</td>
        </tr>
    </tbody>
</table>

Retour à l'index

Listes

Usage

Comme leur nom l'indique, les listes non-ordonnées n'ont pas de notion d'ordre et on peut mélanger leurs éléments sans que cela modifie leur sens. Dans le cas des listes ordonnées, les éléments de la liste doivent être lus ou réalisés dans un ordre donné, les éléments sont donc numérotés.

Exemples

Les listes non-ordonnées

Elément de la liste
Elément de la liste
- Sous-élément de la liste
- Sous-élément de la liste
Elément de la liste
Elément de la liste
Elément de la liste

Les listes ordonnées

Elément de la liste
1. Elément de la liste
2. Elément de la liste
Elément de la liste

Voir le code source

<ul>
    <li>Elément de la liste</li>
    <li>Elément de la liste
    <ul>
        <li>Sous-élément de la liste</li>
        <li>Sous-élément de la liste</li>
    </ul>
    </li>
    <li>Elément de la liste</li>
    <li>Elément de la liste</li>
    <li>Elément de la liste</li>
</ul>

<ol>
    <li>Elément de la liste</li>
    <li>Elément de la liste</li>
</ol>

Retour à l'index

Elément dépliable

Usage

Les éléments dépliables, également surnommés "boîtes à coucou" sont utilisables dans le contenu. Elles s’activent avec un click sur un lien (titre) qui rend visible un <div> contenant le contenu.

Plusieurs éléments dépliables peuvent être ouverts simultanément.

Exemple

Titre du contenu dépliable N1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam ut libero et faucibus. Quisque imperdiet sapien venenatis elementum volutpat. Aliquam a ornare velit. Mauris magna erat, vulputate vitae lacus sit amet, aliquet pellentesque nisi. Sed lacus nisl, dictum nec ornare sit amet, auctor at nisi. Donec nec eleifend turpis. Maecenas elementum ut massa et pharetra. Sed convallis non justo sed ultricies. Vivamus venenatis aliquet felis sed vehicula. Cras vel rhoncus risus. Nunc metus libero, convallis non scelerisque vel, egestas vitae tortor.

Titre du contenu dépliable N2

Titre du contenu dépliable N3

Voir le code source

<div class="edg-cke-collapsible-item">
    <p class="edg-cke-collapsible-item-title">
        <a data-toggle="collapse" href="#">Titre du contenu dépliable N1</a>
    </p>
    <div class="collapse edg-cke-collapsible-item-collapse">
        <p class="edg-cke-collapsible-item-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam ut libero et faucibus. Quisque imperdiet sapien venenatis elementum volutpat. Aliquam a ornare velit. Mauris magna erat, vulputate vitae lacus sit amet, aliquet pellentesque nisi. Sed lacus nisl, dictum nec ornare sit amet, auctor at nisi. Donec nec eleifend turpis. Maecenas elementum ut massa et pharetra. Sed convallis non justo sed ultricies. Vivamus venenatis aliquet felis sed vehicula. Cras vel rhoncus risus. Nunc metus libero, convallis non scelerisque vel, egestas vitae tortor.
        </p>
    </div>
</div>

Retour à l'index

Media Vidéo

Usage

Les vidéos de l'Etat de Genève sont uploadées sur les serveurs de notre partenaire.
L'URL reflète la structure d'organisation des répertoires. Le format simplifié d'une vidéo comporte à minima les informations suivantes :

l'URL de la vidéo (format mp4)
une vignette, de la taille de la vidéo (qui est générée automatiquement)

Exemple

Voir le code source

<video data-matomo-title="Charte internet - 3921" controls="controls" poster="https://vod.infomaniak.com/redirect/directiongnraledessystmes_1_vod/deta-transports-39583/mp4-12/lmce_02_2021_hd.jpg">
    <source src="https://vod.infomaniak.com/redirect/directiongnraledessystmes_1_vod/deta-transports-39583/mp4-12/lmce_02_2021_hd.mp4" type="video/mp4 ">
</video>

Retour à l'index

Modèles de contact

Bloc de contact : grande carte et adresse (la carte et l'adresse sont facultatives)
Bloc de contact complet pour un service
Bloc de contact pour un collaborateur

Exemples

Bloc de contact : grande carte et adresse

Bloc de contact complet pour un service

Adresse

Office cantonal de l'emploi (OCE)

Rue des Gares 16
1201 Genève

Tél: +41 22 546 36 80
E-mail: info.oce@etat.ge.ch

Heures d'ouverture

Lundi-Vendredi : 8.00-16.30
Permanence téléphonique
Lundi-Vendredi : 8.00-12.00

Bloc de contact pour une collaborateur

Pour toute information complémentaire

Dorothée Zarjevski Wirthner
Secrétaire adjointe
Office cantonal de l'emploi (OCE)

Case postale 2555
1211 Genève 2
Tél: +41 22 327 96 07
E-mail: dorothee.zarjevski@etat.ge.ch

Voir le code source

<div itemscope="" itemtype="https://schema.org/GovernmentOrganization" class="gech-annuaire gech-annuaire-organisation">
    <span itemprop="name" class="hidden">OCSIN - SCLI - Portefeuille clients Transversal, e-démarches</span>
    <strong>
        OCSIN - SCLI - Portefeuille clients Transversal, e-démarches
    </strong>
    <br>
    <span itemprop="description" class="hidden">
        Service de l'office cantonal des systèmes d'information et du numérique pour le développement de la Plateforme internet de l’État, des intranets et des prestations en ligne
    </span>
    <span itemprop="location" itemscope="" itemtype="http://schema.org/Place">
        <address itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
            <span itemprop="streetAddress">
                Rue du Grand Pré 64-66 Case postale 2285
            </span>
            <br>
            <span itemprop="postalCode">1211</span>
            <span itemprop="addressLocality">Genève 2</span>
            <br>
            <span class="hidden" itemprop="addressCountry">Suisse</span>
        </address>
    </span>
    Tél:
    <span itemprop="telephone">
        <a href="tel:+41223880001">+41 22 388 00 01</a>
    </span>
    <br>
    <div class="sitg">
        <iframe class="SITG_idadresse SITG_idadresse" style="width: 100%;height: 345px;" title="Carte SITG"
                src="https://ge.ch/tergeo/CarteGE/?webmap=d848e099d45746e5b86003d07ce558c7&amp;marker=6.1323933696622;46.216142429532;test2;;;&amp;maponly=true&amp;disable_scroll=true&amp;level=7"
                frameborder="0">
        </iframe>
    </div>
</div>

<h6>Adresse</h6>
<div itemscope="" itemtype="https://schema.org/GovernmentOrganization" class="gech-annuaire gech-annuaire-organisation gech-annuaire-organisation-nomap">
    <span itemprop="name" class="hidden">Office cantonal de l'emploi (OCE)</span>
    <a target="_blank" itemprop="department" href="" data-uo="UO3228">
        <strong>
            Office cantonal de l'emploi (OCE)
        </strong>
    </a>
    <br>
    <span itemprop="location" itemscope="" itemtype="http://schema.org/Place">
        <address itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
            <span itemprop="streetAddress">Rue des Gares 16</span><br>
            <span itemprop="postalCode">1201</span>
            <span itemprop="addressLocality">Genève</span><br>
            <span class="hidden" itemprop="addressCountry">Suisse</span>
        </address>
    </span>
    Tél:
    <span itemprop="telephone">
        <a href="tel:+41225463680">+41 22 546 36 80</a>
    </span>
    <br>
    E-mail:
    <span itemprop="email">
        <a href="mailto:info.oce@etat.ge.ch">info.oce@etat.ge.ch</a>
    </span>
    <br><br>
    <h6>Heures d'ouverture</h6>
    <div itemscope="" itemtype="https://schema.org/GovernmentBuilding">
        Lundi-Vendredi : 8.00-16.30<br>
        Permanence téléphonique<br>
        Lundi-Vendredi : 8.00-12.00<br>
    </div>
</div>

<div itemscope="" itemtype="http://schema.org/Person">
    <span itemprop="name">
        <strong>
            Dorothée
            <span class="text-uppercase">Zarjevski Wirthner</span>
        </strong>
    </span>
    <br>
    <span itemprop="jobTitle">
        <em>Secrétaire adjointe</em>
    </span>
    <br>
    <span itemprop="worksFor">
        <em>Office cantonal de l'emploi (OCE)</em>
    </span>
    <address itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">Case postale 2555</span><br>
        <span itemprop="postalCode">1211&nbsp;</span>
        <span itemprop="addressLocality">Genève 2</span><br>
        <span class="hidden" itemprop="addressCountry">Suisse</span>
        Tél: 
        <a href="tel:+41223279607">
            <span itemprop="telephone">+41 22 327 96 07</span>
        </a>
        <br>
        E-mail: 
        <span itemprop="email">
            <a href="mailto:dorothee.zarjevski@etat.ge.ch">dorothee.zarjevski@etat.ge.ch</a>
        </span>
    </address>
</div>

Retour à l'index

Pagination

Voir le code source

<nav aria-labelledby="pagination-heading" class="pager" role="navigation">
    <h4 class="visually-hidden" id="pagination-heading">Pagination</h4>
    <ul class="pagination justify-content-center pager__items js-pager__items">
        <li class="page-item pager__item is-active"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=0" title="Page courante"><span class="visually-hidden"> Page courante </span>1</a></li>
        <li class="page-item pager__item"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=1" title="Aller à la page 2"><span class="visually-hidden"> Page </span>2</a></li>
        <li class="page-item pager__item"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=2" title="Aller à la page 3"><span class="visually-hidden"> Page </span>3</a></li>
        <li class="page-item pager__item"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=3" title="Aller à la page 4"><span class="visually-hidden"> Page </span>4</a></li>
        <li class="page-item pager__item"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=4" title="Aller à la page 5"><span class="visually-hidden"> Page </span>5</a></li>
        <li class="page-item pager__item"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=5" title="Aller à la page 6"><span class="visually-hidden"> Page </span>6</a></li>
        <li class="page-item pager__item pager__item--next"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=1" rel="next" title="Aller à la page suivante"><span class="visually-hidden">Page suivante</span> <span aria-hidden="true">›</span> </a></li>
        <li class="page-item pager__item pager__item--last"><a class="page-link" href="?titre=&amp;type=All&amp;dossier=All&amp;organisation=All&amp;field_date_publication_value_1=&amp;field_date_publication_value_2=&amp;page=1603" title="Aller à la dernière page"><span class="visually-hidden">Dernière page</span> <span aria-hidden="true">»</span> </a></li>
    </ul>
</nav>

Retour à l'index

Langues

Voir le code source

<ul class="language-selector">
    <li><a class="btn btn-light active" href="/pics-pollution-stick-air-circulation-differenciee" hreflang="fr">fr</a></li>
    <li><a class="btn btn-light" href="/en/stick-air-and-differentiated-traffic-scheme" hreflang="en">en</a></li>
    <li><a class="btn btn-light" href="/de/stick-air-und-der-differenzierte-verkehr" hreflang="de">de</a></li>
    <li><a class="btn btn-light" href="/it/stick-air-e-circolazione-differenziata-ginevra" hreflang="it">it</a></li>
</ul>

Retour à l'index

Fil d’Ariane

Voir le code source

<nav aria-label="breadcrumb" role="navigation">
    <ol class="breadcrumb p-0">
        <li class="breadcrumb-item"><a href="/" title="Accueil">Accueil</a></li>
        <li class="breadcrumb-item"><a href="/dossier" title="Dossiers">Dossiers</a></li>
        <li class="breadcrumb-item"><a href="/dossier/electromobilite" title="Electromobilité">Electromobilité</a></li>
        <li class="breadcrumb-item"><a href="/dossier/electromobilite#enjeux-objectifs" title="Enjeux et objectifs">Enjeux et objectifs</a></li>
    </ol>
</nav>

Retour à l'index

Guide de styles web standards de ge.ch

Introduction

Ressources utiles

Index

Couleurs

Usage

Exemple

Usage

Exemple

Lorem ipsum

Titre de taille H1

Titre de taille H2

Titre de taille H3

Titre de taille H4

Titre de taille H5

Titre de taille H6

Usage

Exemples

Usage

Exemples

Tableaux

Usage

Exemples

Tableau de base

Tableau dynamique

Listes

Usage

Exemples

Les listes non-ordonnées

Les listes ordonnées

Usage

Exemple

Usage

Exemple

Exemples

Bloc de contact : grande carte et adresse

Bloc de contact complet pour un service

Adresse

Heures d'ouverture

Bloc de contact pour une collaborateur

Pour toute information complémentaire

Pagination

Langues

Fil d’Ariane

Cookies