Urgence
Vigilance orange orages : les parcs, jardins et le cimetière sont fermés aujourd’hui jusqu’à 20 h pour protéger les habitants. Consulter les informations
Contenu de la bibliothèque
- Accès rapides
- Bandeau d’accueil
- Carte
- Carte élu
- Carte événement
- Chiffre clé
- Chiffres clés
- Citation
- Empilement d’images
- En-tête de page
- FAQ
- Fiche équipement
- Formulaire de lettre d’information
- Formulaire de recherche
- Galerie
- Image de galerie
- Image empilée
- Liste des actes
- Mosaïque photo
- Page de pagination
- Pagination
- Pastille de carte
- Photo de mosaïque
- Section photo
- Titre de section
- Tuile d'accès rapide
Accès rapides
Composant udalia_theme:quick-access
Liste de tuiles à pictogramme (ul avec role="list"), remplie par des quick-access-item : 6 sur l'accueil, 4 sur « À propos », aussi sur la recherche sans résultat et la page introuvable. 2 colonnes, 3 à partir de 768px, 6 à partir de 1280px. Le composant ne rend pas de nav : pour en faire une navigation, enveloppez-le dans un élément nav nommé « Accès rapides » (<nav aria-label="Accès rapides">…</nav>), comme dans l'exemple « Dans une navigation ».
| Nom | Libellé | Type | Description |
|---|---|---|---|
items |
Tuiles | Slot | Tuiles d'accès rapide, chacune rendue par le composant quick-access-item, dans l'ordre. |
Six tuiles
Accès rapides de l'accueil : six tuiles à pictogramme, dont une vers un site externe (bordure en pointillés, pictogramme « sortie » et badge « Site externe » dans le lien).
Dans une navigation
Quatre tuiles de « À propos de cette démonstration », dans une nav nommée « Accès rapides » par son intégrateur (aria-label sur l'élément nav qui enveloppe le composant).
Ouvrir l’aperçu (Aperçu : Accès rapides – Dans une navigation)
Bandeau d’accueil
Composant udalia_theme:hero
Bandeau éditorial avec titre, chapô et recherche.
| Nom | Libellé | Type | Description |
|---|---|---|---|
search |
Recherche | Slot | Formulaire de recherche intégré. |
media |
Image | Slot | Image de bandeau décorative. |
title |
Titre (requis) | Chaîne de caractères | Titre principal du bandeau. |
eyebrow |
Sur-titre | Chaîne de caractères | Sur-titre facultatif. |
lead |
Chapô | Chaîne de caractères | Chapô facultatif. |
emphasis |
Mot accentué | Chaîne de caractères | Mot mis en avant facultatif. |
Bandeau principal
Bandeau d’accueil avec titre et chapô.
Ouvrir l’aperçu (Aperçu : Bandeau d’accueil – Bandeau principal)
Carte
Composant udalia_theme:card
Carte d'un contenu dans une liste, sur l'accueil ou dans les résultats de recherche. Une seule cible de lien, le titre, dont la zone s'étend à toute la carte, sans lien imbriqué. Le DOM suit l'ordre titre, méta, résumé, image ; la grille remet l'image et la pastille en tête. Toujours une image : sans image dans le slot media, un panneau teinté avec le motif topographique et le pictogramme la remplace. Zoom de l'image de 3 % au plus au survol et au focus, aucun avec la réduction des animations.
| Nom | Libellé | Type | Description |
|---|---|---|---|
media |
Image | Slot | Image du contenu ou de sa thématique, rendue par Drupal (service udalia_display_image, usage card), décorative si le titre suffit. Vide : panneau de repli avec le motif et le pictogramme. |
meta |
Méta | Slot | Date ou état utile rendu par Drupal, par exemple « Publié le <time datetime="2026-10-02">2 octobre 2026</time> ». Jamais de lien ni d'autre contenu interactif : le lien du titre couvre toute la carte. Facultatif. |
variant |
Variante |
Variante
Valeurs : default, result, service, demarche, actualite |
|
title |
Titre (requis) | Chaîne de caractères | Titre du contenu, seul texte du lien de la carte. |
url |
Adresse (requis) | Url | Adresse du contenu, cible du lien du titre. |
heading_level |
Niveau du titre |
Enum
Valeurs : 2, 3, 4 |
Niveau de titre (2 à 4) choisi pour ne sauter aucun niveau dans la page ; sans effet sur l'aspect. 3 par défaut. |
chip |
Pastille | Chaîne de caractères | Thématique, catégorie ou statut affiché en pastille sur l'image. Variante par défaut seulement : ignoré par la variante résultat, qui affiche type_label. Facultatif. |
type_label |
Type de contenu | Chaîne de caractères | Type de contenu d'un résultat de recherche (« Démarche », « Acte »…) : pastille visible masquée aux technologies d'assistance, et texte masqué en préfixe du titre. Variante résultat seulement : ignoré par la variante par défaut, qui affiche chip. |
summary |
Résumé | Chaîne de caractères | Résumé en texte brut ; dans un résultat de recherche, extrait limité à deux lignes. Facultatif. |
pictogram |
Pictogramme de repli | Chaîne de caractères | Clé du pictogramme du sprite du thème (celle de la thématique), affiché dans le panneau de repli quand le slot media est vide. Donnez-en toujours un à la variante par défaut : sans lui, le panneau de repli n'a que le motif, masqué en couleurs forcées. La variante résultat prend « document » à défaut. |
Service municipal
Carte dédiée à un service, avec sa thématique et un résumé de mission.
Résultat sans vignette
Résultat d'un acte, sans image : la vignette laisse place au panneau teinté et au pictogramme document (par défaut, sans prop pictogram) ; le format et le poids sont en méta.
Actualité
Carte d’actualité avec thématique, date et résumé.
Sans image
Carte de démarche sans image propre ni image de thématique : panneau teinté avec le motif topographique et le pictogramme de la thématique.
Avec image
Carte d'actualité : image en tête avec la pastille de thématique, date, titre et résumé. Le titre est le seul lien ; toute la carte est cliquable.
Démarche
Carte d’une démarche dans l’annuaire par thématique.
Résultat de recherche
Résultat avec vignette : type de contenu en pastille, lu en préfixe du titre (« Démarche : Carte nationale d'identité »), extrait de deux lignes.
Carte élu
Composant udalia_theme:elected-card
Carte d’un élu sans page individuelle, avec portrait décoratif facultatif.
| Nom | Libellé | Type | Description |
|---|---|---|---|
portrait |
Portrait | Slot | Portrait décoratif, sans zone d’image si absent. |
name |
Nom (requis) | Chaîne de caractères | Nom de l’élu. |
function |
Fonction (requis) | Chaîne de caractères | Fonction municipale. |
group |
Groupe | Chaîne de caractères | Groupe politique facultatif. |
delegations |
Délégations | Chaîne de caractères | Délégations facultatives. |
Carte événement
Composant udalia_theme:event-card
Carte d’événement avec date lisible, statut et lieu.
| Nom | Libellé | Type | Description |
|---|---|---|---|
title |
Titre (requis) | Chaîne de caractères | Titre de l’événement. |
url |
Adresse (requis) | Chaîne de caractères | Adresse de l’événement. |
date |
Date (requis) | Chaîne de caractères | Date complète de début. |
status |
Statut | Chaîne de caractères | Statut textuel facultatif. |
place |
Lieu | Chaîne de caractères | Lieu facultatif. |
Événement prévu
Ouvrir l’aperçu (Aperçu : Carte événement – Événement prévu)
Chiffre clé
Composant udalia_theme:key-figure
Une valeur finale et son libellé.
| Nom | Libellé | Type | Description |
|---|---|---|---|
value |
Valeur (requis) | Chaîne de caractères | Valeur affichée sans animation. |
label |
Libellé (requis) | Chaîne de caractères | Libellé de la valeur. |
Chiffres clés
Composant udalia_theme:key-figures
Valeurs finales et libellés saisis dans Layout Builder.
| Nom | Libellé | Type | Description |
|---|---|---|---|
items |
Chiffres | Slot | Valeurs finales et libellés. |
title |
Titre (requis) | Chaîne de caractères | Titre de la section. |
eyebrow |
Sur-titre | Chaîne de caractères | Sur-titre facultatif. |
giant_word |
Mot géant | Chaîne de caractères | Mot décoratif masqué aux technologies d’assistance. |
pattern |
Motif | Booléen | Active le motif décoratif. |
Chiffres de la ville
Ouvrir l’aperçu (Aperçu : Chiffres clés – Chiffres de la ville)
Citation
Composant udalia_theme:quote
Citation éditoriale avec guillemets décoratifs, source et portrait facultatif.
| Nom | Libellé | Type | Description |
|---|---|---|---|
portrait |
Portrait | Slot | Portrait rond décoratif facultatif. |
quote |
Citation (requis) | Chaîne de caractères | Texte cité. |
cite |
Source (requis) | Chaîne de caractères | Auteur ou source de la citation. |
Citation municipale
Citation avec sa source, sans portrait.
Empilement d’images
Composant udalia_theme:image-stack
Bloc éditorial alternant texte et images, avec ordre DOM accessible.
| Nom | Libellé | Type | Description |
|---|---|---|---|
items |
Images | Slot | Deux ou trois images de composition. |
title |
Titre (requis) | Chaîne de caractères | Titre du bloc. |
text |
Texte | Chaîne de caractères | Texte avant les images dans le DOM. |
En-tête de page
Composant udalia_theme:page-header
En-tête des pages à gabarit fixe et des pages d'atterrissage sans bandeau d'accueil : fil d'Ariane, sur-titre, titre H1 unique de la page, chapô et méta, puis la photo de tête éventuelle, après le texte, sans texte posé dessus. Le sur-titre suit le H1 dans le DOM et s'affiche au-dessus. Pas de mot mis en avant sur les gabarits fixes.
| Nom | Libellé | Type | Description |
|---|---|---|---|
breadcrumb |
Fil d'Ariane | Slot | Fil d'Ariane de la page, rendu avant le titre. Facultatif. |
meta |
Méta | Slot | Information de publication rendue par Drupal (date de publication ou de mise à jour, dans un élément time), par exemple « Mis à jour le <time datetime="2026-10-02">2 octobre 2026</time> ». Facultatif. |
image |
Photo de tête | Slot | Photo principale du contenu (équipement, événement, actualité, projet, séance), rendue après le texte, en 3:2 puis en 21:9 à partir de 1024px. Élément LCP de la page : jamais chargée en différé. Facultatif. |
title |
Titre (requis) | Chaîne de caractères | Titre de la page (titre du contenu), rendu dans le seul H1 de la page. |
eyebrow |
Sur-titre | Chaîne de caractères | Type de contenu, thématique ou catégorie, affiché en pastille au-dessus du titre. Facultatif. |
lead |
Chapô | Chaîne de caractères | Résumé de la page en une ou deux phrases, en texte brut. Facultatif. |
pattern |
Motif topographique | Booléen | Vrai pour poser le motif topographique décoratif dans le coin supérieur droit de l'en-tête (pages d'atterrissage sans bandeau d'accueil), sur 40 % de sa largeur et 60 % de sa hauteur. Le texte reçoit alors un voile. Réglé par l'intégrateur ou le validateur, jamais par le rédacteur ; masqué, avec son voile, en couleurs forcées et à l'impression. Sans effet quand le slot image est rempli : jamais de motif derrière une photo. |
Page d'atterrissage
Page d'atterrissage sans bandeau d'accueil : motif topographique dans un coin (40 % de la surface au plus), texte sous un voile.
Ouvrir l’aperçu (Aperçu : En-tête de page – Page d'atterrissage)
Avec photo de tête
Fiche d'équipement : la photo principale suit le bloc de texte, en 3:2 puis en 21:9 à partir de 1024px. Le motif demandé (`pattern`) est ignoré : jamais de motif derrière une photo.
Ouvrir l’aperçu (Aperçu : En-tête de page – Avec photo de tête)
Sans photo
Fil d'Ariane, sur-titre, titre, chapô et méta d'une page démarche.
FAQ
Composant udalia_theme:faq
Questions fréquentes dans des détails natifs, sans JavaScript.
| Nom | Libellé | Type | Description |
|---|---|---|---|
items |
Questions | Slot | Questions et réponses rendues par Drupal. |
Questions fréquentes
Groupe de questions et réponses ouvertes nativement.
Fiche équipement
Composant udalia_theme:facility-card
Carte d’un équipement municipal avec adresse, téléphone et lien.
| Nom | Libellé | Type | Description |
|---|---|---|---|
image |
Image | Slot | Image rendue par Drupal. |
hours |
Horaires | Slot | Horaires rendus par le service d’ouverture. |
title |
Titre (requis) | Chaîne de caractères | Nom de l’équipement. |
url |
Adresse (requis) | Url | Adresse de la fiche équipement. |
address |
Adresse | Chaîne de caractères | Adresse publique facultative. |
phone |
Téléphone | Chaîne de caractères | Numéro affiché facultatif. |
phone_url |
Adresse téléphonique | Url | Cible tel du téléphone facultatif. |
Fiche équipement
Carte d’un équipement municipal avec adresse, téléphone et horaires.
Ouvrir l’aperçu (Aperçu : Fiche équipement – Fiche équipement)
Formulaire de lettre d’information
Composant udalia_theme:newsletter-form
Cadre visuel pour un formulaire externe rendu par Drupal, sans élément form propre.
| Nom | Libellé | Type | Description |
|---|---|---|---|
form |
Formulaire | Slot | Formulaire Form API rendu par Drupal. |
title |
Titre (requis) | Chaîne de caractères | Titre visible du formulaire. |
privacy |
Mention RGPD | Chaîne de caractères | Mention de protection des données. |
Formulaire de recherche
Composant udalia_theme:search-form
Formulaire de recherche en GET, envoyé sans JavaScript par son bouton, jamais à la saisie : région de recherche (role="search") nommée, champ pilule blanc bordé avec le bouton plein « Rechercher » intégré, empilés dans un bloc arrondi sous 768px. Libellé visible (« Que recherchez-vous ? » sur la page de recherche et l'accueil) ou masqué (barre utilitaire, où le bouton reste visible). L'adresse d'envoi se termine par l'ancre #resultats, le H2 de décompte des résultats ; pas d'aria-live.
| Nom | Libellé | Type | Description |
|---|---|---|---|
filters |
Filtres | Slot | Champs supplémentaires du même formulaire, rendus après le champ, par exemple les pilules de choix du type de contenu (fieldset et legend visible, vrais boutons radio). Ils ne soumettent jamais le formulaire d'eux-mêmes. Facultatif. |
action |
Adresse d'envoi (requis) | Url | Adresse de la page de résultats, terminée par l'ancre #resultats. |
name |
Nom du champ (requis) | Chaîne de caractères | Nom du paramètre des mots recherchés dans l'adresse. |
value |
Mots recherchés | Chaîne de caractères | Mots déjà recherchés, repris dans le champ. Facultatif. |
label |
Libellé (requis) | Chaîne de caractères | Libellé du champ (« Que recherchez-vous ? »), visible ou masqué selon label_visible. |
label_visible |
Libellé visible | Booléen | Vrai pour afficher le libellé au-dessus du champ ; faux pour le masquer (il reste lu par les technologies d'assistance). Faux par défaut. |
landmark_label |
Nom de la région (requis) | Chaîne de caractères | Nom de la région de recherche, distinct d'une autre région de recherche de la page (« Rechercher sur le site » dans la barre utilitaire). |
Recherche de contenus
Formulaire de la page de recherche : libellé visible, champ de mots et vraies pilules radio du filtre de type, envoyé par le bouton uniquement.
Ouvrir l’aperçu (Aperçu : Formulaire de recherche – Recherche de contenus)
Galerie
Composant udalia_theme:gallery
Galerie progressive avec vignettes, liens de repli et visionneuse native accessible.
| Nom | Libellé | Type | Description |
|---|---|---|---|
items |
Images | Slot | Vignettes rendues par gallery-item. |
title |
Titre (requis) | Chaîne de caractères | Titre de la galerie. |
Galerie de photos
Galerie avec deux images de démonstration et liens de repli.
Image de galerie
Composant udalia_theme:gallery-item
Vignette liée vers l’image originale, utilisable sans JavaScript.
| Nom | Libellé | Type | Description |
|---|---|---|---|
image |
Vignette | Slot | Image rendue par Drupal, avec son texte alternatif. |
url |
Image originale (requis) | Url | Adresse de l’image originale. |
alt |
Texte alternatif | Chaîne de caractères | Texte alternatif de l’image. |
caption |
Légende | Chaîne de caractères | Légende facultative. |
Image empilée
Composant udalia_theme:image-stack-item
Image informative d’un empilement.
| Nom | Libellé | Type | Description |
|---|---|---|---|
image |
Image | Slot | Image rendue par Drupal. |
alt |
Texte alternatif (requis) | Chaîne de caractères | Texte alternatif obligatoire. |
badge |
Pastille | Chaîne de caractères | Texte réel facultatif. |
Image avec pastille
Ouvrir l’aperçu (Aperçu : Image empilée – Image avec pastille)
Liste des actes
Composant udalia_theme:act-list
Liste accessible d’actes publiés.
| Nom | Libellé | Type | Description |
|---|---|---|---|
items |
Actes | Slot | Éléments de liste, généralement des liens vers des actes publiés. |
Mosaïque photo
Composant udalia_theme:photo-mosaic
Quatre ou cinq figures informatives dans une mosaïque responsive.
| Nom | Libellé | Type | Description |
|---|---|---|---|
items |
Photos | Slot | Quatre ou cinq photo-mosaic-item. |
Page de pagination
Composant udalia_theme:pagination-item
Élément de la liste des pages d'une pagination (slot items) : lien vers une page, page courante ou points de suspension pour des pages omises. Le lien est nommé « Page 2 » pour les technologies d'assistance.
| Nom | Libellé | Type | Description |
|---|---|---|---|
type |
Type d'élément |
Enum
Valeurs : page, ellipsis |
« page » pour un lien vers une page, « ellipsis » pour signaler des pages omises (sans lien). |
number |
Numéro de page | Nombre | Numéro de la page, à partir de 1. Requis pour le type « page ». |
url |
Adresse de la page | Url | Adresse de la page. Requise pour le type « page ». |
current |
Page courante | Booléen | Vrai pour la page affichée : elle est pleine et porte aria-current="page". Une seule par pagination. |
Pages omises
Points de suspension entre deux groupes de pages, sans lien.
Ouvrir l’aperçu (Aperçu : Page de pagination – Pages omises)
Page courante
Page affichée, pleine, avec aria-current="page".
Ouvrir l’aperçu (Aperçu : Page de pagination – Page courante)
Lien vers une page
Lien vers la page 2, nommé « Page 2 ».
Ouvrir l’aperçu (Aperçu : Page de pagination – Lien vers une page)
Pagination
Composant udalia_theme:pagination
Navigation nommée « Pagination » entre les pages d'une liste longue, par liens réels (adresses partageables). « Précédent » et « Suivant » sont absents, et non désactivés, en première et en dernière page ; la page courante porte aria-current="page". Cibles d'au moins 44px.
| Nom | Libellé | Type | Description |
|---|---|---|---|
items |
Pages | Slot | Liste des pages, chacune rendue par le composant pagination-item, dans l'ordre ; une seule page courante. |
previous_url |
Adresse de la page précédente | Url | Adresse de la page précédente ; vide en première page, où « Précédent » n'est pas affiché. |
next_url |
Adresse de la page suivante | Url | Adresse de la page suivante ; vide en dernière page, où « Suivant » n'est pas affiché. |
Dernière page
Page 5 sur 5 : « Suivant » est absent, la page 5 porte aria-current="page".
Première page
Page 1 sur 5 : « Précédent » est absent, la page 1 porte aria-current="page".
Page intermédiaire
Page 3 sur 9 : « Précédent » et « Suivant » présents, pages omises signalées par des points de suspension.
Pastille de carte
Composant udalia_theme:card-chip
Pastille blanche d'une carte (thématique, catégorie, statut), posée par la grille en haut à gauche de l'image. Texte réel, placé dans le DOM après le titre de la carte. Dans un résultat de recherche, la carte la masque aux technologies d'assistance et la double d'un texte masqué.
| Nom | Libellé | Type | Description |
|---|---|---|---|
label |
Libellé (requis) | Chaîne de caractères | Texte court de la pastille, par exemple la thématique du contenu. |
Pastille
Pastille de thématique, telle qu'elle se pose sur l'image d'une carte.
Photo de mosaïque
Composant udalia_theme:photo-mosaic-item
Figure informative avec texte alternatif obligatoire.
| Nom | Libellé | Type | Description |
|---|---|---|---|
image |
Image | Slot | Image rendue par Drupal. |
alt |
Texte alternatif (requis) | Chaîne de caractères | Texte alternatif obligatoire. |
Photo informative
Ouvrir l’aperçu (Aperçu : Photo de mosaïque – Photo informative)
Section photo
Composant udalia_theme:photo-section
Section sombre nommée avec photo décorative ou repli topographique.
| Nom | Libellé | Type | Description |
|---|---|---|---|
content |
Contenu | Slot | Contenu de la section. |
image |
Photo | Slot | Photo décorative avec alt vide. |
title |
Titre (requis) | Chaîne de caractères | Titre H2 de la section. |
Section sombre
Titre de section
Composant udalia_theme:section-heading
Ouvre une section : sur-titre en pastille, titre H2 avec un mot mis en avant éventuel, lien de section explicite (« Tout l'agenda »). Sur grand écran, le lien est aligné à droite du titre ; sous 768px, il devient un bouton pilule placé après le contenu de la section. Le sur-titre et le mot mis en avant sont saisis par le validateur ou l'intégrateur, jamais par le rédacteur.
| Nom | Libellé | Type | Description |
|---|---|---|---|
content |
Contenu | Slot | Contenu de la section, par exemple une grille de cartes. Sous 768px, le lien de section se place après lui. |
title |
Titre (requis) | Chaîne de caractères | Texte du titre de la section, rendu en H2. |
eyebrow |
Sur-titre | Chaîne de caractères | Texte court affiché en pastille au-dessus du titre (texte réel, pas un titre). Facultatif. |
emphasis |
Mot mis en avant | Chaîne de caractères | Mot du titre affiché dans la couleur d'accent : sa première occurrence exacte dans le titre (sensible à la casse et aux accents, même au milieu d'un mot) est mise en avant. Sans effet si le texte ne figure pas tel quel dans le titre. Facultatif. |
link_label |
Intitulé du lien de section | Chaîne de caractères | Intitulé explicite du lien vers la liste complète, compréhensible hors contexte (« Tout l'agenda », pas « Voir plus »). Le lien n'est affiché qu'avec son adresse. |
link_url |
Adresse du lien de section | Url | Adresse de la liste complète, interne au site. |
Titre seul
Titre de section sans sur-titre, sans lien ni contenu.
Complet
Sur-titre, titre avec un mot mis en avant, lien de section et contenu. Sous 768px, le lien devient un bouton pilule après le contenu.
Tuile d'accès rapide
Composant udalia_theme:quick-access-item
Tuile des accès rapides (slot items) : un lien dont le titre est le seul nom, avec un pictogramme décoratif au-dessus. Une tuile externe porte une bordure en pointillés, le pictogramme « sortie » et le badge « Site externe » dans le lien, et s'ouvre dans le même onglet. Cible d'au moins 44px.
| Nom | Libellé | Type | Description |
|---|---|---|---|
title |
Titre (requis) | Chaîne de caractères | Intitulé de la tuile, seul nom du lien. |
url |
Adresse (requis) | Url | Destination de la tuile, interne ou externe. |
pictogram |
Pictogramme | Chaîne de caractères | Clé d'un pictogramme du sprite du thème, choisie par l'intégrateur (jamais téléversée). Sans pictogramme, la tuile montre l'icône « flèche » dans un rond teinté. |
external |
Site externe | Booléen | Vrai pour une destination hors du site : bordure en pointillés, pictogramme « sortie » et badge « Site externe » dans le lien. Le lien s'ouvre dans le même onglet. |
Tuile externe
Tuile vers un site externe : bordure en pointillés, pictogramme « sortie » et badge « Site externe » dans le lien, même onglet.
Ouvrir l’aperçu (Aperçu : Tuile d'accès rapide – Tuile externe)
Tuile seule
Tuile interne à pictogramme ; le titre nomme seul le lien.
Ouvrir l’aperçu (Aperçu : Tuile d'accès rapide – Tuile seule)
Tuile sans pictogramme
Lien libre ajouté sans pictogramme : icône « flèche » dans un rond teinté, décorative.
Ouvrir l’aperçu (Aperçu : Tuile d'accès rapide – Tuile sans pictogramme)