Design System

Elements and Gutenberg Parity

Bu sayfa theme icindeki tum tekrarli UI primitive'leri ve Gutenberg block kontratlarinin gorunur referansini sunar. Amac: tek kaynaktan style parity ve semantic tutarlilik.

Design Tokens

Renk, tipografi ve yuzey dilini sabitleyen temel token katmani.

Brand Orange #f39200
Brand Black #111111
Deep Blue #0f2a44
Surface #fafafa

Typografie

Heading hiyerarsisi ve govde metin seviyesi tek tip ritimle kullanilir.

Eyebrow Label

Section Title Scale

Card or Item Heading (H3)

Bu metin govde copy olcegini gosterir. Satir yuksekligi, kontrast ve okunabilirlik single, archive ve block iceriklerinde ayni standarda baglidir.

Primitives

Butonlar, badge'ler, image box ve icon box gibi tekrarli tas yapilari.

Badges

Beliebt Featured

Image Box

Image Box Preview
Image box with caption and fixed radius/elevation.

Icon Box

Sicherheitskonform

Icon, heading ve text kombinasyonu tum template'lerde ayni primitive ile kurulur.

Cards, Accordion, Table

Sik kullanilan bilgi desenleri ve responsive davranis ornekleri.

Feature Card

Kein Werkstattbesuch

Feature grid ve benzer bilgilendirme bolumlerinde kullanilan kart yapisi.

Accordion Pattern

Pflichten fuer Unternehmen

Installation, kalibrierung ve veri saklama akislari burada listelenir.

Pflichten fuer Fahrpersonal

Fahrerkarte, lenkzeit kaydi ve egitim maddeleri accordion iceriginde sunulur.

Data Table

PatternOwnerFallback
Hero MetaEntity ACFPost title + default image
CTA BandBlock or ACF or OptionsGlobal CTA defaults
Front CardCPT ACFFeatured image + excerpt

Form Controls and UI States

Input primitive'leri, status pill'leri ve notice stilleri tek referansta dogrulanir.

Field Primitives

Status and Feedback

Aktiv In Pruefung Kritisch
Hinweis: Diese Komponenten dienen als Referenz fuer Frontend und Editor-Parity.
Erfolg: Kontrast und spacing auf dunklen und hellen Flaechen validiert.

Gutenberg Block Previews

Tum custom block setinin birebir kontratli gorunur ornekleri.

hero-inhalt

Hero Eyebrow

Hero Inhalt Titel

Lead text, call-to-action ve trust list ayni block contract ile render edilir.

Primary Action Secondary Action
  • 30+ Jahre Erfahrung
  • ISO 9001
  • Bundesweit

merkmalsraster

Feature Grid Heading

Icon + Title

Kisa aciklama metni.

Icon + Title

Kisa aciklama metni.

Icon + Title

Kisa aciklama metni.

kennzahlen-band

Kennzahlen

200+Kunden
48hReaktionszeit
100%Eigenleistung

medien-text

Media Text Heading

Gorsel ve metin yan yana duzenlenir, layout secimi block alanindan gelir.

Media Text Preview

faq-akkordeon

FAQ Heading

Erste Frage

Acik accordion cevabi.

Zweite Frage

Kapali accordion cevabi.

image-box

Image Box Preview
Image box caption for editor and front-end parity.

icon-box

Icon Box Titel

Bu blok, ikon + baslik + metin primitive'ini editor icinden yonetmek icindir.

logoband

Zertifiziert und anerkannt von

Qualitaetsmanagement
Tachograph-Kalibrierung
Abbiegeassistent ABE

partner-strip

Branchenvertrauen

Unsere Referenzen

Auszug unserer Zusammenarbeit mit Unternehmen aus Logistik, Bau ve Service.

MUSTER LOGISTIK150 Fahrzeuge
URBAN BAU40 Transporter
KOMMUNAL NORD18 Spezialfahrzeuge

referenzen-grid

Erfolgsgeschichten

Referenzprojekte

Logistik

150 LKW

Problem
Rueckwaertsfahrten ohne Sichtkontrolle.
Loesung
HD-Rueckfahrkameras und PDC.
Ergebnis
Unfaelle deutlich reduziert.

Handwerk

40 Transporter

Problem
Lueckenhafte Fahrtennachweise.
Loesung
Automatisches Fahrtenbuch.
Ergebnis
Weniger Verwaltungsaufwand.

einbau-service

Exklusiver Service

Bundesweiter
Einbauservice

Unser zertifiziertes Technikernetzwerk deckt alle 16 Bundeslaender ab.

  • ✓Eigene, zertifizierte Fahrzeugtechniker
  • ✓UVV-konform nach E1-Norm dokumentiert
ISO 9001 UVV-konform

ueber-uns

Ueber uns

Expertise &
Leidenschaft

Seit mehr als 30 Jahren steht Wollnikom fuer massgeschneiderte Telematikloesungen mit bundesweitem Service.

Unsere Staerke ist die Verbindung aus Technik, Beratung und klarer Umsetzung im Fuhrparkalltag.

200+Zufriedene Kunden
48 hReaktionszeit
100%Eigenleistung

cta-band

CTA Eyebrow

CTA Band Heading

Primary ve secondary action, trust list ve background image tek blokta birlesir.

Primary Action Secondary Action
  • Keine Kaufverpflichtung
  • Schnelle Rueckmeldung
  • DSGVO-konform

dringlichkeit-band

Neue Pflicht

Gesetzesfrist naht: Jetzt handeln

Tachographenpflicht fuer leichte Nutzfahrzeuge ist terminkritisch. Dieser Block bildet den Handlungsdruck und die wichtigsten Risiken ab.

Flotten-Check buchen

Betroffene Flotten

2,5t bis 3,5t Fahrzeuge im EU-Grenzverkehr.

Bußgeldrisiko

Hohe Strafen bei fehlender oder falscher Ausstattung.

Fristen sichern

Fruehzeitige Planung reduziert Standzeiten und Kosten.

fallstudie-grid

Aus der Praxis

Case Study Aufbau

Problem

Manueller Aufwand

Unstrukturierter Downloadprozess und fehlende Transparenz.

Loesung

Remote Download Setup

Automatisierte Datenfluesse mit Einweisung der Dispo.

Ergebnis

Compliance + Effizienz

Keine Bußgelder, bessere Einsatzplanung, weniger Admin-Zeit.

100% rechtskonform

swiper/fancybox hooks

Slide 1
Slide 2
Slide 3

Form Primitives

Light ve dark form varyantlari tek referansta test edilir.

Form Widget Light

Anfragetyp

Mit dem Absenden stimmen Sie unserer Datenschutzerklaerung zu.

Form Widget Dark

Anfragetyp

Mit dem Absenden stimmen Sie unserer Datenschutzerklaerung zu.

Archive Card Parity

Front ve archive kartlarinin ayni primitive'ten beslendigini dogrulayan canli ornek.

Digitaler Tachograph
Pflicht 2026

Digitaler Tachograph

DTCO 4.1a · Remote Download · Kalibrierung · Gesetzeskonform

Fahrerassistenzsysteme
Sicherheitsfokus

Fahrerassistenzsysteme

Abbiegeassistent · AI-Dashcam · 360° Kamera · PDC

Fahrzeugelektronik

Fahrzeugelektronik

Wechselrichter · Navigation · Alarmanlage · Infotainment

Block Inventory Checklist

  • Hero content variants
  • Card variants (lg, md, sm, wide, md-tall)
  • Feature grid (2, 3, 4 columns)
  • Stat band
  • Media text (left or right)
  • FAQ accordion states
  • CTA band variants (single or dual action)
  • Form widget (light or dark)
  • Trust list and icon set
  • Section header hierarchy