Web Style Guide Desktop Version
Überschrift 1: Nunito Sans Schriftgröße: 44px; Zeilenabstand: 1em; font-weight: 700; Farbe: #0065A4
Überschrift 2: Nunito Sans Schriftgröße: 33px; Zeilenabstand: 1em
Überschrift 3: Nunito Sans Schriftgröße: 22px; Zeilenabstand: 1em; font-weight: 400
Überschrift 4: Nunito Sans Schriftgröße: 20px; Zeilenabstand: 1em
Überschrift 5: Nunito Sans Schriftgröße: 18px; Zeilenabstand: 1em
Überschrift 6: Nunito Sans Schriftgröße: 16px; Zeilenabstand: 1em; Farbe: #0065A4
Text & Medien Element test
Fließtext: PT Sans; Schriftgröße: 16px; font-weight: 300; Zeilenabstand: 1,3em; Farbe: #575756
Link in Fließtext Link-Farbe: #4565ad
Platzhalter Beispiel: BKKNAME = ###BKKNAME###
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Hintergrund: #e40513; Text: #ffffff; Innerer Abstand: 8px 15px; Abrundung: 10px; Margin: 15px
Hintergrund: #4565ad
Hintergrund: #e5e7e6; Text: #575756
Box mit Hintergrundfarbe Blau #e40513; width: 100%; Padding zwischen Boxen: 25px; Margin 25px; Padding: 20px
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Button Farbe -> Blau!
Box mit Hintergrundfarbe Hellgrau #4565ad
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Button Link
Box mit Hintergrundfarbe Dunkelgrau #e5e7e6
Textfarbe: #575756 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Button Link
Text & Medien Element mit Hintergrundfarbe Gelb #575756
Textfarbe: #ffffff Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Button Link
Tabelle: TYPO3 Feature Liste
1. Spalte: width: 55%; 1. Zeile: vertical-align: bottom; text-align: left; Padding: 5px; font-weight:700; border-bottom-width: 2px; | 2. Spalte | 3. Spalte | 4. Spalte | 5. Spalte |
---|---|---|---|---|
2. Zeile: background-color: #eee; vertical-align: top; | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor | Lorem Ipsum | ||
3. Zeile | Lorem Ipsum | Lorem Ipsum |
Text & Medien Element
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Button Link
Visueller Trenner: Höhe: 1px; Farbe: #eee; Abstand oben / unten 20px
Accordion
- Liste: ul padding-left: 20px; margin-bottom: 8px
- Lorem Ipsum
- Lorem Ipsum
- Unteraufzählung
- Abstand: 9x " " + "-"
- Lorem Ipsum
- Lorem Ipsum
Headline H5
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
3 Spaltiges Element
Teaserbild: border-radius: 15px; width: 100%; height: auto
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Teaser-Box Gesund leben
4. Spalte
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Übersicht der per Texteditor spezifizierbaren Listenstile - unsortierte Listen
unsortierte Listen ohne spezifische Stile
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
unsortierte Listen mit Bullets (ul)
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
unsortierte Listen mit Pfeilen (ul)
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
unsortierte Listen mit Plus-Zeichen (ul)
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
unsortierte Listen mit Häkchen (ul)
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
sortierte Listen (immer durchnummeriert)
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
Wir sind immer für Sie da – digital und persönlich
Online-Kundencenter
Wir sind rund um die Uhr für Sie erreichbar: Schicken Sie uns eine Nachricht oder erledigen Sie Ihre Anliegen ganz bequem digital.
Persönliche Ansprechpartner
Beratung von Mensch zu Mensch: Bei persönlichen Fragen können Sie Ihren Ansprechpartner direkt anrufen oder ihm eine Mail schreiben.
Kontaktformular
Ihre Kontaktmöglichkeit direkt auf unserer Website: Schreiben Sie uns eine E-Mail über unser Online-Kontaktformular.