Composants

Composants

Les composants sont les éléments réutilisables du système de conception du site be.brussels.

Chaque composant a une fonction. Par exemple, afficher des informations ou permettre une interaction. 

Composants personnalisables

Composant

Description

Accordéon

Élément interactif qui permet de présenter du contenu de manière extensible, en affichant ou masquant des sections d'informations.

Block

Composant permettant d'afficher trois types d'informations :

  • L’ensemble des actualités (sous forme d’overview)

  • Les dernières actualités (sous forme de cartes)

  • Un contact administration (sous forme de formulaire – uniquement disponible sur une page Administration)

(exemple : dernières actualités)
(exemple : contact administration)

Button (bouton)

Élément interactif cliquable, conçu pour déclencher une action ou diriger vers une autre partie du site (aussi appelé « call-to-action, CTA).

Call to action (CTA)

Composant permettant d’inviter l’utilisateur à réaliser une action

 

 

Carte (internal links)

Composant qui regroupe des informations d’une page (image, date, titre, introduction) dans un conteneur.

Dépendamment du type de page sélectionné pour créer la carte, les informations affichées varieront.

Contact information

Composant affichant les détails d’une institution publiques comme le nom, l'adresse, les heures d'ouverture, le numéro de téléphone, et les liens vers les réseaux sociaux, etc.

 

*Une explication complète de l'utilisation des informations de contact se trouve en bas de page.

 

image-20240904-074320.png
image-20240904-074434.png
image-20240904-074535.png

 

Contact person

Composant utilisé pour afficher les coordonnées d’une personne.

(cfr. Section Pages)

contactpersoon.png

Contenu réutilisable (reusable content)

Contenu qui peut être (ré-)utilisé à plusieurs endroits différents sur le site (eg. Information spécifique à une administration : logo, numéro, e-mail)

Divider (diviseur)

Élément de mise en page qui permet de diviser le contenu d'une page.

divider.png

Document

Fichier au format PDF intégré et affiché sous forme de lien cliquable sur une page. En cliquant dessus, une fenêtre s’ouvre permettant à l’utilisateur de télécharger le document.

Exhibitor (list)

Composant utilisé pour afficher les informations d’un exposant (logo, nom, description, site internet). Uniquement disponible sur une Campaign Page.

Grid Container

Composant permettant d’agencer d’autres composants en colonne. Ce composant n’est pas activé par défaut.

 

Photo gallery (galerie de photos)

Élément d'interface utilisé pour afficher une ou plusieurs images et permettre de la/les visualiser en plus plus grand.

Heading (titre)

Élément de texte structuré utilisé pour définir une hiérarchie dans le contenu. Ils sont formatés avec différentes tailles et styles pour indiquer leur niveau d'importance dans la structure de page. Ils vont de H2 à H6.

image-20240125-134417.png

Image

Un composant qui affiche une image.

Interactive map

Carte interactive avec des marqueurs prédéfinis ou réalisés à la volée.
Plus d’explications ici.

 

image-20240723-105959.png

 

Notice

Partie de texte mise en évidence dans un article ou une page pour attirer l'attention du lecteur et souligner des informations importantes.

 

Key figure

Donnée chiffrée mise en évidence

Lien

Élément de texte interactif amenant à un autre endroit de la même page (lien d’ancrage) ou à une autre page interne ou externe, lorsqu'il clique dessus.

Attention : veillez à sélectionner “Ouvrir dans une nouvelle fenêtre” pour toutes les pages externes où documents à télécharger.

 

Lien d’ancrage

Lien qui renvoie à un point spécifique de la même page.

Plus d’explications ici

Lien externe

Lien vers un autre site web.

Quote (citation)

Déclaration d'une personne qui est affichée pour attirer l'attention de l'utilisateur, pour enrichir le contenu et pour souligner l'opinion ou le point de vue de l'auteur.

Rich text

Composant permettant d'ajouter et de formater du texte (de mettre en gras ou en italique, d'ajouter des liens hypertexte, des listes, et d'autres fonctionnalités de formatage).

Simulator

Composant qui permet d’afficher une série de questions pour permettre de déterminer si on est éligible à une situation prédéfinie.

Ce composant doit être créé pour chaque demande avant de pouvoir l’ajouter à une page.

 

Table

Composant permettant de personnaliser et d'afficher un tableau de données.

Timeline

Ligne du temps interactive avec ou sans image

 

 

Video (vidéo)

Lien vers une vidéo sur un site distant (Vimeo, YouTube).

Il existe deux composants vidéos :

  • remote video force la lecture de la vidéo dans une nouvelle fenêtre

  • embedded remote video permet la lecture de la vidéo dans la page, à condition d’accepter les cookies tiers

Contact information : how to

Vue globale des champs CMS

  1. Related administrations : Le logo tel que défini dans la page admin (cliquable) + Une description qui reprend l’intro de la page admin

  2. Related administrations contact : Les différents contact avec un bouton pour montrer « plus d’infos »

  3. Side bar : reusable item : Le logo et les informations de contact de l’administration

image-20240830-131745.png

Cas A: Je suis une administration qui rédige une page dont je suis le seul owner et je veux montrer toutes mes informations de contact

image-20240830-132502.png

Cas B : Je suis une administration qui rédige une page dont je suis seule owner et je ne veux pas montrer toutes mes informations de contact

image-20240830-132615.png

Cas C : Je suis une administration qui rédige une news

image-20240830-132745.png

Cas D : Je rédige une page avec plusieurs administrations responsables

image-20240830-132817.png