Usage

Use a carousel when many map markers are located in the same area and users need to compare them.

Rules

• Show concise information about the map markers in cards.
• On larger screens, stack the cards vertically on the left. Hovering over a card highlights its map marker.
• On small screens and in mobile apps, show the cards at the bottom of the screen. Users can expand the card area to the full map height or collapse it so that no card is shown.
• Selecting a marker on the map highlights its corresponding card or, on small screens and in mobile apps, displays that card.

Variants

The component has the following variants:

• Mode: light/dark
• Orientation: left/bottom

Left — large screens

Bottom — small screens

Mobile