Carousel – digital.sbb.ch

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

Releases

Design Tokens

Komponenten

Übersicht

Basis

Informationen

Übersicht

Basis

Komponenten

Sinn & Zweck

Community Assets

Anleitung

Power-Apps

Digitale Werbebanner

SAP

App Icons

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

Unten - kleine Screens

Mobile

Haben Sie Fragen? Evtl. Hilft unser FAQ oder unsere Hilfe weiter, ansonten können Sie Ihre Frage gerne im entsprechenden Board auf Github platzieren.

Impressum

Kontakt

Datenschutz

Cookie Einstellungen