--- title: "Distance | GoodBarber's Design System" description: "The Distance element shows how far a geolocated place is from the user in GoodBarber apps, formatted in their own units: meters, kilometers or miles." canonical_url: "https://www.goodbarber.com/uxdesign/distance/" lang: fr --- # Distance | GoodBarber's Design System [Design System](https://fr.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://fr.goodbarber.com/uxdesign/](https://fr.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://fr.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # Distance UI Elements The Distance is the small label that shows how far a geolocated place is from the person using the app. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/distance.66b8de79b07d.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/distance.66b8de79b07d.mp4) ## 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](/uxdesign/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](/uxdesign/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. ![The text and its padding](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Distance-Anatomy-Structure.601ca1dc4a9c.png) *The text and its padding* ## 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. ![Three examples of formatting: meters, kilometers and miles](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Distance-Properties-Units.22a2606f302b.png) *Three examples of formatting: meters, kilometers and miles* ### Background The [background](/uxdesign/background/) is black at 50% opacity. It is an [overlay](/uxdesign/atom-overlay/): the image underneath keeps showing through it, which is what makes the label readable over any picture while keeping it discreet. ![Black at 50%: what is underneath still shows through](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Distance-Properties-Background.b7ef7103f33b.png) *Black at 50%: what is underneath still shows through* ### Shape The [Shape](/uxdesign/atom-shape/) atom applies to the background, from Sharp to Round. On a label this short, Round rounds the ends into a pill. ![Sharp, Rounded and Round applied to the label](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Distance-Properties-Shape.1015d77cb376.png) *Sharp, Rounded and Round applied to the label* ## Layout ### Placement The Distance sits in the bottom-left corner of the media. ![The Distance in the bottom-left corner](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Distance-Layout-Placement.c6f8ba70c327.png) *The Distance in the bottom-left corner*