Globe Pins — without JavaScript

This page carries exactly the same markup as the demo, but no script is loaded. So there is no globe: what is left is what carried the information from the start, a list of addresses. No dead button hangs about in the tab order — the pin is only rendered once the component is enhanced.

Dark, cards open

The default setting. Every address visible on the near hemisphere carries its card.

  • France Paris 18 rue de Paradis +33 1 84 80 12 04
  • Canada Montreal 1155 René-Lévesque +1 514 555 0148
  • Singapore Downtown Core 8 Marina View +65 6220 4488
  • South Africa Cape Town 32 Bree Street +27 21 555 0192

Cyan, cards on hover

.globe-pins--cyan and data-gp-cartes="au-focus": the cards only appear on hover or on focus, which lets the globe breathe when there are many pins.

  • France Paris 18 rue de Paradis +33 1 84 80 12 04
  • United States New York 55 Water Street +1 212 555 0113
  • Japan Tokyo 2-11 Kanda +81 3 5555 0170
  • Australia Sydney 14 Kent Street +61 2 5550 0136

Light and compact

On the left .globe-pins--clair (227 rows, the finest mesh measured on the reference). On the right .globe-pins--compact: half the text, half the dots, for a side column.

  • Portugal Lisbon Rua da Prata 60 +351 21 555 0124
  • Brazil São Paulo Av. Paulista 900 +55 11 5555 0159
  • Germany Berlin Torstraße 140 +49 30 5550 0127
  • Mexico Mexico City Av. Reforma 222 +52 55 5555 0181