Dies ist eine Übersicht der Gestaltungsmöglichkeiten im Backend. Bitte den WYSWYG Editor auf „Text“ Ansicht stellen und die HTML bzw. CSS Klassen beachten.
Styleguide
Farben
green
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
blue
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
teal
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900
yellow
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
red
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
earth
earth-100
earth-200
earth-300
earth-400
earth-500
earth-600
earth-700
earth-800
earth-900
gray
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
Beispiel für eine CSS-Klasse zur Hintergrundfärbung:
bg-blue-400
Beispiel für eine CSS-Klasse zur Schriftfärbung:
color-earth-400
Typografie
Font Serif Monster 96
Font Monster 96
Font Turbo 64
Font Ultra 46
Font Super 32
Font Large 26
Font Big 22
Font Copy 18
Font Small 12
font-size-monster font-serif color-earth-200
font-size-monster font-sm-super
font-size-turbo
font-size-ultra
font-size-super
font-size-large
font-size-big
font-size-copy
font-size-small
Messages
dies ist eine Warnung als Shortcode im WYSIWYG Editor
dies ist eine Info als Shortcode im WYSIWYG Editor
Abstände Innen (padding)
CSS-Klassen für Innenabstände werden wie folgt geschrieben:
p{Seite}-{breakpoint}-{Abstand} also zB.: pr-md-30
zu Lesen wie: Padding Right – ab Medium Breakpoint – 30 Pixel
Abstand nur Links (padding-left)
pl-40
pl-5
pl-10
pl-15
pl-20
…
pl-400
Abstand nur Rechts (padding-right)
pr-40
pr-5
pr-10
pr-15
pr-20
…
pr-400
Abstand Links und Rechts (padding-x)
px-40
px-5
px-10
px-15
px-20
…
px-400
Abstand Oben (padding-top)
pt-40
pt-5
pt-10
pt-15
pt-20
…
pt-400
Abstand Unten (padding-bottom)
pb-40
pb-5
pb-10
pb-15
pb-20
…
pb-400
Abstand auf allen Seiten
p-40
p-5
p-10
p-15
p-20
…
p-400
Abstände Außen (margin)
CSS-Klassen für Außenabstände werden wie folgt geschrieben:
m{Seite}-{breakpoint}-{Abstand} also zB.: mr-md-30
zu Lesen wie: Margin Right – ab Medium Breakpoint – 30 Pixel
Abstand nur Links (margin-left)
ml-40
ml-5
ml-10
ml-15
ml-20
…
ml-400
Abstand nur Rechts (padding-right)
mr-40
mr-5
mr-10
mr-15
mr-20
…
mr-400
Abstand Links und Rechts (padding-x)
mx-40
mx-5
mx-10
mx-15
mx-20
…
mx-400
Abstand Oben (padding-top)
mt-40
mt-5
mt-10
mt-15
mt-20
…
mt-400
Abstand Unten (margin-bottom)
mb-40
mb-5
mb-10
mb-15
mb-20
…
mb-400
Abstand auf allen Seiten
m-40
m-5
m-10
m-15
m-20
…
m-400
Komponenten
Das ist ein Kontaktfeld als Shortcode. Unten folgt ein Kontaktfeld als Sektion. Das Shortcode Kontaktfeld greift auf die Inhalte der Sektion zu.
Kontaktieren Sie uns per Telefon
08442 / 7574
oder per E-Mail
E-Mail schreiben
Das ist ein Kontaktfeld als Shortcode. Unten folgt ein Kontaktfeld als Sektion. Das Shortcode Kontaktfeld greift auf die Inhalte der Sektion zu.
Plätze buchen?
Kontaktieren Sie uns per Telefon
08442 / 7574
oder per E-Mail
E-Mail schreiben
Kontaktieren Sie uns per Telefon
08442 / 7574
oder per E-Mail
E-Mail schreiben
Plätze buchen?
Kontaktieren Sie uns per Telefon
08442 / 7574
oder per E-Mail
E-Mail schreiben
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur.