#147bd1
Blue (Brand color)
#147bd1$color-blue-brand
WWZ Frontend Styleguide Web
Colors
Primary
#042f54
Dark Blue
#042f54$color-dark-blue
Secondary
#00a3ad
Turqoise
#00a3ad$color-turqoise
#8a75d1
Violet
#8a75d1$color-violet
#78a220
Green
#78a220$color-green
#c5299b
Pink
#c5299b$color-pink
#cb8600
Orange
#cb8600$color-orange
#d00037
Red
#d00037$color-red
Backgrounds
#147bd1
Dark Background
#147bd1$color-dark-background
#e7f1fa
Light Blue Background
#e7f1fa$color-light-blue-background
#ffffff
White Background
#ffffff$color-white-background
Text
#042f54
Dark Blue (TBD)
#042f54$color-dark-blue-tbd
#ffffff
White
#ffffff$color-white
Typography
Title (h1)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Title (h2)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Title (h3)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Title (h4)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Title (h5)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Title (h6)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Lead
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Link
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Default Paragraph / Body
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Grid
To be done: 12er grid.
Icons
Atoms
To be done
Molecules
These components can not be placed in the layout alone, but need to be contained in another component / container.
Anchor-Scrolling M018 WWZ-36 WWZ-188 WWZ-201 Active
Scrolling to ID's in Content
Blog Metainfo M057 new Active
Darstellung der Keywords eines Blogartikels.
Blog Like M058 new Active
Like Button um Beitrag zu liken. Zeigt Anzahl likes an.
Linklist M025 WWZ-40 WWZ-135 WWZ-149 Active
Liste mit links (intern, extern) s
Share Modul M050 WWZ-58 WWZ-84 WWZ-160 WWZ-162 Active
Funktion für das Teilen der Seite.
Map Aktive
Basisintegration von Google Maps
Module
Mit diesen Modulen erstellen wir ansprechende Inhalte und Anwendungen
Tooltip WWZ-437 WWZ-412 WIP
Teaser - Hero Teaser M001 WWZ-16 WWZ-210 Active
Freie Gestaltung, nur auf Home, dient als «Header», kann Bewegtbild enthalten.
Teaser - Teaser Contentseite M002 WWZ-18 WWZ-95 WWZ-187 WWZ-210 Active
Inhalt kommt von Zielseite, Zielsiete kann Contentpage oder Produktpage sein, kann Bewegtbild enthalten.
Teaser - Contentseite Neu WWZ-425
Neue Version des Content Teaser für die Home Seite.
Teaser - Wissensteaser (Blogbeitrag) M003 WWZ-22 WWZ-210 Active
Teaser für Blogbeitrag mit statischem Bild und Inhaltskachel, Information wird von Zielseite bezogen.
Teaser - Conversational Navigation Teaser M004 WWZ-17 Active
Enthält animierte Figur, Frage und Antwortauswahl, Antwort wählen öffnet Conversationi.
Teaser - Cross Teaser WWZ-417 WIP
Neue Cross Teaser.
Teaser - Product Teaser WWZ-415 WIP
Neue Product Teaser welche auf den Productfinder.
Schnelleinstieg Sticky M005 WWZ-20 WWZ-200 WWZ-202 Active
Enthält Schnelleinstiegslinks (häufig benutzte Funktionen) sowie Störungsmeldung und Webcam link.
Navigationsleiste / Meta Navigation M006 WWZ-8 Active
Navigationsleiste mit Logo, Login, Suche und Burger
Navigation M007 WWZ-9 WWZ-10 WWZ-78 WWZ-106 WWZ-154 WWZ-199 WWZ-204 WWZ-224 Active
Enthält Stufe 1, 2 und 3 der Navigation
Footer M008 WWZ-1 WWZ-11 WWZ-132 Active
Enthält informationen und Links
Header Produktseite M009 WWZ-50 WWZ-153 WWZ-154 WWZ-210 WWZ-223 Active
Header für Produktseite mit Titel, Bild, Lead
Header Contentseite M010 WWZ-29 WWZ-153 WWZ-154 WWZ-210 Active
Header für Contentseite mit Titel, Bild, Lead
Header Blogbeitrag M011 WWZ-51 WWZ-153 WWZ-154 WWZ-210 Active
Header für Blogseite mit Titel, Bild, Lead
Header Landingpage M054 WWZ-153 WWZ-154 WWZ-223 Active
Header mit Bild, Spitzmarke, Titel und Leadtext, optional mit CTA. Visuell unterschiedlich von Content Header.
Header mit Link WWZ-81 Active
Header varianten mit CTA Link
Contentbereich M012 WWZ-7 Active
Sammelmodul für diverse Contentmodule
Rich Text M013 WWZ-30 WWZ-90 WWZ-156 WWZ-161 WWZ-208 Active
Text mit beschränkter Formatierung: Absatzformate: H2, H3, H4, H5, numbered list, bulletlist Textformate: Bold, normal
Bild M014 WWZ-31 Active
Bild mit Alt-Text, Bildunterschrift, Copyright Info
Downloadlist M024 WWZ-41 Active
Liste mit Downloads (verschiedene Dateitypen)
Bildslider M015 WWZ-32 WWZ-163 WWZ-180 Active
Slider mit Bildern
Video M016 WWZ-33 WWZ-229 Active
Video Element mit Previewbild (youtube)
Zitat M017 WWZ-34 WWZ-93 Active
Zitat, Quelle
Anker-Navigation M018 Obsolete
CTA M019 WWZ-37 Active
Call to Action: Kann: Link zu interner Seite, Link zu externer Seite, Link zu Anker
Verfügbarkeitsgebiet M020 WWZ-38 WWZ-168 WWZ-197 WWZ-203 WWZ-210 WWZ-211 WWZ-212 Active
Karte mit eingefärbtem Gebiet, Adresseeingabe zur schnellen Abklärung.
Tab Control M021 WWZ-47 WWZ-133 WWZ-174 WWZ-210 Active
Tab Control, kann jeglichen Content enthalten.
Akkordeon M023 WWZ-28 WWZ-87 WWZ-119 WWZ-124 WWZ-154 WWZ-189 WWZ-231 Active
Expander kann Content enthalten jedoch keine weiteren Expander.
Tabelle M026 WWZ-42 Active
Tabelle für die Darstellung von Telekom-Tarifen und einfachem Content.
Productfinder Strom M022 WWZ-76 WWZ-175 WWZ-191 WWZ-302 WWZ-322 WWZ-325 Active
Enthält Wahl der Zusammensetzung (Wasser, Wasser+ Solar, Solar, Atom), inkl. Wahlhilfe Wahl das Labels (wo anwendbar) Wahl des Anteils (nur bei Wasser + Solar)
Productfinder Gas M027 WWZ-77 WWZ-191 WWZ-193 WWZ-302 WWZ-322 WWZ-325 Active
Enthält: Auflistung Produkte
Productfinder Familien WWZ-357
Erweiterung Productfinder Telko, Familienangebot
Productfinder Familien Neu WWZ-423
Erweiterung Productfinder Telko, Familienangebot
Productfinder Slider Testcases WWZ-412
Testcases und Beispiel für verschiedene Slider im Produkfinder
Productfinder Promo WWZ-534
Testcase für verschiedene Promo Komponente
Productfinder Gruppierungen Telekomprodukte WWZ-676
Testcases und Beispiel für Gruppierungen Telekomprodukte
Productoverview Telekomunikation (Producttypes) (Container) M028 WWZ-105 Active
Kurzinfo zu allen Produkten (Internet, Festnetz, TV, Mobile). Information dass pro Bereich unterschiedliche Produkte zu einem Gesamtpaket zusammengestellt werden können.
Productfinder Telekommunikationsprodukt M029 WWZ-105 WWZ-166 WWZ-191 WWZ-193 WWZ-302 WWZ-322 WWZ-325 Active
Zusammenstellung mehrer einzelner Produkte pro Bereich. z.B. alle Internetprodukte (S, M, L) etc. Besteht aus mehreren Produktkacheln.
Telekom Produktkachel M030 WWZ-105 Active
Produktkachel mit allen Informationen zu einem einzelnen Telekomprodukt (z.B. «Internet L» oder «TV S» etc)
Zusatzprodukte M031 WWZ-61 Active
Liste mit Zusatzprodukten, Titel, Kurzbeschreibung, CTA (Link zu Detailseite oder Bestellung)
Zusatznutzen M032 WWZ-60 WWZ-155 WWZ-168 Active
Auflistung von n Zusatznutzen mit jeweils Titel, Kurzbeschrieb und teilweise mit Link.
TV Senderliste M033 Obsolete
List aller Sender, Filterfunktion (Sprache, Paket, Bildqualität)
Stromsparrechner WWZ-473 Work in Progress
Stormsparrechner zum Vergleich von Stromkosten
Smartphoneauswahl M034 Obsolete
Liste aller erhältlichen Smartphones mit Preisen und CTA um zu Bestellen. Datasource Tango.
Kontaktformular M035 Obsolete
Formular für Kontaktaufnahme
Standorte M036 WWZ-83 WWZ-154 WWZ-210 Active
Kartenmodul mit Standroten (Google Maps)
FAQ Modul M037 WWZ-28 WWZ-169 WWZ-210 Active
FAQ mit Fragen, Antworten, Filterbar nach Bereich, Suchfunktion
WebCam Modul M038 WWZ-43 WWZ-154 WWZ-173 WWZ-234 Active
Webcam integration Zugerberg
Wetterdaten M039 WWZ-44 WWZ-123 Active
Wetterdaten darstellen.
Blogsuche M040 Obsolete
Suche nach Blogbeiträgen, Volltextsuche innerhalb Beiträgen
Blogfilter M041 WWZ-23 WWZ-143 Active
Einstufiger Filter nach Keywords.
Call Us WWZ-616 TelcoWizard WIP
Call Us: Kann: Link zur Telefonnummer
Teaser - Blog «next best reads» M042 WWZ-22 Active
Automatisiertes hinzufügen von drei weiteren Blogbeiträgen aufgrund der Keywords.
Medienmitteilung M043 WWZ-52 WWZ-194 WWZ-198 Active
Medienmitteilung, Content mit zusätzlichen Attributen wie Publizierungsdatum.
Person WWZ-68 WWZ-102 WWZ-129 WWZ-157 Active
Person (Medienkontakt)
Medienmitteilungsübersicht M044 WWZ-654 Active
Übersicht über alle Medienmitteilungen
Störungsmeldung M045 WWZ-55 WWZ-226 Active
Suche M046 WWZ-26 WWZ-79 WWZ-88 WWZ-151 WWZ-154 WWZ-164 WWZ-171 WWZ-172 WWZ-176 Active
Suche mit Search as you type, Resultate gruppiert nach Bereich
Conversational Navigation M047 WWZ-17 WWZ-158 WWZ-182 WWZ-183 WWZ-184 WWZ-185 WWZ-205 WWZ-210 Active
Fragen + Antworten zur Navigation
Newsletter Teaser (Universal Teaser) M048 WWZ-56 WWZ-195 Active
Teaser für die Newsletteranmeldung Inkl. Eingabe von Mailadresse
Newsletter Teaser mit Hintergrundbild (Universal Teaser) WWZ-535
Teaser für die Newsletteranmeldung Inkl. Eingabe von Mailadresse
Newsletter Anmeldung M049 WWZ-57 Obsolete
Anmeldeformular für Newsletter
Cookie Warnung M051 WWZ-14 WWZ-59 WWZ-127 WWZ-230 Active
Teaser Container M052 Active
Container enthält einzelne Teaser, bestimmt den Inhalt sowie das Verhalten mehrer Teaser.
Breadcrumbs M053 WWZ-45 Active
Zeigt die Navigationsstruktur. Wobei Level 1 mit Level 2 Zusammengefasst wird, da Level 1 keine eigene Seite besitzt. Beispiel «Home > Privatpersonen > Energie > Elektrizität» wird zu «Home > Privatpersonen Energie > Elektrizität».
HTML Module M055 WWZ-48 Active
Contentmodul für beliebiegen HTML Content. Einsatz nur auf Landingpages. Soll ermöglichen den Content sehr flexibel zu gestallten.
Formular M056 WWZ-64 WWZ-115 WWZ-126 WWZ-154 Active
Formularmodul für das erstellen von beliebigen Formularen.
Inbound Marketing M059 WWZ-367 new
Downloadhürde mit Formular.
Miniteaser Botavatar M060 WWZ-66 WWZ-210 Active
Sticky Avatar des Bots, um die Conversational Navigation zu öffnen.
Tabelle WWZ-366 WWZ-531 Active
Tabelle für die Darstellung von Preisen
Inbound Marketing M0XX WWZ-367 Active
Inbound Marketing.
Instruction M0XX WWZ-372 Active
Anleitungskomponente.
Dark Page WWZ-80 Active
Dark Page Komponente
Stromsparrechner WWZ-473 WIP
Ernergiesparrechner Komponente
Hinweise und Warnmeldungen WWZ-756 WIP
Hinweise und Warnmeldungen
Homeslider / Stage Mid 2024 WWZ-756 WIP
Slider in voller Breite mit Indikatoren/Fortschrittsbalken für die Startseite
Content IFrame WIP
IFrame zur Verwendung für Editoren
Templates
Diese Templates kombinieren Komponenten und Layouts zu kompletten Seiten. Alle Templates für WCMS Kernfunktionen.
Home P01
Home, kurze Seite mit Teasern zum Inhalt
- - Produkt Seite P02
Produktseite mit identischem Aufbau für jedes Produkt
- Produkt Übersichtsseite P03
Sammelseite über mehrere Produkte z.B. Energie, Telekommunikation
- Content Seite P04
- - Blogbeitragsseite P05
Blogartikelseite
- Blogübersichtsseite P06
Übersicht über alle Blogbeiträge mit Suche und Filter
- FAQ Seite P07
Seite mit FAQ inkl. Filter und Suchfunktion
- Error Page P08 WWZ-15 WWZ-74
Error Page mit Wartungsmeldung, Errormeldung etc.
- Medienseite WWZ-384
Medienseite mit kleinerer Schriftgrösse
- Landingpage P09
Seite welche nicht dauerhafter Bestandteil ist von Strukturund Navigation, dient zur Aufnahme von Campagnentraffic.
SEP Offer WWZ-632
Richtpreisangebot Wärme mittels SEP Api
Stromportal
Komplette Seiten des Stromportals
Stromportal Komponenten
Einzelne Komponenten des Stromportals
Telco Wizard
Alle pages for the Telecommunication Wizard
Pages
Beispielseiten, die erstellt wurden, um die designs mit realistischem Content zu zeigen
Legende
- Active
- Dies ist bereit zum Einsatz / zur Wiederverwendung
- Work in Progress
- Dies ist aktuell in Entwicklung und kann sich noch verändern
- Deprecated
- Dies wird demnächst entfernt. Es sollte nicht kopiert / verwendet werden.