Introduction

The Distance is a small label that shows how far a physical place is from the current location of the user. It typically appears within the media of a piece of geolocated content, over its thumbnail.

It gives proximity, not an address: the full address of a place is the Address element.

The Distance is displayed only when the content carries geolocation data and a distance can actually be calculated. When no valid distance comes back, the element is not displayed at all.

Anatomy

The label

The Distance is a single line of text on a solid, semi-transparent background. The text is set in the OS font of the device, at a fixed 13 px, and a padding separates it from the edges of its background: a narrow one above and below, a wider one left and right.

Properties

Units

The value is formatted automatically by the system, following the unit preferences of the user. The same place can therefore read in kilometers for one person and in miles for another.

Background

The background is black at 50% opacity. It is an overlay: the image underneath keeps showing through it, which is what makes the label readable over any picture while keeping it discreet.

Shape

The Shape atom applies to the background, from Sharp to Round. On a label this short, Round rounds the ends into a pill.

Layout

Placement

The Distance sits in the bottom-left corner of the media.