Contact details

This component is used to provide contact details of a particular person or office. Each field includes schema markup also known as structured data. The helps search engines to read and understand the content.

Contact details example

Office contact:
Shannon Norstrud

How to use the contact details component

Use the contact details to add information about a specific person or office. The component includes a contact name, an optional image, and an address. You can also add a link.

We often add contact details to a 50:50 panel alongside a map component. This helps to pair the contact details with a visual map of where the person or office is. This isn’t essential, and you can use any other combination of layout and components that suits the content of the page.

Adding a contact details component in the CMS

You can add contact details to a panel using the ‘Contact Details Component’. You can also use the 50:50 template called 'Office info 50/50'.

Contact details modifier rules

Background: default (white) or ‘background’ (grey)
Grid span: 8
Padding: default, unless required to improve layout
Alignment: default

Read our full guidance on using modifiers

Evidence and research

User research tells us that users prefer an interactive map rather than a static image of a map. This is something we’re working on including in the design system in the future.