- Störer können sowohl in der Bühne wie auch in Column Controls gesetzt werden
Badge
Die Badge ist die univerale Störerkomponente im Projekt.
Die markante, aufsteigende Schräge referenziert auf das Logo der Deutschen Bank und ist immer auf einer Seite des Störers. Der Styleguide gibt vor, dass Störer der Deutschen Bank immer die Bündigkeit zu einer Kante des Elementes suchen, auf denen sie liegen. Das gelingt im Webseitenkontext nicht immer, da wir auch frei im Contentbereich oder auf Bildern Störer als Gestaltungselemente einsetzen können. Zumindest in der Bühne, wo er immer links steht und am oberen Bühnenrand liegt, erfüllt der Störer aber die genannte Styleguidevorgabe.
Nutzungshinweise
Anwendungsbeispiele
Badge in 50/50 Column Control mit internem Link
Kundenempfehlung
Prämie bis zu 600 €
Top-Kontoleistungen weiterempfehlen
Top-Girokonto für Minderjährige
Kinderkonto
Das Girokonto für Ihren Nachwuchs
Störer "Big Maintext"
- Genereller Aufbau das Störers
- Störer mit Preline (dadurch wird die horizontale Linie im Störer gesetzt)
- Der Info-Text ist Unterstrichen, wenn der Störer verlinkt ist und eignet sich so als Marker für das Linkziel
- Störer mit "Prefix vor Maintext". Dieser Text wird kleiner dargestellt und eignet sich sehr gut für Konditionen
- Störer mit "Maintext Suffix". Dieser Text wird kleiner dargestellt und eignet sich sehr gut für Konditionen
- Störer mit Preline (dadurch wird die horizontale Linie im Störer gesetzt)
- Der Info-Text ist Unterstrichen, wenn der Störer verlinkt ist und eignet sich so als Marker für das Linkziel
- Störer ohne Preline (dadurch wird keine horizontale Linie im Störer gesetzt)
- Ungünstig, da Text verloren wirkt und sollte vermieten werden
Störer "Normal Maintext"
- Störer mit "Normal Maintext". Es wird keine Linie dargestellt
- Störer mit "Normal Maintext". Es wird keine Linie dargestellt
- Störer mit "Normal Maintext". Es wird keine Linie dargestellt
- Störer mit "Normal Maintext" und "Preline"
- Störer mit "Normal Maintext" und "Preline"
- Störer mit "Normal Maintext" ohne "Preline"
- Zweizeilig ok; einzeilig wirkt Text verloren und sollte deshalb vermieden werden
Ausrichtung des Störers
- zentriert
- rechts
Vertikale Ausrichtung oben
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. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
Vertikale Ausrichtung mitte
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. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
Vertikale Ausrichtung unten
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. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.