# 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.
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
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) - Barlow Condensed — 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 #carouselHero1 dans pages/index.html :
la pause est gérée par main.js (aria-pressed, défilement
automatique coupé si prefers-reduced-motion).
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 :
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 |
.panel | .card |
.hidden-xs, .visible-xs | .d-none .d-sm-block, .d-sm-none |
.pull-right / .pull-left | .float-end / .float-start |
.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 |
Feuilles à charger : voir partials/head-assets.html
(Bootstrap, icônes, polices, theme.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.
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.
python3 update-charte.py resynchronise couleurs et logos depuis la
maquette en ligne. Point ouvert : le contraste blanc sur orange
(≈ 2,4:1, hérité de la maquette) reste à arbitrer pour le RGAA — cf.
ACCESSIBILITE.md.
