Die Typografie

Als Primärschrift wird die Unternehmensschrift „Apex New“ verwendet. Als Fallback Schrift die Schrift „Trebuchet MS“

Die Farben

siehe Farben

Die Textformate

  • Die Texte werden alle in Gemischtschreibweise geschrieben
  • Texte werden in der Regel linksbündig gesetzt
  • Es gibt unterschiedliche Textformate und Listen, um die Inhalte sauber zu strukturieren. Siehe Vorgaben.

 

<h1>Überschrift 1 Apex New, medium, Schriftgröße 40px, Zeilenabstand 50px </h1>

Tipp: Die H1 sollte und darf nur 1 mal pro Seite verwendet werden! Muss mehr als 3 Worte enthalten und die definierten Keywords, diese tauchen auch Bildtitel der Seite auf.

h1{font-family: 'Apex New','Trebuchet MS' sans-serif; color:#1C4086; text-transform: none; }

<h2>Überschrift 2  Apex New, medium, Schriftgröße 32px, Zeilenabstand 40px </h2>

h2{font-family: 'Apex New', 'Trebuchet MS'  sans-serif; color:#1C4086; text-transform: none; font-weight: 100 text-align: left}

<h3> Überschrift 3 Apex New, medium, Schriftgröße 24px, Zeilenabstand 30px </h3>

Überschrift 4

Überschrift 5
Überschrift 6

 

  • Der gesamte Text bekommt eine größere Schriftlaufweite von (ca. 0,005em) mum eine bessere Lesbarkeit zu gewährleisten.
  • Der Abstand zwischen den Textabschnitten sollte einheitlich sein und zusätzlich Struktur in die Inhalte bringen. Die Abstände richten sich in etwa an den nachfolgenden Vorgaben.

Beispiel eines Textes mit verschiedenen Passagen:

Seitentitel: H1, Apex New, medium

Inhalt Gendi quam, omnihicia int fuga. Olo ea di alit ut omnisquid maximus, velibus. Ullatiist, ut iscid esequide si coribusdae. Itas idelest lat rest eum quo magniscium sandaecearum nem

Themenüberschrift: H2, Apex New, medium

Gendi quam, omnihicia int fuga. Olo ea di alit ut omnisquid maximus, velibus. Ullatiist, ut iscid esequide si coribusdae. Itas idelest lat rest eum quo magniscium sandaecearum nem

Unterüberschrift: H3, Apex New, medium

Wo quam, omnihicia int fuga. Olo ea di alit ut omnisquid maximus, velibus. Ullatiist, ut isicid esequide si coribusdae. Itas idelest lat rest eum quo magniscium sandaecearum nem derionsecus di omnistem hicia cum faccaecae dolupta sperchi.

Checkliste – Listenheadline: P, Apex New, Medium

  • Listenpunkt 1
  • Listenpunkt 2
  • Listenpunkt 3
  • Listenpunkt 4

Unterüberschrift 2: H3, Apex New, medium 

Tulo ea di alit ut omnisquid maximus, velibus. Ullatiist, ut iquide si coribusdae. Itas idelest lat rest eum quo magniscium sandaecearum nem derion. Inhalt Gendi quam, omnihicia int fuga. Olo ea di alit ut omnisquid maximus, velibus. Ullatiist, ut iquide si coribusdae. Itas idelest lat rest eum quo magniscium sanda?


Themenüberschrift 2: H2, Apex New, medium

Gendi quam, omnihicia int fuga. Olo ea di alit ut omnisquid maximus, velibus. Ullatiist, ut iscid esequide si coribusdae. Itas idelest lat rest eum quo magniscium sandaecearum nem omnistem hicia cum faccaecae dolupta sperchi.

Listenheadline (?): P, Apex New, Medium

  • Listenpunkt 1
  • Listenpunkt 2
  • Listenpunkt 3
  • Listenpunkt 4

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Fett

Kursive

Zitat Lorem ipsum dolor sit amet, consetetur sadipscing elitr,

 

Paragraph (h2)

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.


Verlinkungen und Button

Es stehen folgende Möglichkeiten der Verlinkung im Text zur Verfügung.

Das Mouseover ist immer in der Unternehmensfarbe.

normale Ansicht vs. mouseover Ansicht:

Link im Text zu weitern Details : … lorem stw-produkt Info kam…

Link am Ende des Textes „mehr Infos“: … kramen. Mehr Informationen…

Externer Link im Text: … Kleben. Da innogy eine der… 

 

 

Formulare

Antrag

Förderzuschuss für*

Persönliche Daten

Anrede*
FrauHerrdivers

Vorname*
Nachname*
E-Mail*
Telefonnummer*
Kundennummer
IBAN*
Straße*
Hausnummer*
PLZ*
Ort*
Objekt
Nachweis über Kauf (max. 20 MB)*:

 

Die mit * gekennzeichneten Felder sind Pflichtfelder!

 

Misc Stuff – abbr, acronym, pre, code, sub, sup, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

“This stylesheet is going to help so freaking much.”
-Blockquote

 

Tabs

Tabs

Tab 1 content goes here.

Tab 2 content goes here.

Tab 3 content goes here.

Tabbed Layout Keyfacts

  • Listenpunkt
  • Listenpunkt
  • Listenpunkt

  • Weitere Liste
  • Mit weiteren punkten

Dritter Titel content goes here.

Fliesstext: 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.

LastprofilBezeichnung
HK3Kochgas
N14Einfamilienhaushaushalt NRW
N24Mehrfamilienhaushalt NRW
BA4Bäckereien
BD4sonst. betr. Dienstleistungen
BH4Beherbergung
GA4Gaststätten
GB4Gartenbau
HA4Einzelhandel, Großhandel
KO4Gebietskörperschaften, Kreditinst./Versicherung, Org. o. Erwerbsw., öffentl. Einrichtungen
MF4haushaltsähnliche Gewerbebetriebe
MK4Metall, KFZ
PD4Papier und Druck
WA4Wäschereien

Infokasten

Jeder Infokasten hat eine abgerundete Ecke.

Keyfactbox, fullsize, zweispaltig


  • ListItem 1
  • ListItem 2
  • ListItem 3


  • ListItem 4
  • ListItem 5
  • ListItem 6


Keyfactbox, fullsize



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.

Keyfacts Half



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

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

Accordions

  • Die Mitarbeiter (Monteure) der von uns beauftragten Firmen erhalten entsprechende Lichtbildausweise der Stadtwerke Service Meerbusch Willich GmbH & Co. KG sowie Zugangscodes, die beim Kundenbesuch unaufgefordert gezeigt werden müssen.
  • Bei Zweifeln sollten Sie folgende Service-Nummer anrufen:  02154 / 4703 - 465
  • Sollte eine Person versuchen, sich zu Haus/Wohnung Zugang zu verschaffen, ohne die im Vorfeld mitgeteilten Kriterien zu erfüllen, sollte der Zutritt verweigert und sofort die oben genannte Service-Nummer und/oder die Polizei kontaktiert werden.

  • Rechtzeitig vor der Erfassung und Anpassung teilen wir Ihnen die Termine ca. 3 Wochen vorher schriftlich mit.

  • In der Regel sind zwei Besuche durch einen von uns beauftragten Monteur erforderlich.
  • Der erste Termin erfolgt zur Erfassung, in deren Rahmen alle im Haushalt betriebenen Gasgeräte registriert werden.
  • Im zweiten Termin erfolgt dann die Anpassung, bei der die Geräte auf die zukünftige Gasart umgerüstet werden.
  • In einzelnen Fällen kann eine Nachkontrolle einzelner Geräte einen weiteren Besuch erforderlich machen.
  • Diese Qualitätskontrolle dient der Überprüfung aller durchgeführten Arbeiten.

  • Bei der Erfassung werden alle relevanten Eigenschaften der Gasgeräte erfasst, um die spätere Anpassung optimal planen und vorbereiten zu können.
  • Dies geschieht, um die für die spätere Anpassung benötigten Ersatzteile bestellen zu können.
  • Es werden Daten vom Typenschild aufgenommen, eine Abgasmessung durchgeführt, ein Status-Aufkleber angebracht (z.B. Gasgerät erfasst) sowie Fotos vom Gasgerät gemacht.
  • Die Erfassung der Gasgeräte ist für Sie kostenlos.

  • Die Registrierung dauert in der Regel ca. 30 – 45 Minuten pro Gerät.

  • Bei der Anpassung werden die Geräte auf die zukünftige Gasart umgerüstet.
  • In den meisten Fällen werden eine oder mehrere Düsen im Gerät ausgetauscht und danach eine Einstellung des Brenners vorgenommen.
  • Der Aufwand der Anpassung ist abhängig vom Gerätetyp.
  • Die Art des Gerätes hat z. B. auch Einfluss auf die Anzahl der zu wechselnden Düsen und der einzustellenden Regelarmaturen.

  • Normalerweise dauert eine Anpassung weniger als eine Stunde pro Gerät.
  • In Abhängigkeit vom jeweiligen Gerätetyp kann es in Ausnahmefällen zu einer längeren Anpassungsdauer kommen.

Buttons

Mithilfe von Buttons werden verschiedene Handlungsmöglichkeiten des Nutzers dargestellt und klar hierarchisiert. Welche Zielseite durch sie aufgerufen oder welche Aktion ausgelöst wird, kommunizieren Buttons mit einem Label, mit einem Icon oder einer Kombination aus beidem. Buttons geben bei Klick bzw. Tap ein visuelles Feedback in Form eines Response-Effekts sofern die Buttons nicht deaktiviert sind.

Different Colors:

Default Red Orange Green Aqua Teal Purple Pink Silver

Multiple Sizes

Extra Large Large Normal Small

Buttons with Icons

Alert Tick Info Note Download

Icon Links

Tick Download Link

Externe Link

Info Note Alert

Info Boxes

Sample Content
Sample Content
Sample Content
Text sample

Columns

2 Columns

Two Columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

Two Columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

 

Unordered Lists

  • Sample Item 1
  • Sample Item 2
  • Sample Item 3
  • Sample Item 4
  • Sample Item 5

  • Sample Item 1
  • Sample Item 2
  • Sample Item 3
  • Sample Item 4
  • Sample Item 5

  • Sample Item 1
  • Sample Item 2
  • Sample Item 3
  • Sample Item 4
  • Sample Item 5

  • Sample Item 1
  • Sample Item 2
  • Sample Item 3
  • Sample Item 4
  • Sample Item 5

  • Aufzählung
  • Aufzählung
  • Aufzählung
  1. Nummerierte liste
  2. Nummerierte liste
  3. Nummerierte liste