Typografische Elemente
Typografie
Schriften und Schriftschnitte
Fließtext: Roboto, font-weight 300 (light)
Headlines: Roboto, font-weight 700 (bold)
Headlines
Farbe und Größe der Headlines sind von H1 bis H6 durch die verwendete Headline Gewichtung zum Beispiel als Headline erster Ordnung (H1) bestimmt.
Sie können jedoch auch aus semantischen Gründen das Aussehen von anderen Headline Gewichtungen annehmen. Wenn eine H6 wie eine H1 aussehen soll bekommt Sie die CSS Klasse "heading--h1" zugewiesen.
Headline h1
Headline h2
Headline h3
Headline h4
Headline h5
Headline h6
Headline h1 (h6)
Headline h2 (h5)
Headline h3 (h4)
Headline h4 (h3)
Headline h5 (h2)
Headline h6 (h1)
Headlines
Farbe und Größe der Headlines sind von H1 bis H6 durch die verwendete Headline Gewichtung zum Beispiel als Headline erster Ordnung (H1) bestimmt.
Sie können jedoch auch aus semantischen Gründen das Aussehen von anderen Headline Gewichtungen annehmen. Wenn eine H6 wie eine H1 aussehen soll bekommt Sie die CSS Klasse "heading--h1" zugewiesen.
Headline h1
Headline h2
Headline h3
Headline h4
Headline h5
Headline h6
Headline h1 (h6)
Headline h2 (h5)
Headline h3 (h4)
Headline h4 (h3)
Headline h5 (h2)
Headline h6 (h1)
Text Auszeichnungen
H1
Individuelle Parkraumkonzepte.
H2
Gerne erstellen wir Ihnen ein Konzept.
H3
Wir finden die für jedes Objekt, in jeder Branche passende Lösung
Herotext
Ob kamerabasierte Parkraumbewirtschaftung oder Parkraumbewirtschaftung mit Parkscheibe – wir sind Ihr Partner für alle Bewirtschaftungsformen!
Herotext ist der Elementtyp "Text" und wird durch die CSS Klasse "text--attention" erzeugt.
H4
Kontrolle der Höchstparkdauer mittels Parkscheibe.
Copy
This is a drop cap. kasd gubergren Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 1000 m3 tempor invidunt ut labore et dolore magna H2O 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 Link 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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Infotext / Bildunterschrift
Kamerabasierte Parkraumbewirtschaftung
Infotext / Bildunterschrift ist der Elementtyp "Text" und wird durch die CSS Klasse "caprtion" erzeugt.
Textausrichtung
Headlines und Texte können mit den nachfolgenden CSS Klassen weiter angepasst werden. So kann z.B. die Ausrichtung beeinflusst werden.
Inhaltselement: Überschrift
Headline, Linksbündig (Element: Überschrift)
Die linksbündige Ausrichtung der Headline ist der Standard.
Headline, zentriert (Element: Überschrift)
Verwendete CSS Klasse: "heading--center".
Headline, rechtsbündig (Element: Überschrift)
Verwendete CSS Klasse: "heading--right".
Inhaltselement: Text, Headline ausrichten
Headline, Linksbündig
Die linksbündige Ausrichtung der Headline ist der Standard.
Headline, zentriert
Verwendete CSS Klasse: "heading--center".
Headline, rechtsbündig
Verwendete CSS Klasse: "heading--right".
Inhaltselement: Text, Headline und Text ausrichten
Headline und Text, Linksbündig
Über den Texteditor können Texte per Inline-CSS Formatierung ausgezeichnet werden. Die Ausrichtung der Headline eines Textelements kann damit aber nicht beeinflusst werden. Dazu ist eine CSS-Klasse für das gesamte Text-Element nötig.
Die linksbündige Ausrichtung der Headline ist der Standard.
Headline und Text, zentriert
Über den Texteditor können Texte per Inline-CSS Formatierung ausgezeichnet werden. Die Ausrichtung der Headline eines Textelements kann damit aber nicht beeinflusst werden. Dazu ist eine CSS-Klasse für das gesamte Text-Element nötig.
Verwendete CSS Klasse: "text--center".
Headline und Text, rechtsbündig
Über den Texteditor können Texte per Inline-CSS Formatierung ausgezeichnet werden. Die Ausrichtung der Headline eines Textelements kann damit aber nicht beeinflusst werden. Dazu ist eine CSS-Klasse für das gesamte Text-Element nötig.
Verwendete CSS Klasse: "text--right".
Zitat
Zitate haben einen eigenen HTML Tag: <blockquote>. Innerhalb dieses Tags steht das eigentliche Zitat und ist somit semantisch korrekt ausgezeichnet.
Dem Tag selbst kann noch ein Quellerweis mitgegeben werden <blockquote cite="http://developer.mozilla.org">.
Alle Informationen können im Costum Element "FP - Zitat" eingepflegt werden.
Wir sind von dem neuen funktionierenden Konzept begeistert. Die hochwertige Beschilderung ist für unsere Besucher einfach zu verstehen und wurde schnell angenommen. fair parken hat sich dabei um die komplette Projektabwicklung gekümmert. Die Mitarbeiter vor Ort sind zudem sehr freundlich.
Katleen Herr, Leiterin Marketing & PR – Ostseebad Boltenhagen
Wir sind von dem neuen funktionierenden Konzept begeistert. Die hochwertige Beschilderung ist für unsere Besucher einfach zu verstehen und wurde schnell angenommen. fair parken hat sich dabei um die komplette Projektabwicklung gekümmert. Die Mitarbeiter vor Ort sind zudem sehr freundlich.
Katleen Herr, Leiterin Marketing & PR – Ostseebad Boltenhagen
Erweitertes Textelement
Parkraumbewirtschaftung mit Kennzeichenerkennung
5 einfache Schritte für Ihren Kunden
Parkraumbewirtschaftung mit Kennzeichenerkennung
5 einfache Schritte für Ihren Kunden
Parkraumbewirtschaftung mit Kennzeichenerkennung
5 einfache Schritte für Ihren Kunden
Parkraumbewirtschaftung mit Kennzeichenerkennung
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Unterüberschrift
Hauptüberschrift
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Tabellen
Einfache Tabelle
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
| Row 1 | Row 1 | Row 1 | Row 1 | Row 1 |
| Row 2 | Row 2 | Row 2 | Row 2 | Row 2 |
| Row 3 | Row 3 | Row 3 | Row 3 | Row 3 |
| Row 4 | Row 4 | Row 4 | Row 4 | Row 4 |
Tabelle mit Tabellenkopf
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Row 1 | Row 1 | Row 1 | Row 1 | Row 1 |
| Row 2 | Row 2 | Row 2 | Row 2 | Row 2 |
| Row 3 | Row 3 | Row 3 | Row 3 | Row 3 |
| Row 4 | Row 4 | Row 4 | Row 4 | Row 4 |
Tabelle mit Tabellenkopf und Reihenüberschrift:
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Row 1 | Row 1 | Row 1 | Row 1 | Row 1 |
| Row 2 | Row 2 | Row 2 | Row 2 | Row 2 |
| Row 3 | Row 3 | Row 3 | Row 3 | Row 3 |
| Row 4 | Row 4 | Row 4 | Row 4 | Row 4 |
Tabelle mit Tabellenkopf, Reihenüberschrift und Fußzeile:
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Row 4 | Row 4 | Row 4 | Row 4 | Row 4 |
| Row 1 | Row 1 | Row 1 | Row 1 | Row 1 |
| Row 2 | Row 2 | Row 2 | Row 2 | Row 2 |
| Row 3 | Row 3 | Row 3 | Row 3 | Row 3 |
Aufzählungen / Listen
Listen die über das Inhaltselement "Aufzählung" in die Seite eingefügt werden.
Ungeordnete Liste
- Unordered Bullet Point
- Unordered Bullet Point
- Unordered Bullet Point
- Unordered Bullet Point
- Unordered Bullet Point
- Unordered Bullet Point
- Unordered Bullet Point
Nummerierte Liste
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
Nummerierte Liste mit Kreisen
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
- Ordered Bullet Point
Nummerierte Liste im Text Element
Geordnete Aufzählung die mit dem Inhaltselement "Text" in die Seite eingefügt wird und über mehrere Ebenen gehen kann.
- Ordered List Item
- Ordered List Item
- Ordered List Item
- List Subitem
- List Subitem
- List Subitem
- List Subitem
- List Subitem
- List Subitem
- Ordered List Item
- Ordered List Item
- Ordered List Item
- Ordered List Item
- Ordered List Item
- Ordered List Item
- Ordered List Item
- Ordered List Item
Ungeordnete Liste im Text Element
Geordnete Aufzählung die mit dem Inhaltselement "Text" in die Seite eingefügt wird und über mehrere Ebenen gehen kann.
- Ordered List Item
- Ordered List Item
- Ordered List Item
- List Subitem
- List Subitem
- List Subitem
- List Subitem
- List Subitem
- List Subitem
Icon Boxen
Icon Boxen (standard)
1. Element
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
2. Element
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
3. Element
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Icon Boxen (inverted)
1. Element
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
2. Element
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
3. Element
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Download
Contao gibts Downloads als Einzeldownload und als Downloadliste über jeweils ein Inhaltselement aus.
Einzelner Download
Buttons
Buttons werden über das Custom Inhalts-Element "FP-Buttons" in die Webseite eingefügt.
Sie könne alternativ aber auch per CSS formatiert werden, d.h. ein "Textlink" oder ein "Absenden" Feld in einem Formular kann durch hinzufügen der CSS-Klasse "" das Aussehen eines Buttons annehmen.
Primärer Button
btn btn--primary
Element ist ein Button (btn) in der Variante primärer Button (btn--primary).
Es müssen beide Klassen gesetzt werden.
Zentrierter primärer Button
btn btn--primary btn--center
Element ist ein Button (btn) in der Variante primärer Button (btn--primary).
Zusätzlich wir der Button nun in der Variante zentriert ausgerichtet (btn--center)
Rechts ausgerichteter primärer Button
btn btn--primary btn--right
Element ist ein Button (btn) in der Variante primärer Button (btn--primary).
Zusätzlich wir der Button nun in der Variante rechts ausgerichtet (btn--right)
Sekundärer Button
btn btn--secondary
Element ist ein Button (btn) in der Variante primärer Button (btn--secondary).
Es müssen beide Klassen gesetzt werden.
Zentrierter sekundärer Button
btn btn--secondary btn--center
Element ist ein Button (btn) in der Variante primärer Button (btn--secondary).
Zusätzlich wir der Button nun in der Variante zentriert ausgerichtet (btn--center)
Rechts ausgerichteter sekundärer Button
btn btn--secondary btn--right
Element ist ein Button (btn) in der Variante primärer Button (btn--secondary).
Zusätzlich wir der Button nun in der Variante rechts ausgerichtet (btn--right)
Outline Button
btn btn--outline
Element ist ein Button (btn) in der Variante primärer Button (btn--outline).
Es müssen beide Klassen gesetzt werden.
Zentrierter sekundärer Button (Kopie)
btn btn--secondary btn--center
Element ist ein Button (btn) in der Variante primärer Button (btn--secondary).
Zusätzlich wir der Button nun in der Variante zentriert ausgerichtet (btn--center)
Rechts ausgerichteter sekundärer Button (Kopie)
btn btn--secondary btn--right
Element ist ein Button (btn) in der Variante primärer Button (btn--secondary).
Zusätzlich wir der Button nun in der Variante rechts ausgerichtet (btn--right)
Zahlen mit Icons
Up-Counter
Zählt Zahlen von 0 bis zu einem Endwert hoch.
8
Regionen
400
Auftraggeber
420
Städte
1.300
Objekte
310
Mio. Parkvorgänge / Jahr
350
Mitarbeiter*innen
30
Mitarbeiter*innen im hauseigenen Service Center