LWC StudioStart designing

Formatted Address generator

Mailing addresses on account, contact and lead records render through lightning-formatted-address. Style the map-pin icon and optional map link color so multi-line addresses stay easy to scan in a compact space.

Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.

Live preview
Generated code
<template>
    <div class="studio-formatted-address">
        <lightning-icon icon-name="utility:location" size="x-small" class="studio-formatted-address__pin"></lightning-icon>
        <lightning-formatted-address
            street="415 Mission Street"
            city="San Francisco"
            province="CA"
            postal-code="94105"
            country="USA"
            show-static-map="false"
            class="studio-formatted-address__value"
        ></lightning-formatted-address>
    </div>
</template>

Design tips for formatted addresses

  • Only link the city/state/zip line to a map, not the whole address block — one clear link beats several ambiguous ones.
  • Keep line-height generous (1.4–1.6) since addresses are almost always multi-line.
  • Match the map-pin icon color to your other metadata icons (phone, email) for a consistent "field row" language across a record page.

Related components

Components developers commonly compare against or pair with Formatted Address.