Zum Hauptinhalt springen
Q8 logo
Q8 logo
    PrivatkundenBusinessÜber uns
  • Essen & Trinken
  • Q8-App
  • Kundenservice
Q8-Station finden
  • Privatkunden
  • Business
  • Über uns
SucheAnmelden
Q8 logo
  • Essen & Trinken
  • Q8-App
  • Kundenservice
Q8-Station finden
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)

  • Wenn Sie an der Zapfsäule mit Ihrer Karte bezahlen, wird zuvor eine Autorisierung Ihres Kontos vorgenommen. Konkret blockiert das Institut, das Ihre Karte ausgestellt hat (nicht Q8), vorübergehend einen Betrag zwischen 125 und 375 Euro. Dies geschieht, weil im Voraus nicht bekannt ist, für wie viel Sie tanken werden. Dieser Betrag stellt - mehr oder weniger - den Höchstbetrag dar, der für eine Vollbetankung ausgegeben werden kann.

    Wenn Sie mit dem Tanken fertig sind, wird der nicht verbrauchte Restbetrag normalerweise sofort freigegeben. Manchmal kommt es jedoch vor, dass Ihre Bank das Guthaben für längere Zeit sperrt, manchmal bis zu 30 Tagen. 
    Die Sperrung bedeutet jedoch nicht, dass der Betrag von Ihrem Konto abgebucht wird, sondern dient lediglich als Zahlungsgarantie.

    Wenn Sie eine schnellere Freigabe des Guthabens wünschen, empfehlen wir Ihnen, sich an Ihre Bank zu wenden.

  • Article not found

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
Alle offenen Stellen anzeigen

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

Tankbeleg anfordern vorübergehend nicht möglich

Wir führen Wartungsarbeiten an dieser Funktion durch. Daher kann derzeit kein Tankbeleg angefordert werden. Wir beheben das so schnell wie möglich. Bitte versuchen Sie es später erneut.

Maintenance icon

Ausfüllen des Formulars vorübergehend nicht möglich

Wir führen Wartungsarbeiten an dieser Funktion durch. Daher können Sie derzeit kein Formular ausfüllen. Wir beheben das Problem so schnell wie möglich. Bitte versuchen Sie es später erneut.

Maintenance icon

Stellenangebot vorübergehend nicht verfügbar

Wir führen Wartungsarbeiten an dieser Funktion durch. Daher können Sie diese Stelle derzeit nicht einsehen. Wir beheben das Problem so schnell wie möglich. Bitte versuchen Sie es später erneut.

Q8 logo
Folgen Sie uns auf

Tanken

KraftstoffePreise und RabatteTankstelle finden

Laden

Q8 electric LadekarteQ8 electric AppUnsere PreiseLadepunkt finden

Essen & Trinken

Delhaize shop&goPanosWe Proudly Serve Starbucks®

Q8 App

SmilesMobil tankenVorteile

Kontakt

Kundenservice
  • KraftstoffePreise und RabatteTankstelle finden
  • Q8 electric LadekarteQ8 electric AppUnsere PreiseLadepunkt finden
  • Delhaize shop&goPanosWe Proudly Serve Starbucks®
  • SmilesMobil tankenVorteile
  • Kundenservice
Rechtliche Hinweise
Nutzungsbedingungen
Datenschutzerklärung
Cookie-Erklärung
Barrierefreiheit
Sicherheitsinformationen

© 2025 - Kuwait Petroleum (Belgium) N.V./S.A. Alle Rechte vorbehalten.