Zur Navigation Zum Inhalt Kontakt Menu Komponente finden Übersicht Maps Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Design Tokens Komponenten Übersicht Basis Informationen Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons
Komponente finden

Maps

Basics Copyright

Copyright

Layer Menu

Layer Menu

Level Menu

Level Menu

Localization

Localization

Zoom

Zoom

Components Carousel

Carousel

Map-Marker

Map-Marker

Pop-Up

Pop-Up

Routing

Routing

Sidebar

Sidebar

Carousel Übersicht

Verwendung

Ein Carousel wird eingesetzt, wenn auf der Karte an einem Ort viele Map Marker vorhanden sind und ein Vergleich der einzelnen Punkte Sinn macht.

Regeln

  • Für die Map Marker im Kartenausschnitt werden komprimierte Informationen in Cards angezeigt.
  • Bei grösseren Screens werden die Cards auf der linken Seite untereinander dargestellt. Wird über eine der Cards gefahren, wird der entsprechende Map Marker hervorgehoben.
  • Bei kleinen Screens sowie in Mobile-Anwendungen werden die Cards am unteren Bildschirmrand dargestellt. Der Bereich mit den Cards kann vergrössert (über die gesamte Kartenhöhe) oder verkleinert (keine Card mehr angezeigt) werden.
  • Wird ein Marker auf der Karte angewählt, wird die entsprechende Card hervorgehoben, bzw. dargestellt (kleine Screens und Mobile).
Zustände und Varianten

Varianten

Die Komponente hat folgende Varianten:

  • Mode: Light/Dark
  • Orientation: Left/Bottom

Links - grosse Screens

Darstellung des Primary Button
Darstellung des Primary Button

Unten - kleine Screens

Darstellung des Primary Button
Darstellung des Primary Button

Mobile

Darstellung des Primary Button
Darstellung des Primary Button

Impressum Kontakt Cookie Einstellungen