Contact box
Use this component to highlight contact information (e.g. phone number, email address, survey link, etc.). You can include multiple items in the same box as long as they serve the same purpose. For example contacting a team by phone or by email for the same purpose can be included in one contact box. Do not use this if you have more than five or more pieces of contact information you want to highlight, use a definition list instead.
Variations
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Component used in
Page template
Details
Usage
The contact box component provides contact info to the users (e.g., email and phone number).
Guidelines
- Cannot be added on the top of the page
- Do not add physical adresses
- You can use it to display social network links
- When the button links to an email address, do not put the email address as the button's label. Instead put the team name or a description of the purpose of the email address.
- Character limits:
- 75 characters for the title (
h3) - 280 characters for the paragraph (
p) - 45 characters for each button name (
a.button)
- 75 characters for the title (
- Image dimensions:
- 2560x750 (resolution)
- JPG and WEBP (format)
HTML structure
Overall HTML view of a contact box component:
div[data-image].contact-box
div.content-box
h3pdiv.button-box
a.button (one or more)Presets
Contact box presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
| Two buttons, Three buttons, Four buttons | To be used depending on the number of contacts available. |
| Four buttons, two columns | If you have four buttons and you need additional width to feature each button name use this preset. |
Presets are ready to use HTML structures.
Variations
Contact box variations:
| Variation | Description |
|---|---|
| Two buttons, Three buttons, Four buttons | These snippets are composed of a title, a description and a buttons area which, depending on the number of contacts available, will grow. |
Modifiers
Contact box classes:
| Class | Description |
|---|---|
-two-columns, -three-columns, -four-columns | Changes the width and the number of buttons placed side by side in one row |
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The contact box component cannot be embedded inside other component.
main (HTML file)
div.contact-boxNesting
The contact box component cannot be used as a container of other components and/or elements.
main (HTML file)
div.contact-box