Overview

Diese Pattern Library ist ein hoch modulares System für schnelles Website-Prototyping und -Design. Es beinhaltet unterschiedliche Elemente und Komponenten, die zu komplexeren Layout kombiniert werden können. Alle Elemente und Komponenten werden in allen möglichen Varianten, die Sie abbilden können dargestellt.

CSS

Über diese URL lassen sich alle nötigen Styles implementieren

http://mbvo.raatid.net/assets/toolkit/styles/toolkit.css

Java-Script

Über diese URL lassen sich alle nötigen Scripte implementieren

http://mbvo.raatid.net/assets/toolkit/scripts/toolkit.js

Some Pages

Colors

These are the brand colors.

Documentation

General documentation of naming conventions and template usage

Demos

A collection of mockups, demonstrations, proofs-of-concept or anything else that might not be production-ready.


Elements

Alerts

Alerts

Heads up! This alert needs your attention, but it's not super important.
Success! This alert needs your attention and shows a successfull task.
Warning! This alert needs your attention and it shows a warning.
Error! This alert needs your attention and it shows an error message.
Details ansehen

Bank List Item

Bank-List Item Pattern

Bank-List Item Pattern
--
--
--
Details ansehen

Breadcrumb

  • inprogress
Details ansehen

Button Embed

Button embed rating

Button embed

Details ansehen

Button

Button

Button small

Button Icon

Details ansehen

Datepicker

datepicker pattern

  • inprogress

datepicker range pattern

  • inprogress
Von bis
Details ansehen

Icons

Übersicht

search

Beschreibung:

thumbs-up

Beschreibung:

gift

Beschreibung:

map-marker

Beschreibung:

play-circle

Beschreibung:

file-pdf-o

Beschreibung:

question

Beschreibung:

chevron-left

Beschreibung:

chevron-right

Beschreibung:

chevron-up

Beschreibung:

chevron-down

Beschreibung:

facebook

Beschreibung:

xing

Beschreibung:

youtube

Beschreibung:

google-plus

Beschreibung:

twitter

Beschreibung:

linkedin

Beschreibung:

whatsapp

Beschreibung:

circle-thin

Beschreibung:
Leerer Haken im Fragebogen

check-circle-o

Beschreibung:
Aktiver Haken im Fragebogen

diamond

Beschreibung:
Bisher das Symbol für Bank.

phone

Beschreibung:

print

Beschreibung:

envelope

Beschreibung:

globe

Beschreibung:

gavel

Beschreibung:
Icon vor dem Impressum-Link im Banken-Profil

users

Beschreibung:
Bisher genutzt als Anzahl der Stimmen

comment

Beschreibung:

times

Beschreibung:
Kreuz 'schließen'

law

Beschreibung:
Impressum

rating_01

Beschreibung:
Zur Darstellung von Stimmen

rating_02

Beschreibung:
Zur Darstellung von Stimmen

rating_03

Beschreibung:
Zur Darstellung von Stimmen

Details ansehen

Info Bubble

Info-Bubble Pattern

Info-Bubble

Details ansehen

Logo

Details ansehen

Pagination

Pagination

Details ansehen

Rating Result List

rating-result-list FMCC

Ergebnis

  • 2,8Titel
  • 2,8Titel
  • 2,8Titel
  • 2,8Titel

rating-result-list light

Ergebnis

  • 2,8Titel
  • 2,8Titel
  • 2,8Titel
  • 2,8Titel

rating-result-list mbvo

Ergebnis

  • 2,8Titel
  • 2,8Titel
  • 2,8Titel
  • 2,8Titel

rating-result-list-2level

Ergebnis

  • 2,8BeratungsqualitätGewicht 75%
    • 2,8Titel
    • 2,8Titel
    • 2,8Titel
    • 2,8Titel
  • 2,8ServicequalitätGewicht 25%
    • 2,8Titel
    • 2,8Titel
    • 2,8Titel
    • 2,8Titel
Details ansehen

Rating Result

Rating Result Kundenzufriedenheit

Kunden-zufriedenheit
Gesamtnote
1,98
19.1236 Stimmen

Rating Result Kundenote

Kunden-zufriedenheit
Gesamtnote
1,98
19.1236 Stimmen

Rating Result FOKUS-MONEY CityContest

Gesamtnote
1,98
19.1236 Stimmen
Gesamtnote
1,98
19.1236 Stimmen
Gesamtnote
1,98
19.1236 Stimmen

Rating Result Embed

Kunden-
zufriedenheit
Gesamtnote
1,98
19.1236 Stimmen
Details ansehen

Result Title

Result Title

Ihr Suche nach "Searchterm" ergab folgendes Ergebnisse 15

Details ansehen

Slide

slide

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Button label
Details ansehen

Slides

Slide Pattern

...
Details ansehen

Stage Badge

Stage Badge

NEU! Mit PLZ-Umkreissuche
Details ansehen

Type

Heading Elements

  • inprogress

This is a Heading of Words

This is a Heading of Words

This is a Heading of Words

Paragraph Elements

  • inprogress

Though Lausanne is so near Geneva, its history, in historical times, has been widely different from that of the neighbouring town. Geneva enjoyed a modified independence from an early date, and became completely independent early in the sixteenth century. Lausanne, until nearly 300 years later, endured the domination, first of Savoy, and subsequently of Berne.

Though Lausanne is so near Geneva, its history, in historical times, has been widely different from that of the neighbouring town. Geneva enjoyed a modified independence from an early date, and became completely independent early in the sixteenth century. Lausanne, until nearly 300 years later, endured the domination, first of Savoy, and subsequently of Berne.

List Elements

  • inprogress
  1. Ordered Item
  2. Ordered Item
  3. Ordered Item
  • Unordered Item
  • Unordered Item
  • Unordered Item
Details ansehen

Upload Dropzone

Document-Dropzone Pattern

PDF hierher ziehen

Image-Dropzone Pattern

Datei hierher ziehen

Image Dropzone Size-s

Datei hierher ziehen

Datei hierher ziehen

Image Dropzone

Datei hierher ziehen

Datei hierher ziehen

Details ansehen

Components

Admin Data Item

Admin-Data-Item

  • inprogess
Details ansehen

Admin Filter

Filter Pattern

Geschlecht
Alter
Schulabschluss
Zeitraum
Von bis
Details ansehen

Admin Sidebar

Admin Sidebar

Details ansehen

Article

Article Pattern

Headline 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Headline 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Unordert List Headline 3

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Ordert List Headline 3

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

Headline 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Headline 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Details ansehen

Bank Detail

Bank-Detail Pattern Depricated

Gesamtnote im City Contest 2015

1.9
Details ansehen

Kontakt

Tel.:
Fax.:
E-Mail:
Zur Website
Impressum nach §5 TMG

Service Hotline

Notfallnummer für Kartensperrung

Adresse




Öffnungszeiten

Bank-Detail Pattern

Kontaktdaten


Zurück

Weitere Banken in Heilbronn

Ort
FOCUS MONEY
CityContest
Kunden-
Zufriedenheit
Weiter-
Empfehlung
Bankname
Ort
1.0
1.0
20%
Bankname
Ort
--
1.0
20%
Bankname
Ort
--
--
20%
Bankname
Ort
1.0
1.0
20%
Details ansehen

Bank List

Bank-List Default

  • inprogress
Ort
FOCUS MONEY
CityContest
Kunden-
Zufriedenheit
Weiter-
Empfehlung
Bankname
Ort
1.0
1.0
20%
Bankname
Ort
--
1.0
20%
Bankname
Ort
--
--
20%
Bankname
Ort
1.0
1.0
20%

Bank List Ranking

Ort
FOCUS MONEY
CityContest
Kreissparkasse München Starnberg Ebersberg
Euskirchen
3,1
Münchner Bank eG
Euskirchen
3,1
Deutsche Bank AG
Euskirchen
2,5
Deutsche Bank AG
Euskirchen
2,5
Ort
Kunden-
Zufriedenheit
Weiter-
Empfehlung
Volksbank Euskirchen eG
Euskirchen
1,61
50%
Ostsächsische Sparkasse Dresden
Dresden
1,89
50%
Volksbank Mittweida eG
Mittweida
1,74
50%
Volksbank Mittweida eG
Mittweida
1,74
50%

Banklist Tabs

Ort
FOCUS MONEY
CityContest
Kunden-
Zufriedenheit
Weiter-
Empfehlung
Bankname
Ort
1.0
1.0
20%
Bankname
Ort
--
1.0
20%
Bankname
Ort
--
--
20%
Bankname
Ort
1.0
1.0
20%

Bank-List um Bewertung abzugeben

  • inprogress
Ort
Bankname
Bankname
Bankname
Details ansehen

Bank Report Header

Bank Report Header Pattern

Bankenreport Generator

Für die Commerzbank AG

Von bis
Details ansehen

Bank Report

Bank Report Pattern

Aufteilung der Bewertungen nach Alter

Alter Anzahl %
bis 20 Jahre 2 x %
20 - 30 Jahre 2 x %
31 - 40 Jahre 2 x %
41 - 50 Jahre 2 x %
51 - 60 Jahre 2 x %
über 60 Jahre 2 x %

Aufteilung der Bewertungen nach Geschlecht

Geschlecht Anzahl %
Männer 2 x %
Frauen 2 x %

Aufteilung der Bewertungen nach Schulabschluss

Abschluss Anzahl %
bis 20 Jahre 2 x %
20 - 30 Jahre 2 x %
31 - 40 Jahre 2 x %
41 - 50 Jahre 2 x %
51 - 60 Jahre 2 x %
über 60 Jahre 2 x %

Allgemein

Persönlicher Kontakt

Note gesamt: 3,93
Note im gewählten Zeitraum: 3,87

Beratungsqualität

Note gesamt: 3,93
Note im gewählten Zeitraum: 3,87

Beratungsqualität: Produktempfehlungen

Note gesamt: 3,93
Note im gewählten Zeitraum: 3,87

Filiale:

Note gesamt: 3,93
Note im gewählten Zeitraum: 3,87

© 2017 MBVO.de - all rights reserved.

Details ansehen

Benefit Row

Benefit Row Pattern

Details ansehen

Carousel

Details ansehen

Footer

Details ansehen

Form Contact

Form Contact Pattern

Ihre Kontaktdaten

Ihre Anschrift

Sind Sie bereits Kunde der

Fehler: Bitte füllen Sie Anrede, Vorname, Nachname und E-Mailadresse korrekt aus.
Alert title Additional notes taking place here
Details ansehen

Forms

checkbox

Inputs

radio

Select

Textarea

Details ansehen

Header

Header A

Header B

Header C

Details ansehen

Modal

Details ansehen

Notification Box

Oh nein, wir haben leider keine passenden Einträge gefunden...

Details ansehen

Page Header

Page-Header-A

Page-Header-B

Page-Header-C

Details ansehen

Page Section

Page Section Pattern

Details ansehen

Process Indicator

Process-Indicator Overview

  1. 1 Allgemein
  2. 2 Kontakt
  3. 3 Betreuung
  4. 4 Produkte
  5. 5 Filiale
  6. 6 Über Sie
  1. 1 Allgemein
  2. 2 Kontakt
  3. 3 Betreuung
  4. 4 Produkte
  5. 5 Filiale
  6. 6 Über Sie
  1. 1 Allgemein
  2. 2 Kontakt
  3. 3 Betreuung
  4. 4 Produkte
  5. 5 Filiale
  6. 6 Über Sie
  1. 1 Allgemein
  2. 2 Kontakt
  3. 3 Betreuung
  4. 4 Produkte
  5. 5 Filiale
  6. 6 Über Sie
  1. 1 Allgemein
  2. 2 Kontakt
  3. 3 Betreuung
  4. 4 Produkte
  5. 5 Filiale
  6. 6 Über Sie
  1. 1 Allgemein
  2. 2 Kontakt
  3. 3 Betreuung
  4. 4 Produkte
  5. 5 Filiale
  6. 6 Über Sie
  1. 1 Allgemein
  2. 2 Kontakt
  3. 3 Betreuung
  4. 4 Produkte
  5. 5 Filiale
  6. 6 Über Sie

process indicator pattern

  1. 1 Allgemein
  2. 2 Kontakt
  3. 3 Betreuung
  4. 4 Produkte
  5. 5 Filiale
  6. 6 Über Sie
Details ansehen

Question Group

question-group pattern

Titel

Wie zufrieden sind Sie mit den Leistungen der Bank Deutsche Postbank AG in Hamburg?

Würden Sie die Bank Deutsche Postbank AG in Hamburg an Freunde und Bekannte weiterempfehlen?

Details ansehen

Question

Question

Is this an example question?

Question incomplete

Is this an example question?

Details ansehen

Rating Result Tab

rating result tab pattern

Ergebnis

  • 2,8Titel
  • 2,8Titel
  • 2,8Titel
  • 2,8Titel

rating result tab a

Noten der Kundenzufriedenheit aus 19.782 Stimmen

rating result tab b

Noten des FOCUS-MONEY City Contest 2016

Details ansehen

Search Form

Search Form Typ A

Search Form Typ B

Ergebnisse anzeigen

Von bis
Anzahl der Stimmen 1.540

Search Form Typ C

Details ansehen

Sharing Bar

Sharing Bar

Details ansehen

Slider Content

Slider Content

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Button label

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Button label

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Button label

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Button label
Details ansehen

Slider

Slider

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Button label

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Button label

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Button label

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Button label
Details ansehen

Stage

Stage

  • inprogress

Healdine

Some Text

Button
Details ansehen

Tab

Tab Pattern

...
...
...
...

Tab Type A

...
...
...
...
Details ansehen

Teaser Cta

Teaser Call-To-Action-A-Pattern

Subheadline

H2 Lange Headline Call-to-Action!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Details ansehen

Teaser Form

Teaser Form Pattern

Möchten Sie nach einer anderen Bank suchen?

suchen

Teaser Form SM

Alle Banken im Vergleich

suchen
Details ansehen

Teaser Icon

Teaser Icon

  • inprogress
Schritt 1

Finden Sie Ihre Bank

Details ansehen

Teaser Image Text

Typ A

Category

Headline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Typ B

  • inprogress
Category

Headline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Typ C

  • inprogress
Category

Headline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Typ D

  • inprogress
Category

Headline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Details ansehen

Voting Result

voting-result-pattern

Titel
Details ansehen

Widget Advert

widget advert

Werbeanzeigen

Details ansehen

Widget Awards

Widget-Awards Default

Details ansehen

Widget Consultant

widget-consultant

Details ansehen

Widget Contact

Widget Contact

Kontaktdaten

Notfallnummer

49 116 116


Filialenkontakt

07131-634-0
07131-634-5000
mail@volksbank-heilbronn.de


Anschrift

Volksbank Heilbronn eG
Allee 20
74072 Heilbronn



Öffnungszeiten

Montag: 08:30 - 12:30
14:00 - 16:30
Dienstag: 08:30 - 12:30
14:00 - 16:30
Mittwoch: 08:30 - 12:30
14:00 - 16:30
Donnerstag: 8:30 - 12:30
14:00 - 18:00
Freitag: 08:30 - 12:30
14:00 - 16:30
Samstag: geschlossen
Öffnungszeiten

Details ansehen

Widget Embed

widget embed

Ihre Stimmte zählt

Bewerten Sie uns!

Wie zufrieden sind Sie mit uns? Geben Sie Ihre Stimme ab.


10.284 Stimmen:

1,98
Jetzt Bank bewerten

Ihre Stimmte zählt

Bewerten Sie uns!

10.284 Stimmen:

1,98
Jetzt Bank bewerten
Details ansehen

Widget Navigation

Widget Navigation

Details ansehen

Widget Rating Result

widget rating result single

Noten der Kundenzufriedenheit aus 19.782 Stimmen

Bewerten Sie uns Hier Kontakt aufnehmen

widget-rating-result-2level

Noten des FOCUS-MONEY City Contest 2016

Noten der Kundenzufriedenheit aus 19.782 Stimmen

Noten des FOCUS-MONEY City Contest 2016

Noten der Kundenzufriedenheit aus 19.782 Stimmen

Bewerten Sie uns Hier Kontakt aufnehmen

widget rating result

Noten des FOCUS-MONEY City Contest 2016

Noten der Kundenzufriedenheit aus 19.782 Stimmen

Noten des FOCUS-MONEY City Contest 2016

Noten der Kundenzufriedenheit aus 19.782 Stimmen

Bewerten Sie uns Hier Kontakt aufnehmen
Details ansehen

Widget Social

Widget Social

Folgen Sie uns

Details ansehen

Widget

Widget Grunddesign

Widget Title

Some Content for the Widget

Details ansehen