# Pop-Up

This page is not available in the requested language. Available languages: [Deutsch](https://digital.sbb.ch/de/design-system/maps/components/pop-up) 

# Pop-Up.

## Übersicht

### Verwendung

Sind zu einem Map Marker zusätzliche Informationen vorhanden, können diese in einem Pop-Up dargestellt werden.

### Regeln

- Das Pop-Up ist immer im Kartenausschnitt ersichtlich. Wird der Kartenausschnitt verschoben, kann sich die Positionierung des Pop-Ups ändern (links, unterhalb, rechts).
- Bei kleinen Screens wird der Inhalt in einer Box am unteren Bildrand dargestellt - analog Sidebar und Cards. Die Höhe ist nicht beschränkt.
- Ein Kreuz in der oberen rechte Ecke ermöglicht die Schliessung des Pop-Up.
- Sind zu einem Marker mehrere Informationen verfügbar, werden diese untereinander dargestellt. Die Höhe des Pop-Up nimmt entsprechend zu oder wird mittels Pagination dargestellt.

## Varianten

### Varianten

Die Komponente hat folgende Varianten:

- Mode: Light/Dark
- Breakpoint: Desktop/Mobile
- Position: Links/Unten/Rechts

#### Position rechts

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-pop-up-right-light.webp "Darstellung des Primary Button")

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-pop-up-right-dark.webp "Darstellung des Primary Button")

#### Position links

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-pop-up-left-light.webp "Darstellung des Primary Button")

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-pop-up-left-dark.webp "Darstellung des Primary Button")

#### Position unten

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-pop-up-bottom-light.webp "Darstellung des Primary Button")

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-pop-up-bottom-dark.webp "Darstellung des Primary Button")

#### Mobile

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-pop-up-mobile-light.webp "Darstellung des Primary Button")

![Darstellung des Primary Button](https://digital.sbb.ch/assets/images/maps/maps-pop-up-mobile-dark.webp "Darstellung des Primary Button")

---

Source: https://digital.sbb.ch/en/design-system/maps/components/pop-up/