Elemente & Module
Flexibel. Klar. Wiederverwendbar.
Alle Elemente, Templatevarianten, CSS-Klassen und Module des Creuva-Themes auf einer Seite – als Live-Beispiele. Die Klassen wählen Redakteure im Bereich „CSS-Stil“ aus.
- Alle Elemente
- Live-Beispiele
Highlights
Modular aufgebaut
Alle Elemente sind frei kombinierbar.
Für Contao gemacht
Standardelemente, Twig und CSS-Stile.
Einheitliches Design
Farben, Abstände und Formen aus einem System.
GrundlagenFarben & Typografie
Farben, Schriften und Abstände kommen aus dem Farbschema des Seitenlayouts – alle Elemente passen sich automatisch an.
Primär--c-primary
Akzent--c-accent
Akzent hell--c-accent-soft
Fläche--c-surface-muted
H1 – Hauptüberschrift
H2 – Abschnittstitel
H3 – Unterüberschrift
H4 – Weitere Überschrift
H5 – Kleinere Überschrift
H6 – Feine Überschrift
Fließtext
Einleitung mit der Klasse u-lead.
Moderner, gut lesbarer Fließtext mit fetter und kursiver Auszeichnung, Markierung, Inline-Code und einem Link im Text.
Zitat & Textstile
„Eine aussagekräftige Zitatform für wichtige Aussagen oder Kundenstimmen.“
Dachzeile (u-kicker)
Gedämpfter Text (u-muted)
Text in Akzentfarbe (u-accent)
DachzeileÜberschrift mit Dachzeile
Zweifarbige Überschrift mit Akzent.
Feld „Dachzeile“
Text-Element mit Dachzeile
Die Dachzeile steht über der Überschrift und ist für Text- und Beschreibungslisten-Elemente verfügbar.
Hinweisbox
Dies ist ein hervorgehobener Hinweistext (Templatevariante „simplebox“ aus dem Theme Components Bundle).
StrukturListen & Tabellen
Ungeordnete Liste
- Erster Listenpunkt
- Zweiter Listenpunkt
- Dritter Listenpunkt
- Weiterer Listenpunkt
Geordnete Liste
- Erster Schritt
- Zweiter Schritt
- Dritter Schritt
- Weitere Schritte
Beschreibungsliste
- Theme
- Creuva
- Contao
- 5.7 und 6
- Templates
- Twig
Tabelle
| Leistung | Paket S | Paket M | Paket L |
|---|---|---|---|
| Individuelles Design | ✓ | ✓ | ✓ |
| Seitenanzahl | bis 5 | bis 15 | unbegrenzt |
| Support | 3 Monate | 6 Monate | 12 Monate |
Paket-Vergleich (u-table-compare)
| Leistung | Starter | Business | Premium |
|---|---|---|---|
| Seitenanzahl | bis zu 5 | bis zu 15 | unbegrenzt |
| Responsive Design | ✓ | ✓ | ✓ |
| Mehrsprachigkeit | – | optional | ✓ |
| Support nach Launch | – | 3 Monate | 6 Monate |
Liga-Tabelle (u-table-league)
| Pl. | Mannschaft | Sp. | Tore | Pkt. |
|---|---|---|---|---|
| 1 | TSV Rotenbach | 12 | 31:12 | 29 |
| 2 | SV Grünwald | 12 | 27:11 | 27 |
| 3 | FC Bergheim | 12 | 25:16 | 23 |
| 4 | SpVgg Oberfeld | 12 | 22:17 | 21 |
MedienBilder, Medien & Dateien
Download-Element
Projekt-Checkliste (PDF)Downloads-Element
Galerie (4 Bilder pro Reihe)
Mosaik, großes Bild links (u-gallery-mosaic)
Mosaik, großes Bild rechts (u-gallery-mosaic-right)
-
Bild mit Bildunterschrift -
-
-
Erstes Bild groß (u-gallery-featured)
-
-
Bild mit Bildunterschrift -
-
Masonry (u-gallery-masonry)
-
-
-
Bild mit Bildunterschrift -
-
-
Logoleiste
Content-SliderSlider
Jedes Element im Slider ist ein Slide: Bilder, Karten, Texte oder ganze Elementgruppen. Einstellbar sind Elemente pro Ansicht (1–4), Pfeile, Punkte, Thumbnails, Autoplay und Endlosschleife.
Bilder, Pfeile und Punkte
Mit Thumbnails, ohne Punkte
Galerie als Slider (creuva_slider, 3 Bilder pro Slide)
Drei Karten pro Ansicht
Webdesign · Contao
Grünwerk Energie
Neuer Auftritt für einen regionalen Energieversorger.
Branding · Website
Hotel Alpenhof
Buchungsstarke Website für ein Familienhotel in den Alpen.
Portfolio · Contao
Nordlicht Studio
Dunkles, bildstarkes Portfolio für ein Fotostudio.
Mobile · Responsive
Mobile First
Optimiert für jedes Gerät, vom Smartphone bis zum Desktop.
Kundenstimmen: zwei pro Ansicht, nur Punkte, Autoplay und Endlosschleife
Vom ersten Workshop bis zum Launch lief alles reibungslos. Die neue Website bringt uns spürbar mehr Anfragen.
Creuva hat unsere Bildsprache perfekt in Szene gesetzt. Die Direktbuchungen sind deutlich gestiegen.
Vier Icon-Boxen, nur Pfeile
Webdesign
Individuell und responsiv.
Entwicklung
Sauber mit Contao.
SEO
Gefunden werden.
Performance
Schnell auf jedem Gerät.
Support
Auch nach dem Launch.
Sicherheit
Updates und Backups.
Text-ElementTemplatevarianten
Im Text-Element unter „Template-Einstellungen“ wählbar. Die Inhalte kommen aus den üblichen Feldern: Überschrift, Subline, Text und Bild.
Icon-Box ohne Karte
Mit „Ohne Karte“ (u-feature-plain), z. B. für Vorteile in einer Reihe.
Icon links
Mit „Icon links“ (u-feature-inline), z. B. für Kontaktdaten.
Webdesign · Contao
Karte
Bild, Kategorie (Subline), Titel und Text. Der letzte Link macht die ganze Karte klickbar.
Das Zitat steht im Text, Name und Funktion in Überschrift und Subline.
Starter
1.990 €
Business
3.990 €
Nordlicht Studio
Bildkachel
Bild in der Proportion seiner Bildgröße, Titel und Kategorie darunter. Der letzte Link macht die Kachel klickbar.
Hotel Alpenhof
Versetzt
Im Raster mit „Versatz: Versetzt“ (u-grid-offset) steht die zweite Spalte tiefer, z. B. für ein Portfolio.
Spielpaarung (kommendes Spiel)
TSV Rotenbach
15:00Anstoß
SV Grünwald
Spielpaarung (Ergebnis)
SV Grünwald
1 zu 3
TSV Rotenbach
Bild & Text
Variante mit Bild links.
Bild links oder rechts (Bildausrichtung), Dachzeile, zweifarbige Überschrift und Text mit Häkchenliste. Die Links im letzten Absatz werden zu Buttons.
- Individuelles Designkonzept
- Responsive Gestaltung
Bild & Text
Ohne Akzentfläche, Bild rechts.
Mit „Ohne Akzentfläche hinter dem Bild“ (u-media-plain).
Call to Action
Lassen Sie uns gemeinsam Großes schaffen.
Variante „Call to Action“: Text links, die Links im letzten Absatz als Buttons rechts.
Ihr Projekt könnte als Nächstes hier stehen
Bereit für etwas Großes?
„Zentriert, Buttons unter dem Text“ (u-cta-stacked) mit „Akzent hell“ (u-card-soft).
Call to Action
Box in der Akzentfarbe.
Mit „Akzentfarbe“ (u-card-accent) unter „Farben des Elements“.
Call to Action
Grau über die volle Breite.
Mit „Grau“ (u-card-muted) und „Volle Breite“ (u-full-bleed). Für eine Fläche ohne Abstand zu den Nachbarn im Artikel „Innenabstand oben und unten: Kein“ wählen.
Hero-Varianten
Bildform Vollbild.
Hero mit der Bildform „Vollbild (Text auf dem Bild)“: Das Bild füllt den ganzen Bereich, ein Verlauf hält den hellen Text lesbar. Der Badge-Text erscheint als Bildunterschrift.
Bildunterschrift aus dem Badge-Text
CSS-Stile › Farben des ElementsFarben der Elemente
Karten, Icon-Boxen, Kundenstimmen und Preis-Karten bekommen eine Fläche in Weiß, Grau, Haupt- oder Akzentfarbe oder nur einen farbigen Rahmen. Das Icon der Icon-Box lässt sich separat einstellen.
Weiß
u-card-white
Grau
u-card-muted
Akzent hell
u-card-soft
Ohne Rahmen
u-card-flat
Hauptfarbe
u-card-primary
Akzentfarbe
u-card-accent
Rahmen Hauptfarbe
u-card-outline-primary
Rahmen Akzentfarbe
u-card-outline-accent
Icon hell
u-icon-soft (Standard)
Icon mittel
u-icon-accent
Icon dunkel
u-icon-primary
Weißer Kreis
u-icon-white (auf u-card-soft)
Ohne Kreis
u-icon-plain
Icon schwarz
u-icon-light (auf u-card-primary)
Originalfarben
u-icon-original (SVG wie in der Datei)
Ohne Hintergrund
u-card-none
Vom ersten Workshop bis zum Launch lief alles reibungslos.
Creuva hat unsere Bildsprache perfekt in Szene gesetzt.
BeschreibungslisteKennzahlen, Timeline & Fakten
Variante „Kennzahlen“
Vertrauen. Erfahrung. Ergebnisse.
- 120+
- Projekte
- 98 %
- Zufriedene Kunden
- 15+
- Jahre Erfahrung
- 24
- Teammitglieder
Kennzahlen auf Hauptfarbe (Standard: leichte Fläche)
- 24
- Türchen
- 17 Uhr
- Kalenderöffnung
- 120+
- Projekte
- 98 %
- Zufriedene Kunden
Weißer Kreis, Icon schwarz (u-icon-light)
- 24
- Türchen
- 17 Uhr
- Kalenderöffnung
- 120+
- Projekte
- 98 %
- Zufriedene Kunden
Kennzahlen weiß auf Hauptfarbe (u-card-white)
- 24
- Türchen
- 17 Uhr
- Kalenderöffnung
- 120+
- Projekte
- 98 %
- Zufriedene Kunden
Kennzahlen in Grau (u-card-muted), Datum und Bereich
- 24.11.
- Datum (zählt nicht hoch)
- 11–20 Uhr
- Bereich (zählt nicht hoch)
- 120+
- Projekte
- 98 %
- Zufriedene Kunden
Timeline
- 01 Kennenlernen
- Wir besprechen Ihre Ziele.
- 02 Konzeption
- Wir entwickeln eine Strategie.
- 03 Umsetzung
- Design und Entwicklung.
- 04 Betreuung
- Auch nach dem Launch.
Fakten
- Kunde
- Grünwerk Energie GmbH
- Branche
- Energieversorgung
- Leistungen
- Konzept, Webdesign, Contao
- Website
- www.example.com
Prozess-Schritte (creuva_steps)
- Anfrage
- Zeichnung oder Idee schicken.
- Konstruktion
- Planung in 3D und Abstimmung.
- Fertigung
- Alles im eigenen Haus.
- Montage
- Durch die eigenen Teams.
Interaktive ElementeAkkordeon
Standarddarstellung mit Plus-Zeichen.
Inhalt des zweiten Eintrags.
Inhalt des dritten Eintrags.
ErweiterungenTheme Components Bundle
CSS-StileHintergründe & Klassen
Diese Klassen gibt es im Bereich „CSS-Stil“ unter „Abschnitt & Hintergrund“, „Text“ und „Abstände“ – auch für Artikel.
Weiß
u-bg-surface
Hellgrau
u-bg-muted
Akzent hell
u-bg-accent
Primär
u-bg-primary
Karte
Rahmen und Schatten (u-card).
Zentriert
Text zentriert (u-text-center).
Volle Breite
Der Hintergrund reicht bis an den Fensterrand, der Inhalt bleibt im Raster (u-full-bleed).
Schmal (Lesebreite)
Lange Texte lesen sich mit begrenzter Zeilenlänge angenehmer. Die Klasse u-narrow begrenzt die Breite eines Elements auf die Lesebreite.
Einblenden beim ScrollenAnimationen
Was automatisch animiert wird, legt das Seitenlayout fest. Einzelne Elemente bekommen im Bereich „CSS-Stil“ unter „Animation“ eine eigene Richtung.
Von unten
u-reveal-up
Von links
u-reveal-left
Von rechts
u-reveal-right
Zoom
u-reveal-zoom
Unschärfe
u-reveal-blur
Von oben
u-reveal-down
Nur Einblenden
u-reveal-fade
Keine
u-reveal-none
FormulargeneratorFormulare
Alle Feldtypen des Contao-Formulargenerators übernehmen Farben, Rundungen und Abstände des Themes: Textfelder, Auswahl, Textarea, Radio-Buttons, Checkboxen, Schieberegler und Buttons.
KalenderTermine
Event-Liste mit Datum, Uhrzeit und Ort, Monatskalender und Minikalender aus dem Kalender-Bundle von Contao.
Event-Liste
Workshop: Websites barrierefrei gestalten
Creuva Studio (Musterstraße 1, 01067 Dresden)
Praxisnah durch die WCAG 2.1: Kontraste, Tastaturbedienung und Formulare.
Digitalmesse Mitteldeutschland
Messe Leipzig, Stand B12
Zwei Tage, viele Gespräche: Besuchen Sie uns an unserem Stand.
Monatskalender
| November 2026 | Dezember 2026 > | |||||
|---|---|---|---|---|---|---|
| Montag | Dienstag | Mittwoch | Donnerstag | Freitag | Samstag | Sonntag |
|
|
|
|
|
|
|
1
|
|
2
|
3
|
4
|
5
|
6
|
7
|
8
|
|
9
|
10
|
11
|
12
|
13
|
14
|
15
|
|
16
|
17
|
18
|
19
|
20
|
21
|
22
|
|
23
|
24
|
25
|
26
|
27
|
28
|
29
|
|
30
|
|
|
|
|
|
|
Code-ElementCode
{% extends '@Contao/content_element/text.html.twig' %}
{# Eigene Templatevariante mit Dachzeile #}
{% block inner %}
<p class="c-kicker">{{ data.creuvaKicker }}</p>
{{ parent() }}
{% endblock %}
ModuleFrontend-Module
Breadcrumb
News-Liste
Die perfekte Startseite – sieben Elemente, die überzeugen
Ein Beispielbeitrag für das News-Modul des Styleguides.
Weiterlesen … Die perfekte Startseite – sieben Elemente, die überzeugen
Nachhaltige Websites – warum sie wichtiger sind
Noch ein Beispielbeitrag, um die Darstellung der Liste zu zeigen.
Weiterlesen … Nachhaltige Websites – warum sie wichtiger sind
