Pin group

The pin group is used for the store finder in the app.

Use it on maps to show a store location or store groups.

Overall styling#

  • The text-style is basic bold.
  • The line-height is 120%.
  • The font-color is basic-white.
  • The background-color is brand-primary-base.
  • The border is in basic-white with a 1px thickness.

Usage#

  • Place the pin group on a map in your prototyp.
  • While zooming out, individual pins merge into a pin group.
  • Use the appropriate size depending on how many stores you want to display.

Spacing & measurements#

TypesAttributesPreview
Sizesingle-digit: 40px
double-digit: 48px
triple-digit: 56px		Size: Single Size: Double Size: Triple
Texthorizontally and vertically centered in the circle

What can be modified#

  • Override the text.
  • Adjust the size depending on the digits.

Change log#

2.5.0 App - 2022-02-21#

Deprecated#

  • Sketch, Doc: "Pin group" | The pin group component is obsolete

2.1.0 App - 2021-07-22#

Changed#

  • Doc: "Pin group" | Clean up the documentation for the right structure and sentence case

2.0.0 App - 2021-06-24#

Highlights#

  • Sketch: "Pin group" | New layer-styles, text-styles and color-variables settings

Changed#

  • Doc: "Pin group" | Updated documentation