Online-Magazin 2022-4
„Meine BKK“ digital
Online-Magazin 2022-4
+ Stress lass nach in der Weihnachtszeit
+ Professionelle Zahnreinigung
+ Ätherische Öle
Online-Kurse
Flexibel fitter werden
Neue Online-Kurse
+ zu 100 % kostenfrei
+ Überall und jederzeit
+ Professionelle Trainings
Osteopathie
Sanfte Behandlung
Osteopathie
+ 80 % Kostenübernahme
+ bis zu 240 EUR pro Jahr
+ vielseitig anwendbar
Professionelle Zahnreinigung
Glänzende Freuden
Professionelle Zahnreinigung
+ kostenfrei mit DentNet
+ 60 EUR Zuschuss bei Wunschzahnarzt
+ Bequemes Einreichen von Rechnungen
Foto von Person in Sport Klamotten
Bonus-Freuden
Unsere Bonusprogramme
+ mehr Bonus
+ mehr Vielfalt
+ weniger Stress
Online-Kundencenter und App der BKK Freudenberg
BKK-Service
To go
Unsere Kundencenter-App –
immer und überall erreichbar

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

Accordion 1. Punkt: padding: 7px 0px; 1. Punkt hover: font-weight: 700;
  • Liste: ul padding-left: 20px; margin-bottom: 8px
  • Lorem Ipsum
  • Lorem Ipsum

          - Unteraufzählung
          - Abstand: 9x "&nbsp" + "-"
          - Lorem Ipsum
          - Lorem Ipsum

Accordion 2. Punkt
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.

Accordion 3. Punkt

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.

Button Link

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.

Button Link

Ü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)

  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. 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.