Doku­men­ta­ti­on zur Pflege

Bild­for­ma­te

Start­sei­te

Url: https://telematikpro.de/

2‑Spalter
569px Breite

3‑Spalter (Leit­stungs­er­brin­ger Slider)
426px Breite

4‑Spalter (Leis­tun­gen & Service)
255px Brei­te (hier am bes­ten als .png mit trans­pa­ren­tem Hintergrund

Shop-Sei­te

Über­sichts­sei­te
150px Brei­te, 150px Höhe

Vor­schau­bild auf Detailsseite
567px Brei­te x 567px Höhe

 

Pro­dukt­über­sicht

Url: https://telematikpro.de/living-styleguide-und-dokumentation/vorlage-produktuebersicht/

2‑Spalter
569px

Leis­tungs­er­brin­ger

Url: https://telematikpro.de/living-styleguide-und-dokumentation/vorlage-leistungserbringer/

2‑Spalter
444px (über­nom­men aus XD)

Inhalts­ele­men­te

Inhalts­s­li­der

Inhaltsslider-Element
Inhaltsslider-BB-Element

Ban­ner

Banner-Element

Kon­fi­gu­ra­ti­on

Zei­le mit Hintergrundfarbe

Klas­se: row–has-background

=> Pad­ding oben und unten

Ban­ner

Klas­se: banner

=> Setzt Überschriftenformate

Banner-BB-Zeileneinstellungen
Banner-BB-Aufbau

Kon­takt­in­for­ma­tio­nen

Ele­ment: Texteditor

Klas­se: contact-info

Kontaktinformationen-Element

Leis­tungs­er­brin­ger

Zei­le: service-provider-teaser

Zei­le: service-provider-teaser–image-left

Zei­le: service-provider-teaser–image-right

Shop und Produkte

Pro­dukt-Tea­ser

Pro­dukt-Info­box

Proudkt-Lis­ting (Woo­co­merce)

Hies soll die Rei­hen­fol­ge der Start­sei­te wie­der­ge­spie­gelt werden.

Rest­pso­ten wer­den an letz­ter Stel­le in dem Lis­ting plaziert.

Die Rei­hen­fol­ge wird anhand der “Selec­tion Order” eines Pro­duk­tes in 100er-Schrit­ten festgelegt.

 

Rei­hen­fol­ge [Stand 08.2022]

100: KoCo­Box

200: Cher­ry eHe­alth Kar­ten-Ter­mi­nal stationär

300: Inge­ni­co Orga stationär

400: VPN-Zugang

500: Mobi­les Kartenterminal

600: Cher­ry Tas­ta­tur weiss

700: Cher­ry Tas­ta­tur schwarz

 

Zusätz­lich muss das Datum auch in der ent­spre­chen­den Rei­hen­fol­ge ange­passt wer­den. (Begin­nend mit dem 01. August 2022)

Proudkt-Detail-Sei­te

Klas­sen für Zei­len (Row)

Ers­te Zei­le einer Seite

Klas­se: hero-area

=> Abstand nach unten

Zei­le mit Hintergrundfarbe

Klas­se: row–has-background

=>  Pad­ding oben und unte

Zei­le mit klei­nem Abstand nach unten

Klas­se: space-after–small

Zei­le mit umge­kehr­ter Rei­hen­fol­ge für Smartphones

Klas­se: row–reversed-content-on-smartphone

Zei­le mit Inhal­ten, die die sel­be Höhe ein­neh­men sol­len im Desktop-Viewport

Klas­se: row–same-height-on-desktop

Zei­le mit Wabengrafik

Klas­se: row–has-honeycombs-top

Klas­se: row–has-honeycombs-bottom

 

Klas­se: honeycomb-image–none

=> Waben­gra­fik wird ausgeblendet

 

Klas­se: honeycomb-image–default

=> Stan­dard-Waben­grfik wird gesetzt

Hilfs­kals­sen

Ele­ment nimmt 100% Brei­te ein

Ein­satz: für Buttons

Klas­se: width-100p

Bre­ad­crumb

HTML-Ele­ment mit Bre­ad­crumb (HTML-Ele­ment im Bre­ad­crumb Themer-Layout)

Klas­se: breadcrumb

Foo­ter

foo­ter_­nav-col

footer_nav-col–merdian