Die hier abgebildeten Spalten-Aufteilungen basieren auf dem 12-spaltigen Grid-System von Bootstrap 4. Weitere Informationen dazu erhalten sie hier.
| Spalten-Layout | Beschreibung |
|---|---|
12 |
Findet nur für die Hero-Komponente Verwendung. |
2 / 8 / 2 |
Nur für linksbündige oder zentrierte Textblöcke, z. B. Seiteneinleitungen. |
8 / 4 |
Für Kombinationen aus Bild oder Video und Text. |
4 / 8 |
Für Kombinationen aus Bild oder Video und Text. |
6 / 6 |
Text und Bild für beide Spalten frei wählbar. |
4 / 4 / 4 |
Ein Icon oder Bild und/oder ein Text je Spalte, z. B. für USP-Darstellung, Kategorien, Footer. |
3 / 3 / 3 / 3 |
Nur Logos, z. B. für Trust-Elemente oder Kunden-Logos. |
12/122/128/122/128/124/124/128/126/126/124/124/124/123/123/123/123/12Lead 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. You can cross out text too! No sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sitamet, consetetur sadipscing elitr, Highlighted sentence inside a paragraph. 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.
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. This is what underlined text looks like Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Regular Hyperlink inside paragraph et dolore magna aliquyam erat, sed diam voluptua. Important text can be displayed strong et accusam et justo duo dolores et ea rebum. External link inside paragraph Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Standalone external link$brand-blue$light-blue$dark-blue$gradient-blue$brand-red$light-red$dark-red$gradient-red$gray$light-gray$dark-gray$gradient-grayDas Logo wird wo immer möglich als Vektrografik im SVG-Format eingebunden, so wird es auf allen Bildschirmen und Vergrößerungsstufen scharf dargestellt. Standardmäßig kommt die erste hier abgebildete Variante zum Einsatz.
$white
$gradient-blue
$light-gray
$gray
$dark-gray
.a-icon-strom
.a-icon-pellets
.a-icon-heizoel
.a-icon-tankstellen
.a-icon-kraftstoffe
.a-icon-erdgas
.a-icon-schmierstoffe
.a-icon-external-link
.a-icon-chevron-left
.a-icon-chevron-right
.a-icon-chatboxes
.a-icon-phone
.a-icon-envelope
.a-icon-phone-alt
.a-icon-fax
.a-icon-mobile
.a-icon-pointer
.a-icon-file
.a-icon-facebook
.a-icon-instagram
.a-icon-youtube
.a-icon-caret-left
.a-icon-caret-right
.a-icon-menu
.a-icon-close
.a-icon-info
.a-icon-check
.a-icon-alert
.a-icon-circle-1
.a-icon-circle-2
.a-icon-circle-3
.a-icon-circle-4
.a-icon-circle-5
.a-icon-circle-6
.a-icon-circle-7
.a-icon-circle-8
.a-icon-circle-9
.a-icon-circle-10
.a-icon-circle-check
.a-icon-radio-off
.a-icon-radio-on
.a-icon-calculator
.a-icon-leaf
.a-icon-trophy
.a-icon-medal
.a-icon-sign-in
.a-icon-lock