Image Elements



//Content-Element

Image

Das Bild Element passt sich immer der Breite der Column oder der Section Content Width an. Es sollte immer ein Alternative Text vergeben werden. Alternativtexte für Bilder sind wichtig für Barrierefreiheit und SEO.

Generell sollten nur Bilder von einer Dateigröße von < 1 MB in die Media Bank hochgeladen werden, um eine gute Performance der Seite beim Aufruf zu gewährleisten. Ausgenommen davon sind Bilder die z.B. als Download für die Presse hinterlegt werden.

Optionen:

  • Width und Height
  • Verlinkungs-Möglichkeit
  • Graditent-Option 
Alt Text
Alt Text
Alt Text
Alt Text



//Content-Element

Image Wall

Die Image Area gruppiert Bilder. Sie ist geeignet um z. B. Icons nebeneinander abzubilden oder Image-Grids zu bauen.

rpc_Talents
rpc_CX_Design
rpc_Data_Analytics
rpc_Training
CX-Score-allgemein
rpc_CX-Score2022_Fashion_Schuhe
cx-score-automobil-und-motorrad
cx-score-banken-versicherungen
cx-score-outdoor_sport
cx-score-heimwerken_garten



//Content-Element

Text Image

Dieses Element vereinfacht das Positionieren von Text und Bild, ohne das mehrere Content-Elemente ineinander verschachtelt werden müssen.

 

Optionen:

  • Bild-Positionierung: left, right, top
  • Image-Width muss immer vergeben werden
join-the-team (1)

Hier steht eine Headline

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 elit.

Hier steht eine Headline

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 elit.

join-the-team (1)
rocket

Hier steht eine Headline

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 elit.

locations

Hier steht eine Headline

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 elit.

join-the-team (1)

Hier steht eine Headline

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 elit.

Hier steht eine Headline

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 elit.

join-the-team (1)
rocket

Hier steht eine Headline

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 elit.

locations

Hier steht eine Headline

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 elit.



//Content-Element

Teaser

Teaser-Elemente sind als großflächige Teaser anzusehen, die ein Thema anpreisen und auf eine Themenseite verweisen.


Das Teaser-Element sollte laut CI-Konzept immer über die volle Breite des Contents laufen. Hierfür ist beim Element Section die Content Width auf "Full" zu stellen.

Optionen:

  • Style: Bild links oder rechts
  • Bild Positionierung (horizontal und vertikal)
  • Einfügbarer Content: Headline, Text, Button, Image

Teaser Image Right

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 elit.

Button
Header Data Offerings (1)

Teaser Image Left

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 elit.

Button
Header Data Offerings (1)

Teaser Image Right

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 elit.

Button
Header Data Offerings (1)

Teaser Image Left

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 elit.

Button
Header Data Offerings (1)



//Content-Element

HeroSegment

Das HeroSegment dient dem Benutzer als ersten Einblick in Ihr Unternehmen und Angebot, da es sich oben auf der Webseite befindet und sich normalerweise über die gesamte Breite erstreckt.
(Hierfür ist beim Element Section die Content Width auf "Full" und das Spacing auf "None" zu stellen.)

Ein HeroSegment kann auch dazu dienen, Benutzer zu einem gewünschten Link oder einer Call-To-Action zu führen oder das Nutzenversprechen Ihres Unternehmens oben auf der Webseite zu präsentieren. 

Optionen:

  • Bild-Varianten: wählbar für eine optimale Darstellung auf verschiedenen Endgeräten. pflegbar in der Bilddetail-Ansicht unter dem Tab "Variants"
  • Bild-Positionierung: horizontal und Vertical
  • Style: Fullscreen (mit ScrollDown-Button), Cover und Cover Small
  • Overlay opacity: Transparenz des Overlays kann individuell eingestellt werden
  • Einfügbarer Content: Headline, Text, Button

HeroSegment Cover Dark

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Button Text

HeroSegment Cover Small Dark

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Button Text

HeroSegment Cover Fullscreen Dark

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Button Text

So... how can we help you?

sphere

We’re ready to kick-start your
customer-centric transformation

Jasmine Perera
Jasmine Perera
Head of Sales and Operations
info@rpc-partners.com