Passer au contenu principal
Q8 logo
Q8 logo
    ParticulierBusinessA propos
  • Nourriture et boissons
  • Appli Q8
  • Service clients
Trouvez une station Q8
  • Particulier
  • Business
  • A propos
RechercheConnexion
Q8 logo
  • Nourriture et boissons
  • Appli Q8
  • Service clients
Trouvez une station Q8
hero

Hero (with or without image)

Optional subheading

Optional paragraph, rule of thumb: never exceed 5 lines of text (desktop) in the hero section. Of course the hero can only be used on top of a page.

Optional buttonssize large in header and banner

Readme

  • This page has all the available blocks you can use on a normal page, with some user guidelines, in alphabetical order

  • Spacers: add a spacer below each block so the lay-out is calm, readable, scannable.

Accordion (with bgr toggle)

    1. With

    2. rich

    3. text


    possible link types:

    • assets

    • e-mail

    • external URL

    • internal link

  • If possible, always use the zendesk option for Q&A.

  • Answer

  • Answer

  • Answer

  • Answer

  • Answer

Optional extra link with arrow. By default use the 'normal' size

Accordion FAQ - link to 2 (up to 7) Zendesk ID's (with bgr toggle)

  • Lorsque vous payez à la pompe avec votre carte, une autorisation est demandée au préalable sur votre compte. Concrètement cela signifie que l'institution qui a émis votre carte (et donc pas Q8) bloque temporairement un montant de 125 à 375 euros. Elle procède ainsi car elle ne sait pas à l'avance pour quel montant vous allez prendre du carburant. Ce montant représente - plus ou moins - le montant maximal qui peut être consacré à un plein de carburant.

    Lorsque vous avez terminé votre plein, le solde non-utilisé est normalement immédiatement libéré. Il arrive cependant que votre banque bloque le solde pendant une période plus longue, pouvant parfois aller jusqu'à 30 jours au maximum.

    La réservation ne signifie toutefois pas que le montant sera débité de votre compte, il sert uniquement de garantie de paiement. 

    Si vous souhaitez que le solde soit débloqué plus rapidement, prenez contact avec votre banque.

  • Dans un monde idéal, chaque composant du carburant (dans ce cas le diesel) est brûlé à 100%, mais la réalité est différente.
    Par une réaction chimique, l'AdBlue transforme les composants qui ne brûlent pas bien (= les gaz nocifs provenant du moteur) en gaz inoffensifs > azote et vapeur (= eau et dioxyde de carbone).
    Contrairement à ce que certains pensent, l'AdBlue n'est pas un additif. Il n'est pas ajouté au diesel, mais il est alimenté séparément et n'est injecté que dans les gaz d'échappement (après la combustion du diesel dans le moteur).
    L'AdBlue est composé de 30% d'urée et d'eau.

    Cliquez ici pour trouver une station Q8 près de chez vous qui vend de l'Adblue.

Optional extra link with arrow. Don't forget to check in zendesk if translations are available!

Banner with or without illustration

Optional subheading

Optional paragraph text (plain text)

Optional link section: link, button (group) or app store buttons

Comparison block

placeholderplaceholder

Item 1: name

pl

Item 2: name

Property 1: name

mobile uses dropdown and optional alternative image

item 2

Optional Category title

Property 2: name

you can add symbols

property x

placeholderplaceholder

Item 1: name

  • Property 1: name

    mobile uses dropdown and optional alternative image

  • Optional Category title
  • Property 2: name

    you can add symbols

Deze asset wordt nog verwijderd voor go live

Content with Asset (with br toggle)

Optional paragraph: this component consists of an image or an illustration with nestable content (left or right).

  • Checklist item 1.
    No rich text, but you can highlight or italic

  • Min. 2 items in a checklist

  • You can add more content with assets and flip the sides of the assets

  • Always check if a space should be added on top of the component

  • Item 5

  • Item 6

  • Max. 7 items in the checklist

Optional extra paragraph

button - size normal!or app icons or link with arrow

Content with icon

sdf

Item title

Item text (use a paragraph of maximum 2 to 3 lines of texts)
sdf

Min. 2 icons

Don't use this component for call to actions
sdf

Max. 3 icons

text
placeholder

Content with asset (with bgr toggle)

Paragraph text.

Optional checklist

  • checklist item 1

  • checklist items 2-7

Optional extra paragraph

Optional button

Features (with bgr toggle)

Optional description. Don't use this block for call to actions.

sdf

Item 1

Description of the feature

Item 2

Icons are optional in the features component. Be consistent in one component (icons for each feature or no icons at all). Don't use this component for longer texts, as you notice, it is not very scannable/readable.

sdf

Item 3

Description of the feature

sdf

Min. 4 items

Description of the feature

sdf

Item 5

Description of the feature

sdf

Max. 6 items

Description of the feature

placeholder

Title

Content of the image banner

Optional extra paragraph

Optional button

Image grid (single or double row, 30/70 50/50 70/30)

alt
alt
alt

Job postings (for certain location with deeplink > workday)

  • Business Development RepresentativeSales
  • Tender Specialist EV & FuelSales
  • Financial Reporting ManagerFinance
  • Business controllerFinance
  • Junior Database Coordinator BeLuxAdmin / Support
Voir toutes les offres d’emploi

Logo grid - min 3. max 15. (mobile: 9) (with bgr toggle)

logo 1
logo 1
logo 1
logo 1
logo 1
logo 1
logo 1
logo 1
logo 1
logo 1
logo 1
logo 1
logo 1
logo 1
logo 1
Optional link with arrow

Numbers (with bgr toggle)

1

A text explaining the number. no richt text but highlights are possible.

2

The minimum amount of items in this component

100%

A text explaining the number (or keyboard symbol)

4

The maximum amount of items in this component

Standalone content (with bgr toggle)

This block has rich text field content.
You have the option to

  • center your text (allign middle)

  • center the entire component

You can also add inline links: external, internal, asset- or mailto:- links.


If you wish, you can add a checklist

  • Item 1

  • Item 2

  • Item 3

and below the optional checklist, you could add an extra pargraph.

with or without buttons, links

Tabs (title = optional)

You can choose from this list

Add min. 2, max. ... tabs.


  • Accordeon

  • Accordeon FAQ

  • Content with asset

  • Standalone content

  • Spacer

  • Tiles

optional extra paragraph

With a link

e.g. Tiles

description

placeholder

Drawer tiltle

brand logo

description

optionsl button
placeholder

Tile 2

description

Testimonials can be used for quotes (w bgr toggle)”
Enter name of witnessEnter e.g. job title, role ...

Tiles

Optional description. Tiles contain illustrations OR images

sdf

Min. 1 tile

Optonal description - link is optional

sdf

Tile 2

Optonal description - link is optional

sdf

Tile 2

Optonal description - link is optional

alt

Max. 4 tiles

Optional description - link is optional

Tiles with drawer

You can add an interactive drawer to tiles (click on the placeholder illustration)

placeholder

Header of the drawer

brand logo placeholder

Description of the drawer. This can be an instruction, more details on a promo ... The drawer can have an image, a logo and a button option

Button
placeholder

Header of the drawer

brand logo placeholder

Description of the drawer. This can be an instruction, more details on a promo ... The drawer can have an image, a logo and a button option

Button

Components not available on content type 'page'

fact

Fact

pull quote

Pull Quote

job overview

Job overview page

This is a page displaying all jobs with filters. They direct towards an automatically created job detail page (sync with workday)

Add blocks to automatically created pages

They will appear on the bottom of the page

station config added components

promo - banner - faq

Global announcement

announcement bar

Announcement bar

appears on top of each page (or if you want, only for specific level navigation pages e.g. 'particulieren' but not 'professioneel')

Re-usable error messages

When one of these services is down, you can add an error message manually to the relevant pages until the problem has been fixed. Add a block of type 'Reusable content reference' and select the right one.

  • Tankbon

  • Forms (Selligent mailhandling)

  • Jobs (Workday)

You can see the reusable blocks below:

Transaction icon

Demande de reçu de carburant temporairement indisponible

Nous effectuons une maintenance sur cette fonctionnalité. Par conséquent, vous ne pouvez pas demander de reçu de carburant pour le moment. Nous résolvons ce problème dans les plus brefs délais. Veuillez réessayer plus tard.

Maintenance icon

Formulaire temporairement indisponible

Nous effectuons une maintenance sur cette fonctionnalité. Vous ne pouvez donc pas remplir de formulaire pour le moment. Nous résolvons ce problème au plus vite. Veuillez réessayer plus tard.

Maintenance icon

Consultation de l’offre d’emploi temporairement indisponible

Nous effectuons une maintenance sur cette fonctionnalité. Vous ne pouvez donc pas consulter cette offre pour le moment. Nous résolvons ce problème au plus vite. Veuillez réessayer plus tard.

Q8 logo
Suivez-nous sur

Faire le plein

CarburantsPrix et réductionsTrouvez une station-service

Recharge électrique

Carte de recharge Q8 electricQ8 electric appNos tarifsTrouvez un point de recharge

Nourriture & boissons

Delhaize shop&goPanosWe Proudly Serve Starbucks®

Appli Q8

SmilesFaire le plein mobileAvantages

Contact

Service clients
  • CarburantsPrix et réductionsTrouvez une station-service
  • Carte de recharge Q8 electricQ8 electric appNos tarifsTrouvez un point de recharge
  • Delhaize shop&goPanosWe Proudly Serve Starbucks®
  • SmilesFaire le plein mobileAvantages
  • Service clients
Mentions légales
Conditions d’utilisation
Protection de la vie privée
Déclaration de cookies
Accessibilité
Procédures de sécurité

© 2025 - Kuwait Petroleum (Belgium) N.V./S.A. Tous droits réservés.