MOLECULES

Progress Bar

The progress bar visually represents a process that consists of several steps. It guided the user through a larger number of steps with the goal of completing a specific process, such as a checkout process.

Sketch name:

Progress Bars

Order tracking

unrefactored
This component is only documented here but is not in a state to be used. Please feel free to refactor it first and document refactored version here before using it.

Fluid:

Status: Bestellt

Status: Versandt

Status: In Zustellung

Status: Zugestellt

Responsive:

The Order Tracking progress bar shows the current shipping status of an order. They are mostly used in the customer account under Orders.

Checkout

unrefactored
This component is only documented here but is not in a state to be used. Please feel free to refactor it first and document refactored version here before using it.

Fluid:

1
Anmeldung
2
Bestelldaten eingeben
3
Bestellung überprüfen

Responsive:


Order cancel

Unrefactored
This component is only documented here but is not in a state to be used. Please feel free to refactor it first and document refactored version here before using it.

Fluid:

1
Artikel auswählen
2
Abfrage Kontodaten
3
Antrag überprüfen

Responsive:


Usage

  • ● to inform users about process progress (e.g. delivery status)
  • ● to guide users through a process consisting of several steps (checkout)