Contact details

For this page, we've removed the side navigation (bottom of the screen on mobile), so that we can show you the contact details component in its full glory! Don't worry, you can return to the components menu here at any time.

The contact details component allows you to add an email address, a telephone number and an address, along with a map, pinning your location. You don't need to include all of these, i.e. you could exclude the address or telephone number, or the map - any combination you desire!

Let's show you an example of the contact details component that includes all of the potential details, including a map.

There are a couple of important points you'll need to know in order to get the component to look as it does above:

• If you would like the email address to be a link that sends an email to the address when clicked, you'll need to highlight the email address in the text editor within umbraco and click the link icon (two chain pieces connected together). Then, within the "Link" field, enter mailto:hello@emaildomain.com (changing the email address to the email you want to use).
• To embed a map, you'll need to copy and paste some code. Most maps include this feature, including Google maps and OpenStreetMap. To obtain this code, search for a location within your chosen maps program, i.e. "Lille, France", then click the "Share" button, then click "Embed", from here you can copy the HTML code and paste it into the "Embedded Map" section of your contact details component. Finally, you'll need to change one part of that code to make it look nice. Simply change the width="600" (note that the actual number may be different) to width="100%". This ensures that the map fits the screen neatly on both desktop and mobile devices.

Let's try a couple of variations of the contact details component. First, let's just include an email address, a street address and a map. We'll also change the "Background colour" on the "Background styles" tab to white and the "Heading Text Colour" and the "Details Text Colour" to two different shades of green (note the heading text colour changes the colour of any headings within the text boxes, as well as the colour of the icons). Finally, we'll add a "Small Heading 2" heading to each section.

Let's try one more variation, a simpler contact details component that doesn't include a map and changes the "Heading Text Colour" to pink:

We hope that you've found this wiki page on the contact details component useful! To return to the components menu, click here.