# Catégorie
Page type exemple
MAJ le 10/04/2026Menu sous forme de tuiles
Menu sous forme de tuiles pour les pages principales d'entrée de rubrique.
Voir le code
Sommaire
Les sections « Contenu » reprennent la page modèle du site ; les sections « Catalogue » recensent les composants du gabarit avec leur code, à l'usage de l'intégration.
- Références
- Titres et sous-titres
- Les différents types de texte
- Tableaux
- Formulaires
- Catalogue — charte : couleurs, dégradé, polices
- Catalogue — boutons
- Catalogue — alertes
- Catalogue — cartes d'actualités et de dossiers
- Catalogue — carte héros et liste d'événements
- Catalogue — composants de page interne
- Catalogue — icônes
- Catalogue — composants interactifs
- Intégration — Bootstrap 3 → 5 : les pièges
- Intégration — correspondance des zones
Références
- Code général de la fonction publique
- Loi n° 2017-86 du 27 janvier 2017 modifiée relative à l'égalité et à la citoyenneté
- Décret n° 88-145 du 15 février 1988 relatif aux agents contractuels de la fonction publique territoriale
- Décret n° 2019-1414 du 19 décembre 2019 relatif à la procédure de recrutement pour pourvoir les emplois permanents de la fonction publique ouverts aux agents contractuels
Titres et sous-titres
Rubrique contenant un exemple de présentation avec les différents niveaux de titre et du texte simple.
La hiérarchie se lit à la couleur et à un marqueur orange : filet bicolore sous le niveau 2, barre pour le niveau 3, carré pour le niveau 4, tiret pour le niveau 5. La typographie (familles, corps, graisses) est celle d'avant : c'est volontaire, seules les couleurs ont changé (arbitrage du 17/08/2026).
Titre niveau 3
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt autem blanditiis in cupiditate est, nihil adipisci alias sint non unde ! Repudiandae nam impedit, minus repellat quas voluptatibus laboriosam tenetur quasi ?
Titre niveau 4
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt autem blanditiis in cupiditate est, nihil adipisci alias sint non unde ! Repudiandae nam impedit, minus repellat quas voluptatibus laboriosam tenetur quasi ?
Titre niveau 5
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt autem blanditiis in cupiditate est, nihil adipisci alias sint non unde ! Repudiandae nam impedit, minus repellat quas voluptatibus laboriosam tenetur quasi ?
Titre niveau 6
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt autem blanditiis in cupiditate est, nihil adipisci alias sint non unde ! Repudiandae nam impedit, minus repellat quas voluptatibus laboriosam tenetur quasi ?
Titre niveau 3
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt autem blanditiis in cupiditate est, nihil adipisci alias sint non unde ! Repudiandae nam impedit, minus repellat quas voluptatibus laboriosam tenetur quasi ?
Les différents types de texte
Paragraphes
Paragraphe de base : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum aspernatur in, voluptates unde facilis eligendi reiciendis dolores nisi. Aspernatur libero maxime doloremque iure dolores nulla, eius quod a expedita sapiente ?
Paragraphe mis en forme, avec texte en gras, texte en italique, et deux couleurs de mise en avant : texte couleur 1, texte couleur 2.
Paragraphe type cadre : Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et perspiciatis eligendi nisi tempore consequatur illo corrupti recusandae iste. Fugit, accusamus soluta accusantium quibusdam rem veritatis voluptate dignissimos dolorem qui odit.
Attention : Paragraphe type attention : Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et perspiciatis eligendi nisi tempore consequatur illo corrupti recusandae iste. Fugit, accusamus soluta accusantium quibusdam rem veritatis voluptate dignissimos dolorem qui odit.
Voir le code
Voir le code
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit nostrum dolorem culpa vitae ipsum nemo natus velit excepturi repellat ! Fugiat ratione iste quisquam eius quo dolore. Culpa repellendus dolor voluptatem ? Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis eveniet itaque veniam a delectus vitae voluptas enim eligendi deserunt hic illo quisquam, facere doloremque modi laborum earum quae at nobis. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam porro facilis minima quo magni vel. Exercitationem voluptas reprehenderit voluptatibus atque, quia suscipit minus quos sunt magnam doloremque voluptatum aspernatur ducimus ?
Listes à puce
- élément 1
- élément 2
- élément 3
- sous-élément 1
- sous-élément 2
- sous-élément 3
- élément 4
- élément 5
Listes numérotées
- élément 1
- élément 2
- élément 3
- sous-élément 1
- sous-élément 2
- sous-élément 3
- élément 4
- élément 5
Liens
Liens dans le texte
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, totam dolor ! Ratione at, tempora explicabo consequatur lien au milieu d'un paragraphe enim consectetur omnis, quam veniam sequi vero id repudiandae amet voluptatibus sunt distinctio.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam minus tempora quaerat, modi, fugit distinctio perferendis doloribus quibusdam lien vers un document avec infos de téléchargement (nouvelle fenêtre) numquam exercitationem eum obcaecati similique voluptate vero quam maxime aperiam laborum !
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam minus tempora quaerat, modi, fugit distinctio perferendis doloribus quibusdam lien vers un document en accès privé numquam exercitationem eum obcaecati similique voluptate vero quam maxime aperiam laborum !
Lien centré à la suite d'un paragraphe
Liste de liens
Les pages comportent souvent des listes de liens vers des documents à télécharger.
- Formulaire d'inscription au service Emploi / Remplacement
- Modèle de convention d'affectation à des missions temporaires
- Cadre de classement des archives communales
Voir le code
Tableaux
Lignes deux couleurs, ligne de titre
| Poste | Nom et fonction |
|---|---|
| Président | Laurent PEREA, maire de Saint-Capraise-de-Lalinde |
| Vice-président | Thierry BOIDE, maire de Saint-Géraud-de-Corps |
| Vice-président | Bernard VAURIAC, maire de Saint-Jory-de-Chalais |
| Vice-présidente | Pascale ROUSSIE NADAL, maire de Saint-Privat-en-Périgord |
| Vice-président | Jérôme BETAILLE, maire d'Eymet |
Voir le code
Deux colonnes, entêtes en ligne et en colonne
| Contact | Téléphone | Portable | Courriel |
|---|---|---|---|
| Catherine GANTCH | 05 53 02 87 00 | Envoyer un courriel | |
| Nathalie N'GUYEN | 05 53 02 87 00 | Envoyer un courriel | |
| Nathalie BECKER | 05 53 02 87 00 | Envoyer un courriel |
Voir le code
Tableau long, avec puces et liens
| Motif du recrutement | Emplois concernés | Modalités de recrutement | Possibilités d'ouverture sur un CDI |
|---|---|---|---|
Remplacement temporaire d'un fonctionnaire ou d'un autre agent contractuel (article L.332-13) :
|
Emplois des catégories A, B et C | Contrat pour la durée de l'absence. (NB : le contrat peut prendre effet avant le départ de l'agent à remplacer.) |
NON |
| Dans les communes de moins de 1 000 habitants et les groupements de moins de 15 000 habitants, pour pourvoir à tout emploi (article L.332-8 3°) | Emplois des catégories A, B et C | OUI, à l'issue de 6 ans de CDD | |
| Pour pourvoir des emplois de direction (articles L.343-1 à L.343-3) |
|
Contrat d'une durée non précisée par les textes | NON |
Voir le code
Formulaires
Voir le code
Champs en erreur
La couleur des erreurs est --cdg-error
(charte.css), dérivée de la charte comme le reste : le
rouge #DC3545 de Bootstrap échoue au contraste sur les fonds
clairs de la charte (4,08 :1 sur le lilas, seuil 4,5), et la charte
n'a de toute façon pas de rouge — alert-danger dérive déjà
de --cdg-primary.
Voir le code
Catalogue — charte : couleurs, dégradé, polices
--cdg-brand
titres, menu, pied de page
--cdg-brand-dark
boutons « En lire plus »
--cdg-brand-bg
fonds de sections
--cdg-primary
accent des pages de contenu
--cdg-cta
boutons d'action, puces
--cdg-link-hover
survol des liens
--cdg-dark
texte
--cdg-gradient
ronds d'icônes
Polices
- Archivo — corps de texte (
--cdg-font-body, 19 px) - Bricolage Grotesque — grands titres (
--cdg-font-title) - Archivo Narrow — titres de cartes (
--cdg-font-card) - Archivo Narrow — tuiles, liens de sections (
--cdg-font-condensed) - Archivo — interface, bandeau supérieur (
--cdg-font-ui) - Archivo Narrow — boutons (
--cdg-font-btn)
Catalogue — boutons
Voir le code
Catalogue — alertes
Messages système : retour de formulaire, confirmation, erreur.
À ne pas confondre avec l'encadré rédactionnel « attention »
(.cdg-alert, § types de texte),
qui appartient au contenu de la page.
Alerte
alert-primary — information générale, aux couleurs de la charte.Succès : votre demande a bien été enregistrée.
Information : les inscriptions ouvrent le 1er septembre.
Attention : ce formulaire ferme dans deux jours.
Erreur : l'adresse de courriel saisie n'est pas valide.
Alerte
alert-secondary — message neutre, faible priorité.Voir le code
Avec titre, lien, picto et fermeture
Pièces justificatives manquantes
Votre dossier ne pourra pas être instruit tant qu'il est incomplet. Voir la liste des pièces.
Succès : le document a été téléversé.
Voir le code
Catalogue — cartes d'actualités et de dossiers
Quatre variantes de .card-news : -outline (filet),
défaut (blanc), -photo (photo de fond), -soft (fond lilas).
Voir le code
Carte dossier (image + texte)
Carte dossier
(10 mots) Lorem ipsum dolor sit amet consectetur adipiscing elit sed do
Voir le code
Catalogue — carte héros et liste d'événements
Voir le code
Titres de diapositives
Description facultative de l'événement.
Voir le code
Pour le carrousel complet (flèches, pastilles, bouton pause accessible),
reprendre le motif de #carouselHero2 dans pages/index.html :
la pause est gérée par main.js (aria-pressed, défilement
automatique coupé si prefers-reduced-motion). La variante à deux
cartes côte à côte, pilotée par une rangée de titres (.cdg-ticker),
a été retirée de l'accueil le 17/08/2026 : elle constitue désormais la
seconde version de l'accueil,
index-variante-carrousel.html,
d'où son balisage peut être repris tel quel.
Attention si vous reprenez cette variante : son
carrousel n'est pas celui de Bootstrap. Pour que les diapositives
voisines dépassent, il fallait un autre modèle — Bootstrap met les
siennes en display: none et les empile au même endroit.
La variante utilise le défilement par accroche natif du navigateur
(scroll-snap, composant .cdg-peek), sans
dépendance ajoutée ; le balisage est une simple liste de cartes et
le pilotage est dans main.js.
Catalogue — composants de page interne
Composants du gabarit de page de contenu — exemple complet et réel : agents-contractuels.html.
Contenu de la section. Les sections repliées se déplient toutes
à l'impression (règle @media print).
Encadré informatif .cdg-note (ex-« cadre »).
Variante encadrée .cdg-note-outline : même boîte que les étapes, sans séquence.
- Étape 1 d'une procédure (
.cdg-steps) - Étape 2 — la flèche est dessinée en CSS
- Élément encadré (
.cdg-boxlist) — mêmes boîtes, sans flèche - À utiliser dès que les éléments ne s'enchaînent pas (obligations, cas de figure…) : une flèche affirmerait une chronologie que le texte ne dit pas
Voir le code
Catalogue — icônes
Les pictogrammes Font Awesome de la maquette (modales, pied de page), les
pictos custom (« Base Doc », « Une collectivité ») et les 8 icônes de la page
de profil sont des SVG inline : à copier depuis
partials/footer.html ou je-suis-une-collectivite.html.
Penser à currentColor plutôt qu'une couleur en dur, et à retirer
les id du SVG (collision dans la page).
Catalogue — composants interactifs
Les boutons ci-dessous ouvrent les vrais composants du gabarit,
fournis par partials/footer.html et donc présents sur toutes les pages :
Modale d'exemple
Variantes utiles sur .modal-dialog :
.modal-dialog-centered (centrée verticalement),
.modal-lg / .modal-sm (largeur),
.modal-dialog-scrollable (contenu long, le pied reste visible)
et .modal-fullscreen — c'est cette dernière que retient la
modale « Accès Rapides » ci-dessus, qui est un écran de navigation et non
un dialogue.
Voir le code
Intégration — Bootstrap 3 → 5 : les pièges
Le site actuel est en Bootstrap 3.3.6 + jQuery ; le gabarit est en Bootstrap 5.3 + jQuery 3.7.1. Correspondances les plus fréquentes :
Cohabitation des deux Bootstrap
Dès que window.jQuery existe, Bootstrap 5
se déclare comme plugin jQuery et remplace $().modal(),
$().collapse(), $().dropdown()… Sur une page qui charge
encore Bootstrap 3, ses composants cesseront donc de fonctionner. Deux issues :
ne pas charger les deux versions sur la même page, ou poser
data-bs-no-jquery sur <body> — mais il faut alors
repasser en addEventListener natif les écouteurs d'événements
Bootstrap de main.js, car cet attribut coupe aussi le relais des
événements vers jQuery.
| Bootstrap 3 | Bootstrap 5 |
|---|---|
data-toggle / data-target / data-dismiss | data-bs-toggle / data-bs-target / data-bs-dismiss |
.col-xs-* | .col-* — le palier xs n'existe plus (.col-xs-6 → .col-6) |
.col-*-push-* / .col-*-pull-* | .order-* (ou .offset-*) — push/pull supprimés |
.panel | .card |
.panel-heading / .panel-body / .panel-footer | .card-header / .card-body / .card-footer |
.panel-primary | .card + .text-bg-primary sur l'entête |
.thumbnail + .caption | .card + .card-body — composant supprimé depuis Bootstrap 4 |
.caret | à supprimer — le chevron est dessiné par .dropdown-toggle::after. Le garder en affiche deux |
.input-group-btn | supprimé — le bouton devient enfant direct de .input-group |
.form-inline | supprimé — utilitaires flex (.d-flex .align-items-center .gap-2) |
.close | .btn-close — plus de × à écrire, c'est une image de fond |
.navbar-default / .navbar-right / .navbar-toggle / .navbar-header | .navbar-light .bg-light / .ms-auto / .navbar-toggler / plus d'équivalent (structure aplatie) |
.hidden-xs, .visible-xs | .d-none .d-sm-block, .d-sm-none |
.pull-right / .pull-left | .float-end / .float-start |
.text-right / .text-left | .text-end / .text-start |
.label, .label-primary | .badge, .text-bg-primary |
.img-responsive | .img-fluid |
.sr-only | .visually-hidden |
.center-block | .mx-auto .d-block |
.btn-default | .btn-outline-secondary (ou nos .btn-cdg-*) |
.control-label, .form-group | .form-label, .mb-3 |
$('#id').modal('show') | fonctionne toujours (Bootstrap 5 s'enregistre comme plugin jQuery), ou new bootstrap.Modal('#id').show() |
$(el).on('slid.bs.carousel') | identique — Bootstrap 5 relaie ses événements à jQuery |
Relevé sur cdg24.fr (50 pages échantillonnées sur les 263
du plan du site), les plus fréquentes sont : .caret
(343 occurrences, présente sur 49 pages), .col-xs-*
(148), .panel-heading et .panel-body
(159 chacune), .input-group-btn et
.form-inline (49). À l'inverse, aucune trace de
glyphicon, .well, .jumbotron,
.list-group, .nav-tabs ni
.progress-bar : inutile de les convertir.
Le menu : trois classes obligatoires en Bootstrap 5
Attention : C'est le piège le plus coûteux, et il ne se voit pas dans le balisage : Bootstrap 3 stylait les balises nues, Bootstrap 5 non. Sans les classes ci-dessous, le menu s'affiche sans aucune mise en forme — alors que le HTML paraît correct.
Le balisage actuel d'une rubrique du menu :
<li class="dropdown yamm-fw">
<a class="dropdown-toggle" data-toggle="dropdown" href="…">
<span>Le CDG<strong class="caret"></strong></span></a>.nav-itemsur le<li>et.nav-linksur le<a>sont obligatoires dans un.navbar-nav..dropdown-itemest obligatoire sur chaque lien d'un.dropdown-menu..navbar-expand-*(par exemple.navbar-expand-lg) est obligatoire sur le<nav>et n'existe pas en Bootstrap 3 : sans lui, la barre reste repliée quelle que soit la largeur d'écran.
Le mega menu pleine largeur de yamm n'a pas d'équivalent
natif : il est reproduit ici par .cdg-mega, un
.dropdown-menu élargi (voir partials/header.html).
Feuilles à charger : voir partials/head-assets.html
(Bootstrap, icônes, polices, puis theme.css et
charte.css). En fin de page, dans
cet ordre : jquery.min.js, bootstrap.bundle.min.js,
main.js — jQuery doit précéder Bootstrap pour que celui-ci le
détecte.
Nos styles sont scindés en deux : theme.css est
commun — les composants, les mêmes pour tous les CDG, il
ne consomme que des var(--cdg-*) ;
charte.css est personnalisé — rien que des
variables (couleurs, logo, polices). Il est chargé en dernier, donc c'est
là que se placent vos surcharges : elles l'emportent sur le thème à
spécificité égale, et une mise à jour de theme.css ne les
efface pas.
Intégration — correspondance des zones
| Zone du site actuel | Équivalent du gabarit |
|---|---|
#menu_accessibilite | a.visually-hidden-focusable[href="#contenu"] |
#header — bandeau haut | .cdg-topbar (fond violet, offcanvas Contact / Se connecter) |
#header — logo + recherche | .cdg-header (.cdg-searchbox, pastilles .cdg-shortcut) |
#bloc_menu (yamm) | .cdg-nav + .cdg-mega (desktop) / #offcanvasMenu (mobile) |
#fil_ariane | .breadcrumb.cdg-breadcrumb |
main.col-sm-9 | contenu pleine largeur .container-fluid + .cdg-content |
#bandeau_droit.col-sm-3 (Documents et Outils) | .cdg-page-tools (barre collante) + offcanvas #offcanvasDocuments |
#partenaires_et_portails | .cdg-partners + bloc « Portails » de la modale Accès Rapides |
#menu_bas + #blc_adresse | .cdg-footer |
.retour_haut | .cdg-backtotop (JS inclus) |
Rappel : Les .html à la
racine sont générés : éditer pages/ et
partials/ puis lancer python3 build.py. En revanche
assets/css/charte.css s'édite directement : aucun outil ne le
réécrit. Point ouvert : le contraste blanc sur orange
(≈ 2,4:1, hérité de la maquette) reste à arbitrer pour le RGAA — cf.
ACCESSIBILITE.md.
