Componenten
De componenten zijn de herbruikbare elementen van het design system van de website be.brussels.
Elke component heeft een functie. Bijvoorbeeld informatie weergeven of interactie mogelijk maken.
We onderscheiden 2 verschillende types componenten:
Built-in componenten: componenten die vooraf geïntegreerd zijn in het CMS, die niet kunnen worden gewijzigd door de Publishers en die basisfunctionaliteiten en een coherente structuur bieden aan de website be.brussels.
Aanpasbare componenten: flexibele componenten die handmatig door de Publisher op een pagina kunnen worden geïntegreerd. Hiermee kan de content worden aangepast aan de specifieke behoeften van de pagina.
Built-in componenten
Component | Beschrijving | |
|---|---|---|
Breadcrumb (kruimelspoor) | Visuele navigatie die het afgelegde pad op de website toont, waardoor het gemakkelijker wordt om de structuur te begrijpen en terug te keren naar vorige pagina's. |  |
Chips | Kleine visuele of interactieve elementen die het mogelijk maken om gegevens in te voeren, selecties te maken, content te filteren of acties te activeren. |  |
Cookietoestemming | Component voor cookietoestemming die het mogelijk maakt om aan te geven welke soorten cookies worden geaccepteerd. |  |
Footer | Component onderaan een pagina met informatie zoals de thematische navigatie, nuttige links, contactgegevens enz. |  |
Header | Component bovenaan een pagina die wordt gebruikt om informatie weer te geven zoals het logo, het menu, het navigatiemenu, de zoekbalk en andere elementen. |  |
Paginering | De paginering bestaat uit het verdelen van een lange lijst met elementen over verschillende pagina's om het gemakkelijker te maken om door de content te navigeren. |  |
Zoekbalk | Invoerveld waarin de gebruiker de zoekterm voor een zoekopdracht kan invoeren. |  |
Taalkeuze | Met dit menu kan de content in een andere taal worden weergegeven. |  |
Subnavigatie – links | Navigatie die wordt gebruikt om de onderliggende elementen van een contentpagina weer te geven. |  |
Related topic | Suggestiepagina's worden automatisch weergegeven volgens hier gedefinieerde regels. |
|
Aanpasbare componenten
Component | Beschrijving | |
Accordion | Interactief element waarmee content op een uitbreidbare manier kan worden gepresenteerd, door delen van de informatie weer te geven of te verbergen. |  |
Block | Component die het mogelijk maakt om 3 soorten informatie weer te geven:
|  (voorbeeld: laatste nieuws)  (voorbeeld: administratiecontact) |
Button (knop) | Interactief aanklikbaar element dat is ontworpen om een actie te starten of de gebruiker naar een ander deel van de website te leiden (ook call-to-action of CTA genoemd). |  |
Card (internal links) | Component die informatie van een pagina groepeert (afbeelding, datum, titel, inleiding) in een kader. Afhankelijk van het type pagina dat is geselecteerd om de card te creëren, varieert de weergegeven informatie. |  |
Contact information | Component die de details van een overheidsinstelling weergeeft, zoals de naam, het adres, de openingstijden, het telefoonnummer, de links naar de sociale netwerken enz. |  |
Contact person | Component die wordt gebruikt om de contactgegevens van een persoon weer te geven. (zie rubriek 'Pagina's') |  |
Exhibitor (list) | Component die wordt gebruikt om informatie over een exposant weer te geven (logo, naam, beschrijving, website). Alleen beschikbaar op een Campaign page. |  |
Herbruikbare content (reusable content) | Content die op verschillende plaatsen op de website kan worden (her)gebruikt (bv. specifieke informatie voor een administratie: logo, nummer, e-mail). |  |
Divider (verdeler) | Paginaopmaakelement dat wordt gebruikt om de content van een pagina op te delen. |  |
Document | Bestand in pdf-formaat dat wordt geïntegreerd en weergegeven als aanklikbare link op een pagina. Door erop te klikken wordt een venster geopend waarmee de gebruiker het document kan downloaden. |  |
Photo gallery (fotogalerij) | Interface-element dat wordt gebruikt om een of meer afbeeldingen weer te geven en ze in een groter formaat weer te geven. |  |
Heading (titel) | Gestructureerd tekstelement dat wordt gebruikt om een hiërarchie van de content te definiëren. Ze worden opgemaakt met verschillende groottes en stijlen om hun belang in de paginastructuur aan te geven. Ze gaan van H2 tot H6. |  |
Image | Een component die een afbeelding weergeeft. |  |
Notice | Deel van de tekst dat in een artikel of een pagina wordt gemarkeerd om de aandacht van de lezer te trekken en belangrijke informatie te benadrukken. |  |
Link | Een interactief tekstelement dat, wanneer erop wordt geklikt, de gebruiker meeneemt naar een ander deel van dezelfde pagina (ankerlink) of naar een andere interne of externe pagina. Let op: zorg ervoor dat je "Open in een nieuw venster" selecteert voor alle externe pagina's of documenten die je wilt downloaden. | 
|
Ankerlink | Link naar een specifiek punt op dezelfde pagina. De bestaande ankerlinks zijn die in de inhoudsopgaves. | |
Externe link | Link naar een andere website. | |
Quote (citaat) | Verklaring van een persoon die wordt weergegeven om de aandacht van de gebruiker te trekken, de content te verrijken en de mening of het standpunt van de auteur te benadrukken. |  |
Rich text | Component die het mogelijk maakt om tekst toe te voegen en op te maken (vet of cursief, hyperlinks, lijsten en andere opmaakfuncties). |  |
Table | Component die wordt gebruikt om een gegevenstabel aan te passen en weer te geven. |  |
Video | Link naar een video op een externe website (Vimeo, YouTube). |  |