Skip to content
1/5
Design System
Übersicht aller UI-Komponenten
1. Grundlagen
1a. Fonts (theme.css)
Typografie-Klassen für Schriftfamilien, Grössen, Headings, Fliesstext und Gewichte. Keine Props — Nutzung über Tailwind-Klassen.
Familien
font-sans
Comfortaa — Das ist ein Beispieltext
font-serif
Serif — Das ist ein Beispieltext
font-mono
Mono — Das ist ein Beispieltext
Grössen
Tailwind-Skala
text-2xs0.625rem / 10px Zeitreisen
text-xs0.75rem / 12px Zeitreisen
text-sm0.875rem / 14px Zeitreisen
text-base1rem / 16px Zeitreisen
text-lg1.125rem / 18px Zeitreisen
text-xl1.25rem / 20px Zeitreisen
text-2xl1.5rem / 24px Zeitreisen
text-3xl1.875rem / 30px Zeitreisen
text-4xl2.25rem / 36px Zeitreisen
text-5xl3rem / 48px Zeitreisen
text-6xl3.75rem / 60px Zeitreisen
text-7xl4.5rem / 72px Zeitreisen
text-8xl6rem / 96px Zeitreisen
text-9xl8rem / 128px Zeitreisen
Headings
Fluide Typografie mit clamp (Mobile → Desktop)
text-h1 — 1.5rem (24px) → 3rem (48px) lh 1.875rem (30px) → 3.75rem (60px) Heading 1
text-h2 — 1.25rem (20px) → 2.125rem (34px) lh 1.875rem (30px) → 3.125rem (50px) Heading 2
text-h3 — 1.125rem (18px) → 1.75rem (28px) lh 1.5rem (24px) → 2.375rem (38px) Heading 3
text-h4 — 1rem (16px) → 1.125rem (18px) lh 1.25rem (20px) → 1.375rem (22px) Heading 4
Fliesstext
text-paragraph — 0.875rem / 14px
Paragraph — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Gewichte
font-light — 300 Zeitreisen
font-normal — 400 Zeitreisen
font-medium — 500 Zeitreisen
font-semibold — 600 Zeitreisen
font-bold — 700 Zeitreisen
1b. Spacing (theme.css)
Spacing-Klassen von xs bis xxl. Keine Props — Nutzung über Tailwind-Klassen wie p-m oder gap-xl.
xs
0.3125rem
s
0.625rem
m
0.9375rem
l
1.5625rem
xl
2.5rem
xxl
4.0625rem
1c. Farben (theme.css)
Farbklassen inkl. Opacity-Varianten. Keine Props — Nutzung über Tailwind-Klassen wie bg-primary oder text-foreground.
primary#F59424
primary-orange-light#F7AC5A
secondary#EC5C55
accent#9D4CFF
grey#F2F2EB
ink#646464
background#F2F2EB
foreground#646464
Opacity-Varianten
primary/10
primary/20
primary/30
primary/50
primary/70
2. Icons
2a. Favicon & App Icons
PWA- und Browser-Icons aus public/icons/.
favicon.svgTab / modern
favicon.png32×32
apple-touch-icon.png180×180
icon-192.png192×192
icon-512.png512×512
icon-512-maskable.png512×512 maskable
logo-original.svgMaster SVG
logo-original.png1000×1000
4. Formulare
4a. Input (Input.vue)
Texteingabefeld mit Label und optionalem Fehlerzustand.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| v-model | string | nein | '' | Aktueller Eingabewert | |
| label | string | nein | — | Optionales Feld-Label | |
| placeholder | string | nein | — | Platzhalter im Eingabefeld | |
| type | string | nein | 'text' | HTML-Input-Typ | |
| disabled | boolean | nein | false | Deaktiviert das Eingabefeld | |
| error | boolean | nein | false | Fehlerzustand mit Icon | |
| autocomplete | string | nein | — | HTML-autocomplete-Attribut | |
| name | string | nein | — | HTML-name-Attribut |
4b. Checkbox (Checkbox.vue)
Checkbox mit optionalem Label.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| v-model | boolean | nein | false | Angehakt oder nicht angehakt | |
| label | string | nein | — | Beschriftung neben der Checkbox | |
| disabled | boolean | nein | false | Deaktiviert die Checkbox | |
| name | string | nein | — | HTML-name-Attribut | |
| default (slot) | slot | nein | — | — | Label-Inhalt, Fallback ist label |
4c. Radio (Radio.vue)
Radio-Button für eine Auswahl innerhalb einer Gruppe.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| v-model | string | nein | '' | Aktuell ausgewählter Wert der Gruppe | |
| value | string | ja | — | — | Wert dieser Radio-Option |
| label | string | nein | — | Beschriftung neben dem Radio | |
| name | string | nein | — | HTML-name für die Radio-Gruppe | |
| disabled | boolean | nein | false | Deaktiviert diese Option | |
| default (slot) | slot | nein | — | — | Label-Inhalt, Fallback ist label |
4d. Dropdown (Dropdown.vue)
Auswahlfeld für Einzel- oder Mehrfachauswahl.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| v-model | string | string[] | ja | — | — | Aktuell ausgewählter Wert bzw. Werte |
| options | DropdownOption[] | ja | — | — | Auswahloptionen mit value, label und optional disabled |
| label | string | nein | — | Optionales Feld-Label oberhalb | |
| placeholder | string | nein | — | Platzhaltertext bei leerer Auswahl | |
| multiple | boolean | nein | false | Aktiviert Mehrfachauswahl | |
| disabled | boolean | nein | false | Deaktiviert das Dropdown |
5. Komponenten
5a. Divider (Divider.vue)
Vertikaler Abstandshalter mit optionaler horizontaler Trennlinie.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| line | boolean | nein | true | Zeigt die horizontale Trennlinie | |
| spacing | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | nein | 'xl' | Vertikaler Abstand um den Divider (ohne Linie = Höhe) | |
| mtAuto | boolean | nein | false | Aktiviert mt-auto (schiebt Divider nach unten in Flex-Layouts) |
Abschnitt oben
Abschnitt unten
5b. Information-Dialog (InformationDialog.vue)
Schliessbarer Info-Hinweis mit optionalem Icon.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| v-model | boolean | nein | true | Steuert die Sichtbarkeit des Dialogs | |
| showIcon | boolean | nein | false | Zeigt das Info-Icon links neben dem Inhalt | |
| closeAriaLabel | string | ja | — | ARIA-Label für den Schliessen-Button | |
| default (slot) | slot | nein | — | Dialog-Inhalt |
Dies ist ein Informationstext.
5c. Tabs (Tabs.vue)
Tab-Navigation mit Mobile-Select und benannten Slots für Panel-Inhalte.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| v-model | string | ja | — | Wert des aktiven Tabs | |
| options | TabOption[] | ja | — | — | Tab-Definitionen mit value, label, optional href und disabled |
| ariaLabel | string | nein | 'Tabs' | ARIA-Label der Desktop-Tab-Navigation | |
| selectAriaLabel | string | nein | 'Select a tab' | ARIA-Label des mobilen Selects | |
| #[value] (slot) | slot | nein | — | — | Panel-Inhalt pro Tab, Slot-Name entspricht option.value |
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
5d. JourneyProgress (JourneyProgress.vue)
Fortschrittsbalken für eine Reise mit Start-/Zielort und Zug-Indikator.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| start | string | ja | — | Startort-Label links unter dem Balken | |
| destination | string | ja | — | Zielort-Label rechts unter dem Balken | |
| progress | number | ja | — | Fortschritt von 0 bis 100, intern geklemmt | |
| markers | { id: string, progress: number }[] | nein | [] | — | Primary-Striche für Trigger auf der Strecke, inklusive bereits passierter |
zürich
bern
5e. Tag (Tag.vue)
Kleines Label/Badge in verschiedenen Farbvarianten.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| variant | 'primary' | 'outline' | 'secondary' | 'dark' | nein | 'primary' | Farbvariante des Tags | |
| default (slot) | slot | nein | — | Tag-Text bzw. Inhalt |
Tag
5f. SpeedBadge (SpeedBadge.vue)
Pill-Badge mit Info-Icon und Geschwindigkeitsangabe in km/h. Klick öffnet Bottom-Sheet mit Livegeschwindigkeit und GPX-Distanzen.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| speed | number | ja | — | Geschwindigkeit in km/h ab 0, ohne Obergrenze |
5g. LoadingSpinner (LoadingSpinner.vue)
Zweifarbiger Lade-Spinner mit Primary- und Secondary-Farbe.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | nein | 'md' | Grösse des Spinners |
5h. ChannelCard (ChannelCard.vue)
Farbige Sender-Kanal-Karte mit Titel, Beschreibung, Geschichten-Badge und Info-Link.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| title | string | ja | — | Channel-Titel | |
| slug | string | ja | — | URL-Slug (Prefix lokalisiert: sender/station/stazione) | |
| description | string | nein | — | Kurzbeschreibung unter dem Titel | |
| storyCount | number | nein | 0 | Anzahl Geschichten (Trigger) | |
| variant | 'primary' | 'green' | 'secondary' | 'accent' | nein | 'primary' | Hintergrundfarbe der Karte |
5i. ChannelSelection (ChannelSelection.vue)
Liste von ChannelCards für die Senderauswahl einer Strecke.
5j. LanguageSwitcher (LanguageSwitcher.vue)
Sprachumschalter über @nuxtjs/i18n (de-CH, fr, it, en).
6. Medien
6a. AudioPlayer (AudioPlayer.vue)
Audio-Wiedergabe mit Wellenform, «Hören»-Badge, Titel, Beschreibung und Transkription. Prop: media: MediaItem (type audio).
Listen
Audio 01 – Einstieg
Beispiel-Audio für den Trigger an der Kante Fust.
6b. VideoPlayer (VideoPlayer.vue)
Video- oder Bild-Wiedergabe mit «Sehen»-Badge, Zeitanzeige, Beschreibung und Transkription. Video kann optionales Begleitaudio parallel abspielen.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| media | MediaItem | ja | — | — | CMS-Medium mit type video oder image |
| type (Demo) | 'video' | 'image' | nein | 'video' | Wechselt zwischen Video- und Bild-Mock | |
| @complete | emit | nein | — | — | Video ended bzw. Bild nach 5s |
Kreuzung Kaufmannstrasse, aufgenommen im Sommer 2024.
Watch
Video 01 – Kreuzung
Beispiel-Video für die Kreuzung Kaufmannstrasse – Quaderstrasse.
6c. MediaGallery (MediaGallery.vue)
Slideshow-Carousel mit Swipe, Thumbnails, optionalem Begleitaudio und Transkript. Prop: media: MediaItem (type slideshow).
Einfahrt in den Bahnhof Chur, Aufnahme 2024.
Watch
Multimedia-Slideshow Quaderstrasse
Test-Slideshow mit Video, Audio und Bildern für die Quaderstrasse.
6d. MediaPlayer (MediaPlayer.vue)
Dispatcher für Audio-, Video-, Bild- und Slideshow-Player inkl. MediaFooterSheet.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| media | MediaItem | ja | — | — | Beliebiges CMS-Medium (audio/video/image/slideshow) |
| type (Demo) | MediaType | nein | 'audio' | Wechselt den Demo-Medientyp | |
| default (slot) | slot | nein | — | — | Inhalt im MediaFooterSheet |
| @complete | emit | nein | — | — | Weitergeleitet vom Sub-Player |
6e. MediaSource (MediaSource.vue)
i-Icon zur Quellenangabe eines Trigger- oder Puffer-Inhalts. Öffnet einen Dialog mit dem formatierten Quelltext. Die Caption steht kursiv direkt unter dem Medium und dient zugleich als Alternativtext.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| source | string | null | nein | null | Quellenangabe als WYSIWYG-HTML; ohne Inhalt bleibt das Icon verborgen | |
| tone | 'on-dark' | 'on-light' | nein | 'on-dark' | Farbgebung des i-Icons je nach Hintergrund |
Blick über die Quaderstrasse Richtung Altstadt.
Blick über die Quaderstrasse Richtung Altstadt.
Watch
Bild 01 – Quaderstrasse
Beispiel-Bild entlang der Quaderstrasse.
7. Channel / Live
7a. ChannelHeader (ChannelHeader.vue)
Oranger Channel-Header mit Titel, Beschreibung, Story-Badge und animierten Punkten.
| Prop | Typ | Required | Default | Wert | Beschreibung |
|---|---|---|---|---|---|
| title | string | ja | — | Channel-Name als h1 | |
| description | string | null | nein | null | Kurzbeschreibung unter dem Titel | |
| storyCount | number | nein | 0 | Anzahl Geschichten im Badge |
Channel
Brücken
Über Viadukte und dessen Ingenieurskunst
12 stories7b. ChannelStations (ChannelStations.vue)
Timeline der Trigger-Stationen mit Verbindungslinien und GSAP-Reveal.
| Prop | Typ | Required | Default | Beschreibung |
|---|---|---|---|---|
| stations | ChannelStation[] | ja | — | Liste mit id, name und optional duration (Sekunden) |
Stations
- Landquart3 min
- Klosters5 min
- Davos Platz4 min
7d. ChannelLiveLoader (ChannelLiveLoader.vue)
Animierter Lade-Indikator mit pulsierenden Ringen für Channel-Live. Keine Props.
9. Integration
9a. TrainTimetable (TrainTimetable.vue)
Standort-Pill mit Bahnhofs-Dropdown und Live-Verbindungen via transport.opendata.ch. Verbindungs-Klick speichert Session und navigiert zur Senderauswahl.
| Prop | Typ | Required | Default | Beschreibung |
|---|---|---|---|---|
| stations | StationOption[] | ja | — | Bahnhöfe mit trackIds und destinations (id, name, trackId) |