Components
Contact us box
Contact us panels are used in the right-hand column and should always appear first in the column.
Check existing contact panels before creating new ones in Ektron to avoid duplicating existing content.
Important If your site is in Ektron please use the Contact Us Box content module rather than copying and pasting this code. See 'Creating Contact us content modules' to learn how to do this.
Default contact us box
<div class="contact-us">
<h2>Contact us</h2>
<h3>Bryan Day</h3>
<h4>Web Developer</h4>
<p>tel: <a href="tel:+44-1865-484460">+44 (0)1865 484460</a><br />
fax: +44 (0)1865 484460<br />
<a href="mailto:bryan.day@brookes.ac.uk">bryan.day@brookes.ac.uk</a></p>
</div>- The first heading should be a
<h2>and use sentence case, eg 'Contact us' NOT 'CONTACT US' or 'Contact Us'. This allows us flexibility to change our styling in the future without having to re-edit all the content blocks. - If there is a fax AND phone number add 'tel and 'fax' before number. If there is just a phone number leave out 'tel'.
- 2nd heading should be a
<h3>. - If there is a job title this should be a
<h4>. - Always add +44 (0) before number for international users.
- Phone numbers can be made into a link by using tel: before the number. For example, tel:+441865741111 (or with separators: tel:+44-1865-741111) for the number +44 (0)1865 741111.
- Text after heading should be a paragraph
<p>with a closing</p>after, new line should use a<br />. - Email addresses should be a link using a mailto: before the email address.
The use of background colours has now been deprecated, these will be converted to borders.
Border colour classes available:
bluegreenpurpleredpinkredaquagoldlimeyellow
Ensure you use semantic html. Do not use a <h1>. Use proper headings, not bold text for headings. Use lists correctly, not breaks or new lines.
For users with visual impairments, the use of background colours has now been deprecated. Background colours should not be used.
Contact us box with different border colours
<div class="aqua contact-us">
<h2>Contact us</h2>
<h3>Bryan Day</h3>
<h4>Web Developer</h4>
<p>tel: <a href="tel:+44-1865-484460">+44 (0)1865 484460</a><br />
fax: +44 (0)1865 484460<br />
<a href="mailto:bryan.day@brookes.ac.uk">bryan.day@brookes.ac.uk</a></p>
</div>- The first heading should be a
<h2>and use sentence case, eg 'Contact us' NOT 'CONTACT US' or 'Contact Us'. This allows us flexibility to change our styling in the future without having to re-edit all the content blocks. - If there is a fax AND phone number add 'tel and 'fax' before number. If there is just a phone number leave out 'tel'.
- 2nd heading should be a
<h3>. - If there is a job title this should be a
<h4>. - Always add +44 (0) before number for international users.
- Phone numbers can be made into a link by using tel: before the number. For example, tel:+441865741111 (or with separators: tel:+44-1865-741111) for the number +44 (0)1865 741111.
- Text after heading should be a paragraph
<p>with a closing</p>after, new line should use a<br />. - Email addresses should be a link using a mailto: before the email address.
The use of background colours has now been deprecated, these will be converted to borders.
Border colour classes available:
bluegreenpurpleredpinkredaquagoldlimeyellow
Ensure you use semantic html. Do not use a <h1>. Use proper headings, not bold text for headings. Use lists correctly, not breaks or new lines.
For users with visual impairments, the use of background colours has now been deprecated. Background colours should not be used.
Contact us box with icons
Updated
<div class="purple contact-us">
<h2>Contact us</h2>
<h3>Bryan Day</h3>
<h4>Web Developer</h4>
<p><span class="fa fa-phone"></span> <a href="tel:+44-1865-484460">+44 (0)1865 484460</a><br />
<span class="fa fa-paper-plane"></span> <a href="mailto:bryan.day@brookes.ac.uk">bryan.day@brookes.ac.uk</a></p>
</div>- The first heading should be a
<h2>and use sentence case, eg 'Contact us' NOT 'CONTACT US' or 'Contact Us'. This allows us flexibility to change our styling in the future without having to re-edit all the content blocks. - If there is a fax AND phone number add 'tel and 'fax' before number. If there is just a phone number leave out 'tel'.
- 2nd heading should be a
<h3>. - If there is a job title this should be a
<h4>. - Always add +44 (0) before number for international users.
- Phone numbers can be made into a link by using tel: before the number. For example, tel:+441865741111 (or with separators: tel:+44-1865-741111) for the number +44 (0)1865 741111.
- Text after heading should be a paragraph
<p>with a closing</p>after, new line should use a<br />. - Email addresses should be a link using a mailto: before the email address.
The use of background colours has now been deprecated, these will be converted to borders.
Border colour classes available:
bluegreenpurpleredpinkredaquagoldlimeyellow
Ensure you use semantic html. Do not use a <h1>. Use proper headings, not bold text for headings. Use lists correctly, not breaks or new lines.
For users with visual impairments, the use of background colours has now been deprecated. Background colours should not be used.
Changelog
| Added | Updates | Current version | Accessibility | Status |
|---|---|---|---|---|
| 10 August 2016 | 19 February 2018 | 1.1.0 | Accessible | Current |