--- title: "Address | GoodBarber's Design System" description: "The Address element of GoodBarber cells shows the full address of a geolocated piece of content, next to a location icon that scales with the text." canonical_url: "https://www.goodbarber.com/uxdesign/address/" lang: pt --- # Address | GoodBarber's Design System [Design System](https://pt.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [https://pt.goodbarber.com/uxdesign/](https://pt.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.b5a5ae872a5d.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.5c1a2eb6da12.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [Overview](https://pt.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/) * [Action](/uxdesign/action/) * [Actions Menu](/uxdesign/actions-menu/) * [Address](/uxdesign/address/) * [Author](/uxdesign/author/) * [Content](/uxdesign/content/) * [DateBullet](/uxdesign/datebullet/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Media](/uxdesign/media/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) * [Player](/uxdesign/player/) * [Premium Sticker](/uxdesign/premium-sticker/) * [Story Pager](/uxdesign/story-pager/) * [Text](/uxdesign/text/) * [ToolBar](/uxdesign/toolbar/) * [Widget Header](/uxdesign/widget-header/) - [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/) # Address UI Elements The Address shows the full address of a place, next to a location icon, and never cuts it short. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/address.0ff5a95af39c.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/address.0ff5a95af39c.mp4) ## Introduction The Address displays the full address of a geolocated piece of content. It is most often used for events and for the points of a map, and it gives the reader a clear reference of where something takes place. The address is always shown in full. Whatever the constraints of the layout, it is never truncated. ## Anatomy ### The icon and the text The Address pairs a location icon from the [Icons](/uxdesign/icons/) family with the address itself, written next to it as a line of text. The icon takes the color of the text. ![The icon and the address](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Address-Anatomy-Structure.4d68827dc9dc.png) *The icon and the address* ## Layout ### Spacing Between the icon and the text, the spacing is always 4px, whatever the layout and whatever the device. ![4px between the icon and the text](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Address-Layout-Spacing.9fcb514bc640.png) *4px between the icon and the text* ### Icon size The size of the icon follows the size of the text. It is the font size of the address plus 6px, with a minimum of 16px and a maximum of 32px. This keeps the icon legible next to a small text without letting it grow oversized next to a large one. ![The icon grows with the text](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Address-Layout-IconSize.1b915b0932de.png) *The icon grows with the text* ### Several lines A long address wraps over several lines rather than being cut. When it does, the icon stays aligned with the first line of text. ![The icon stays on the first line](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Address-Layout-Lines.2bea66132ca8.png) *The icon stays on the first line* ### Placement The Address lives in the cells that display geolocated content, events and map points, below the title and the other information of the item. Each meta-cell decides where it shows it, and each list turns it on with its Address option, which also sets its [font](/uxdesign/atom-font/). ![In a card and in a compact cell](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Address-Layout-Placement.6d9b66bf0eaa.png) *In a card and in a compact cell*