Style Guide 13

Modul: Bildteaser
Hover:
– Hintergrund standardmässig: Color Secondary:
linear-gradient(-172deg, #618D9E 0%, #305578 100%);
– Wenn man ein Bild einfügt, ersetzt dies den blauen Hintergrund
– Seitenverhältnis immer 1:1 (quadratisch)
– Felder im Backend pro Eintrag: Titel, Buttontext, Button-Link, Bild
Aktuelle
Sammlungen
Sie möchten Ihre
NPO zertifizieren
lassen?
Typografie S:
font-family: Akkurat-Bold;
font-size: 32px;
color: #FFFFFF;
line-height: 35px;
Sammlungen anzeigen
Einschätzung einholen
Typografie M:
font-size: 50px;
line-height: 54px;
– Ganzes Rechteck ist hover-sensitiv
– Das Bild vergrössert sich auf 112%
Typografie L:
font-size: 60px;
– der Schatten ändert sich auf: box-shadow: 0 0 30px 0 rgba(0,0,0,0.35);
– Pfeil und somit der ganze Button verlängert sich um 16px (Animation)
line-height: 62px;
siehe Animation:
http://b.link/zewo-bildteaser-hover
Typografie S: bis 799px
Typografie M: ab 800px
Typografie L: ab 1400px
Spalten untereinander:
bis 599px
Spalten nebeneinander: ab 600px
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.
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.
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
quamLorem ipsum dolor sit amet, consectetuer adip-iscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
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 quamLorem ipsum dolor
sit amet, consectetuer adip-iscing elit. Aenean commodo ligula eget dolor.
Aenean massa.
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 quamLorem ipsum dolor sit
amet, consectetuer adip-iscing elit. Aenean commodo ligula eget dolor.
Aenean massa.
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 quamLorem ipsum dolor sit
amet, consectetuer adip-iscing elit. Aenean commodo ligula eget dolor.
Aenean massa.
Aktuelle
Sammlungen
Aktuelle
Sammlungen
Sammlungen anzeigen
Sie möchten
Ihre NPO
zertifizieren
lassen?
Einschätzung einholen
Aktuelle
Sammlungen
Sie möchten
Ihre NPO
zertifizieren
lassen?
Aktuelle
Sammlungen
Sie möchten Ihre
NPO zertifizieren
lassen?
Aktuelle
Sammlungen
Sie möchten Ihre
NPO zertifizieren
lassen?
Aktuelle
Sammlungen
Sie möchten Ihre
NPO zertifizieren
lassen?
Sammlungen anzeigen
Sie möchten Ihre
NPO zertifizieren
lassen?
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.
Sammlungen anzeigen
Einschätzung einholen
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
quamLorem ipsum dolor sit amet, consectetuer adip-iscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
Sammlungen anzeigen
Einschätzung einholen
Einschätzung einholen
width: 90%
horizontal zentriert
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 quamLorem ipsum dolor
sit amet, consectetuer adip-iscing elit. Aenean commodo ligula eget dolor.
Aenean massa.
Sammlungen anzeigen
Einschätzung einholen
Sammlungen anzeigen
Einschätzung einholen
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.
width: 4.3%
width: 4.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 quamLorem ipsum dolor sit
amet, consectetuer adip-iscing elit. Aenean commodo ligula eget dolor.
Aenean massa.
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 quamLorem ipsum dolor sit
amet, consectetuer adip-iscing elit. Aenean commodo ligula eget dolor.
Aenean massa.
width: 90%
width: 4.3% width: 4.3%
horizontal zentriert
width: 90%
max-width: 1260px
horizontal zentriert
width: 90%
max-width: 1260px
horizontal zentriert
width: 90%
max-width: 1260px
horizontal zentriert
width: 90%
max-width: 1260px
horizontal zentriert