1.0 · Buttons

1.1 · Button-Stile


Selektor Beschreibung
a-button--primary Standard für ruhige helle Hintergründe
a-button--primary--light Standard für ruhige, dunkle Hintergründe
a-button--primary-solid Alternative für eher unruhige, helle Hintergründe
a-button--primary--light-solid Alternative für eher unruhige, dunkle Hintergründe

1.2 · Button-Größen


Selektor Beschreibung
a-button--sm Unter Feldern, z. B. "Zurück"
a-button--md Unter Spalten/Feldern, z. B. "Tarif auswählen", "Weiter"
a-button--lg Zentriert unter Content, z. B. "Zum Tarifrechner"
a-button--xl Auf Heroshot, z. B. "Erkundungstour"

1.3 · Button-Farben


Selektor Beschreibung
a-button--primary Standard-Stil für z. B. "Mehr" oder "Weiter"
a-button--secondary Für sekundär-Aufgaben, z. B. "Zurück"
a-button--cta Auffälliger "Call to action", z. B. "Jetzt Strompreis berechnen!"
a-button--success Button Stil für positive Rückmeldung /Bestätigungen, z. B. "OK"




1.4 · Buttons mit Icons




1.5 · Sonderfälle


Selektor Beschreibung
a-button--*-fill Kommt zum Einsatz, wenn das Standard-Hover-Verhalten auf bestimmten Hintergründen nicht gut funktioniert.

2.0 · Text/Bild-Komponenten

2.1 · 0 / 8 / 0


Customizing the grid Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Customizing the grid Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Nur für linksbündige oder zentrierte Textblöcke, z. B. Seiteneinleitungen.

2.2 · 4 / 4 / 4


Lorem ipsum dolor

Customizing the grid Using our built-in grid Sass variables and maps.

Lorem ipsum dolor

Customizing the grid Using our built-in grid Sass variables and maps.

Lorem ipsum dolor

Customizing the grid Using our built-in grid Sass variables and maps.

Ein Icon oder Bild und/oder ein Text je Spalte, z. B. für USP-Darstellung, Kategorien, Footer. Texte dürfen

2.3 · 6 / 6


2.3.1 · 6 / 6 - nur Bilder


2.3.2 · 6 / 6 - nur Text


Customizing the grid Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Customizing the grid Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Customizing the grid Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Customizing the grid Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

2.3.3 · 6 / 6 - Bild und Text


Customizing the grid Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile. Customizing the grid Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Customizing the grid Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile. Customizing the grid Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Text und Bild für beide Spalten frei wählbar.

2.4 · 4 / 8


2.4.1 · 4 / 8 – Bild klein


Customizing the grid Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile. Columns and gutters The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual.

Customizing the grid Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile. Columns and gutters The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual.

2.4.2 · 4 / 8 – Bild groß


Customizing the grid Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile. Columns and gutters The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual.

Customizing the grid Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile. Columns and gutters The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual.

Für Kombinationen aus Bild oder Video und Text.

2.4.3 · 3 / 3 / 3 / 3


Nur Logos, z. B. für Trust-Elemente oder Kunden-Logos.

3.0 · Hero-Komponente

Der Hero kann alle möglichen Inhaltselemente beinhalten, hat einen optionalen Bogen am unteren Ende, Slider-Funktionalität und eine maximale Breite. Sie basiert auf dem Owl Carousel 2

Selektor Beschreibung
o-hero--curved Darstellung mit Bogen am unteren Rand.
Die Slider-Funktionalität wird automatisch aktiv wenn mehr als ein .o-hero__slider-item vorhanden ist.

4.0 · Gruppen-Navigation

5.0 · Content-Navigation

Demo-Inhalt: Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann. Sie erhalten die Leu Tankgutscheine bei Frau Romy Stahl Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann. Sie erhalten die Leu Tankgutscheine bei Frau Romy Stahl Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann.

Demo-Inhalt: Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann. Sie erhalten die Leu Tankgutscheine bei Frau Romy Stahl Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann. Sie erhalten die Leu Tankgutscheine bei Frau Romy Stahl Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann.

6.0 · Vergleichstabellen

Verschiedene Ausprägungen von Tarif-Tabellen für unterschiedliche Anwendungsfälle

6.1 · Tarif-Übersicht


Leu Erdgas Fix ist der Gastarif für alle, die langfristig sparen und mehr Sicherheit haben möchten.

  • 1 x wechseln und dauerhaft glücklich
  • Wahlweise 12, 24 oder 36 Monate Preisgarantie
  • 12 bzw. 24 Monate Vertragslaufzeit
  • Wahlweise als 100 % Ökogas
  • Keine Grundgebühr
  • Keine Sonderabschläge
  • Dauerhaft niedriger monatlicher Abschlag durch Preisgarantien

Leu Erdgas Flex ist der Gastarif für alle, die kurzfristig maximal sparen und mehr Freiheit möchten.

  • Nur 3 Monate Vertragslaufzeit
  • 3 Monate Preisgarantie
  • Wahlweise 100 % Ökogas
  • Keine Grundgebühr
  • Keine Sonderabschläge
  • Niedrigster Arbeitspreis

Leu Erdgas Plus ist der Gastarif für alle, die sparen und für ihre Treue belohnt werden möchten.

  • Treuebonus bzw. Neukundenbonus nach 365 Tagen
  • 12 Monate Preisgarantie
  • 12 Monate Vertragslaufzeit
  • Wahlweise als 100 % Ökogas
  • Keine Sonderabschläge
  • Niedrigster Arbeitspreis

6.2 · Vergleichstabelle Strom-Checkout


recommendation-badge EMPFEH L UNG
Leu Strom Ideal 24
Kurzbeschreibung des Tarifs,
gerne auch zweizeilig!
  • 24 Monate Preisgarantie
  • 100 % Ökostrom
  • Keine Vorkasse, keine Kaution
  • Ausgezeichneter Service
  • Sie sparen bis zu 45,40 €
Ersparnis gegenüber dem Grundversorger²
-60,94 €
Ersparnis gegenüber dem Grundversorger²
-60,94 €
Preisgarantie
24 Monate
Ersparnis gegenüber dem Grundversorger²
-60,94 €
Leu Strom Ideal 12
Kurzbeschreibung des Tarifs
  • 12 Monate Preisgarantie
  • 100 % Ökostrom
  • Keine Vorkasse, keine Kaution
  • Ausgezeichneter Service
Leu Strom Ideal 36
Kurzbeschreibung des Tarifs
  • 36 Monate Preisgarantie
  • 100 % Ökostrom
  • Keine Vorkasse, keine Kaution
  • Ausgezeichneter Service

6.3 · Vergleichstabelle Erdgas-Checkout


  • Lange Preisgarantien
  • Ohne Grundgebühr
  • Keine bauliche Veränderung
  • Mit Kündigungsservice
  • Prämierter Kundenservice¹
Preisgarantie
Monate
Vertragslaufzeit
Monate
Kündigungsfrist
Monate
Grundpreis pro Monat
0,00 €
Arbeitspreis pro kWh
5,5901 Cent
Ersparnis gegenüber dem Grundversorger²
12.075,62 €
  • Lange Preisgarantien
  • Ohne Grundgebühr
  • Keine bauliche Veränderung
  • Mit Kündigungsservice
  • Prämierter Kundenservice¹

Länge der Preisgarantie

Preisgarantie
Monate
Vertragslaufzeit
Monate
Kündigungsfrist
Monate
Grundpreis pro Monat
0,00 €
Arbeitspreis pro kWh
5,5901 Cent
Ersparnis gegenüber dem Grundversorger²
12.075,62 €

Grundversorger Ihrer PLZ zum Vergleich

Stadtwerke Bayreuth Energie und Wasser GmbH
Preisgarantie
keine
Vertragslaufzeit
keine
Kündigungsfrist
2 Wochen
Grundpreis pro Monat
10,13 €
Arbeitspreis pro kWh
25,5136 Cent
 
 

7.0 · Preisrechner

Strom für Ihr Zuhause

kWh/Jahr
Faire Strom-Tarife vom Service-Experten!

Erdgas für Ihr Zuhause

kWh/Jahr
Faire Erdgas-Tarife vom Service-Experten!

7.0 · CO₂-Rechner

Verbrauchs- und CO₂-Rechner
kWh

Für Ihr Gebäude benötigen Sie pro m² und Jahr

166,67 kWh

Das entspricht einer CO2-Emission

4,5 t

Gebäude-Kassifizierung

Passivhaus

Ihre Investition in Klimaschutz

22,00 €
050100150200250300350400

Leu Erdgas. Eine saubere Sache.

Das umweltfreundliche Erdgas bewirkt unter allen fossilen Brennstoffen die geringsten Emissionen, da kein Schwefeldioxid freigesetzt wird. Trotzdem produziert es bei seiner Verbrennung CO2 : 0,246 kg je Kilowattstunde. Wenn Sie beispielsweise eine Jahresmenge von 15.000 kWh benötigen, entsteht dadurch eine CO2-Emission von 3,69 t. In diesem Zähler können Sie erkennen, wie viel CO2-Ausstoß von Ihnen verursacht wird. Sie können aber auch einschätzen, wie modern Ihr Haus ist, oder ob es auf einem guten energetischen Stand ist.

Ihr Anteil am Umweltschutz

Mit Erdgas klimaneutral sorgen wir für CO2-Ausgleichsmaßnahmen Ihres Verbrauchs durch den Kauf von Klimaschutzzertifikaten. Ihr Erlös fließt in internationale Klimaprojekte.


Zum TarifrechnerZur Tarif-Übersicht

7.0 · B2B-Anfrage

Gewerbegas

Telefon 09287 / 899 220
Gerne rufen wir Sie auch an ...

Bitte beachten Sie unsere Datenschutzerklärung.

Gewerbegas
für hohe Kosteneinsparungen

8.0 · Ansprechpartner

Ihre Ansprechpartnerin

Ramona Szczepanski

0000 000000-0ramona.szczepanski​@​btd-tankschutz.de

Demo-Inhalt: Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann. Sie erhalten die Leu Tankgutscheine bei Frau Romy Stahl Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann. Sie erhalten die Leu Tankgutscheine bei Frau Romy Stahl Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann.

9.0 · Cards

Die hier abgebildeten Varianten der Card-Komponente sind nur ein Auszug aus den vielen Möglichkeiten. Eine umfassende Dokumentation findet man hier

9.1 · Farbvarianten


.m-card

Card title


Some quick example text to build on the card title and make up the bulk of the card's content.

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
.m-card--highlight

Card title


Some quick example text to build on the card title and make up the bulk of the card's content.

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
.m-card--highlight

Card title


Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
.m-card--secondary

Card title


Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
.m-card--success

Card title


Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
.m-card--cta

Card title


Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

9.2 · Mit Bildern


Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

9.3 · Horizontale Ausrichtung


Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

10.0 · Tabs

Tab "Lorem" content
Tab "Ipsum" content
Tab "Dolir sit" content
Tab "Lorem" content
Tab "Ipsum" content
Tab "Dolir sit" content

11.0 · Accordion

Die Accordion-Komponente baut auf die Gruppen-Navigation auf. Statt weiteren Links können sämtliche Inhalte innerhalb der aufklappbaren Beriche verwendet werden.

0.0 · Image Slider

Image-Slider Beschreibungstext

12.0 · Tabellen

Hier finden leicht abgewandelte Standard-Bootstrap-Tabellen Anwendung, diese sind hier umfassend dokumentiert. Sie können nicht nur im Content-Bereich, sondern auch innerhalb von Card-Elementen verwendet werden.

.a-table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
.m-card .a-table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
.a-table .a-table--dark-red
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
.m-card .a-table--dark-red
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
.a-table .a-table--dark-blue
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
.m-card .a-table--dark-blue
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

13.0 · Breadcrumb-Navigation

14.0 · Forumularelemente


* Benötigte Angaben

Demo-Inhalt: Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann. Sie erhalten die Leu Tankgutscheine bei Frau Romy Stahl Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann. Sie erhalten die Leu Tankgutscheine bei Frau Romy Stahl Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann.

Demo-Inhalt: Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann. Sie erhalten die Leu Tankgutscheine bei Frau Romy Stahl Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann. Sie erhalten die Leu Tankgutscheine bei Frau Romy Stahl Den Wert des Gutscheins bestimmen Sie selbst, welcher komplett oder in Raten vertankt werden kann.

15.0 · Hinweise

16.0 · Dialogfenster

17.0 · Newsletter-Anmeldung

Bleiben Sie auf dem Laufenden!

Unser Newsletter enthält Informationen zu unseren Produkten, Angeboten, Aktionen und unserem Unternehmen. Hinweise zum Datenschutz, Widerruf, Protokollierung sowie der von der Einwilligung umfassten Erfolgsmessung, erhalten Sie in unserer Datenschutzerklärung.

18.0 · Social Media Links

19.0 · Fortschritts-Anzeige

Completed step
Completed step
Active step
Step ahead

20.0 · Code-Eingabe

21.0 · Pagination

22.0 · Timeline

1

Title of section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.

Call to action
2

Title of section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Call to action
3

Title of section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque.

Call to action
4

Title of section 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.

Call to action
5

Title of section 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.

Call to action

23.0 · Footer