• Organism
  • CORE COMPONENT
  • Taxonomic name: O-CALL-US-PANEL
  • Added on: v3.0.0 (15/09/17)
  • Updated on: v5.0.0 (05/10/20)

Call us panel

Call us panels display up to three telephone numbers with supporting information within an individual section stripe.

Design and usage

When multiple numbers are to be displayed, the centrally aligned version should be used when both contact numbers relate to the same topic (eg, a travel insurance call from the UK and the same number's international equivalent), with the left-aligned version used to display alternative topics (eg, different branches or numbers for alternative days/opening times).

  • Call us panels should used on light accent colours only.
  • Centre-aligned call us panels can contain one or two numbers, and have shared supporting information.
  • Left aligned call us panels can contain two or three numbers, and can have either shared or individual supporting information.
  • Single number panels should be restricted to a maximum width of 6 columns at tablet and 9 columns at desktop to maintain readability of line lengths. Two number panels should be restricted to 9 columns at desktop only. All small print should be restricted to a maximum of 6 cols at tablet and 9 cols at desktop.
  • Call us panels must not be used on dark accent colours.

Minimum / maximum content

call us panel min/max content exmaple

All call us panels should contain:

  • Panel title
  • Title / identifier for telephone number
  • Telephone number
  • Opening times
  • Legal disclaimer / supporting information

Optional content includes:

  • Panel subtitle
  • Supporting link and description
  • Address
  • Email
  • Additional Information
  • Telephone number sub text

Examples

Call us panel single - one item

Interactive example

Code example

<div class="o-call-us-panel o-call-us-panel--one [ Modifiers ]" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
	<h2 class="a-heading a-heading--1 o-call-us-panel__heading">...</h2>
	<p class="o-call-us-panel__sub-heading">...</p>
	<div class="o-call-us-panel-entries">
		<div class="o-call-us-panel-entry">
			<h3 class="a-heading a-heading--3 a-heading--semibold o-call-us-panel-entry__title">...</h3>
			<p class="a-heading a-heading--2 a-heading--semibold o-call-us-panel-entry__number"><a href="..." itemprop="telephone" content="...">...</a></p>
		</div>
	</div>
	<p class="o-call-us-panel__opening-day" itemprop="hoursAvailable" itemscope="" itemtype="https://schema.org/OpeningHoursSpecification">
		<meta itemprop="dayOfWeek" content="..." />
		<span>...</span>
		<meta itemprop="opens" content="..." />
		<meta itemprop="closes" content="..." />
		...
	</p>
	...
	<p class="o-call-us-panel__link">Link description: <a href="...">...</a></p>
	<p class="o-call-us-panel__small-print"><small>...</small></p>
</div>

Call us panel double - two items, shared small print

Interactive example

Code example

<div class="o-call-us-panel o-call-us-panel--left o-call-us-panel--two l-max [ Modifiers ]">
	<h2 class="a-heading a-heading--1 o-call-us-panel__heading">...</h2>
	<p class="o-call-us-panel__sub-heading">...</p>
	<div class="o-call-us-panel-entries">
		<div class="o-call-us-panel-entry" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
			<h3 class="a-heading a-heading--3 a-heading--semibold o-call-us-panel-entry__title">...</h3>
			<p class="a-heading a-heading--2 a-heading--semibold o-call-us-panel-entry__number"><a href="..." itemprop="telephone" content="...">...</a></p>
			<p class="o-call-us-panel__opening-day" itemprop="hoursAvailable" itemscope="" itemtype="https://schema.org/OpeningHoursSpecification">
				<meta itemprop="dayOfWeek" content="..." />
				<span>...</span>
				<meta itemprop="opens" content="..." />
				<meta itemprop="closes" content="..." />
				...
			</p>
			<p class="o-call-us-panel__link">Link description: <a href="...">...</a></p>
		</div>
		<div class="o-call-us-panel-entry" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
				...
		</div>
	</div>
	<p class="o-call-us-panel__small-print l-max l-max--left [ Modifiers ]"><small>...</small></p>
</div>

Call us panel triple - three items, shared small print

Interactive example

Code example

Standard content
<div class="o-call-us-panel o-call-us-panel--left o-call-us-panel--three l-max l-max--left [ Modifiers ]">
	<h2 class="a-heading a-heading--1 o-call-us-panel__heading">...</h2>
	<p class="o-call-us-panel__sub-heading">...</p>
	<div class="o-call-us-panel-entries">
		<div class="o-call-us-panel-entry" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
			<h3 class="a-heading a-heading--3 a-heading--semibold o-call-us-panel-entry__title">...</h3>
			<p class="a-heading a-heading--2 a-heading--semibold o-call-us-panel-entry__number"><a href="..." itemprop="telephone" content="...">...</a></p>
			<p class="o-call-us-panel__opening-day" itemprop="hoursAvailable" itemscope="" itemtype="https://schema.org/OpeningHoursSpecification">
				<meta itemprop="dayOfWeek" content="..." />
				<span>...</span>
				<meta itemprop="opens" content="..." />
				<meta itemprop="closes" content="..." />
				...
			</p>
			<p class="o-call-us-panel__link">Link description: <a href="...">...</a></p>
		</div>
		<div class="o-call-us-panel-entry" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
				...
		</div>
		<div class="o-call-us-panel-entry" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
				...
		</div>
	</div>
	<p class="o-call-us-panel__small-print l-max l-max--left [ Modifiers ]"><small>...</small></p>
</div>
Maxium content
<div class="o-call-us-panel o-call-us-panel--left o-call-us-panel--three l-max l-max--left [ Modifiers ]">
	<h2 class="a-heading a-heading--1 o-call-us-panel__heading">...</h2>
	<p class="o-call-us-panel__sub-heading">...</p>
	<div class="o-call-us-panel-entries">
		<div class="o-call-us-panel-entry" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
			<h3 class="a-heading a-heading--3 a-heading--semibold o-call-us-panel-entry__title">...</h3>
			<p class="a-heading a-heading--2 a-heading--semibold o-call-us-panel-entry__number">
				<a href="..." itemprop="telephone" content="...">...</a><small>...</small>
			</p>
			<p class="a-heading a-heading--2 a-heading--semibold o-call-us-panel-entry__number">
				<a href="..." itemprop="telephone" content="...">...</a><small>...</small>
			</p>
			<p class="o-call-us-panel__opening-day" itemprop="hoursAvailable" itemscope="" itemtype="https://schema.org/OpeningHoursSpecification">
				<meta itemprop="dayOfWeek" content="..." />
				<span>...</span>
				<meta itemprop="opens" content="..." />
				<meta itemprop="closes" content="..." />
				...
			</p>
			<p class="o-call-us-panel__address">
				<span class="o-call-us-panel-entry__sub-heading">Address</span>
				<span itemprop="address" itemscope="" itemtype="https://schema.org/PostalAddress" />
					<span itemprop="name">...</span>
					<span itemprop="streetAddress">...</span>
					<span itemprop="addressLocality">...</span>
					<span itemprop="postalCode">...</span>
				</span>
			</p>
			<p class="o-call-us-panel__email">
				<span class="o-call-us-panel-entry__sub-heading">Email</span>
				<a href="mailto:[email protected]" itemprop="email">[email protected]</a>
			</p>
			<p class="o-call-us-panel__link">Link description: <a href="...">...</a></p>
			<p class="o-call-us-panel__additional-text">.../p>
		</div>
		<div class="o-call-us-panel-entry" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
				...
		</div>
		<div class="o-call-us-panel-entry" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
				...
		</div>
	</div>
	<p class="o-call-us-panel__small-print l-max l-max--left [ Modifiers ]"><small>...</small></p>
</div>

Call us panel: Narrow column variant.

Left aligned content at desktop by default, reverting to selected styling at smaller screen sizes.

Interactive example

Code example

<div class="o-call-us-panel o-call-us-panel--narrow o-call-us-panel--one [ Modifiers ]" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
	<h2 class="a-heading a-heading--1 o-call-us-panel__heading">...</h2>
	<p class="o-call-us-panel__sub-heading">...</p>
	<div class="o-call-us-panel-entries">
		<div class="o-call-us-panel-entry">
			<h3 class="a-heading a-heading--3 a-heading--semibold o-call-us-panel-entry__title">...</h3>
			<p class="a-heading a-heading--2 a-heading--semibold o-call-us-panel-entry__number"><a href="..." itemprop="telephone" content="...">...</a></p>
		</div>
	</div>
	<p class="o-call-us-panel__opening-day" itemprop="hoursAvailable" itemscope="" itemtype="https://schema.org/OpeningHoursSpecification">
		<meta itemprop="dayOfWeek" content="..." />
		<span>...</span>
		<meta itemprop="opens" content="..." />
		<meta itemprop="closes" content="..." />
		...
	</p>
	...
	<p class="o-call-us-panel__link">Link description: <a href="...">...</a></p>
	<p class="o-call-us-panel__small-print"><small>...</small></p>
</div>

Development and test

Notes for developers

  • Call us panels should used on light accent colours only.
  • Centre-aligned call us panels can contain one or two numbers, and have shared supporting information.
  • Left aligned call us panels can contain two or three numbers, and can have either shared or individual supporting information.
  • Width restrictions for single and double panels and for shared small print can be achieved through use of max-width columns; see maximum width container documentation for details.

Be sure to check correct usage with user experience team before preceding, and ensure that minimum content is included.

Telephone format and schema content

Telephone numbers used as html links should contain an anchor tag marked up as href="tel:00000-000000", ie, with dashes instead of spaces and no preceding space between the tel: and the actual number.

Schema should be included to help define the content for search engines and the like - please carefully check the code examples below to ensure the correct properties are being placed on the correct elements. If in doubt, please refer to the schema.org website for reference and use Google's Structured data testing tool to check usage application.

An example to show the opening hours for a range of days would be:

<p class="o-call-us-panel__opening-day" itemprop="hoursAvailable" itemscope="" itemtype="https://schema.org/OpeningHoursSpecification">
	<meta itemprop="dayOfWeek" content="Monday, Tuesday, Wednesday, Thursday, Friday" />
	<span>Monday to Friday</span>
	<meta itemprop="opens" content="8.00am" />
	<meta itemprop="closes" content="8.00pm" />
	8.00am - 8.00pm
</p>

Similarly, a single bank holiday would be:

<p class="o-call-us-panel__opening-day" itemprop="hoursAvailable" itemscope="" itemtype="https://schema.org/OpeningHoursSpecification">
	<meta itemprop="dayOfWeek" content="Public Holiday" />
	<span>Bank Holidays</span>
	<meta itemprop="opens" content="10.00am" />
	<meta itemprop="closes" content="4.00pm" />
	10.00am - 4.00pm
</p>

Lastly, opening hours for 7 days a week, 24 hours a day could be:

<p class="o-call-us-panel__opening-day" itemprop="hoursAvailable" itemscope="" itemtype="https://schema.org/OpeningHoursSpecification">
	<meta itemprop="dayOfWeek" content="Mo-Su" />
	<meta itemprop="opens" content="00.00am" />
	<meta itemprop="closes" content="00.00pm" />
	Lines are open 24 hours a day
</p>

Notes for testers

Be sure to pay extra attention to breakpoints and screen sizes given the amount of content that the organism could contain; this shouldn't be an issue, but targeted checks to ensure that resizing doesn't compromise content layout are essential.

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class Outcome Required Applied to Comments
.o-call-us-panel Base style for call us panel organism Yes div  
o-call-us-panel--left Modifier to left align the call us panel content   .o-call-us-panel  
.o-call-us-panel--narrow Modifier for narrow panel use   .o-call-us-panel Used in conjunction with a one, two or three contact number modifier
.o-call-us-panel--one Modifier for instance with a single contact number Yes .o-call-us-panel One of .o-call-us-panel--one, .o-call-us-panel--two or .o-call-us-panel--three required
.o-call-us-panel--two Modifier for instance with two contact numbers Yes .o-call-us-panel One of .o-call-us-panel--one, .o-call-us-panel--two or .o-call-us-panel--three required
.o-call-us-panel--three Modifier for instance with three contact numbers Yes .o-call-us-panel One of .o-call-us-panel--one, .o-call-us-panel--two or .o-call-us-panel--three required
.o-call-us-panel__heading Style for the call us panel title Yes .o-call-us-panel > h2  
.o-call-us-panel__sub-heading Style for the optional call us panel sub-title   .o-call-us-panel > p > span  
.o-call-us-panel-entries Container for the call us panel entry sets Yes .o-call-us-panel > div  
.o-call-us-panel-entry Container for each set of contact details Yes o-call-us-panel-entries > div  
.o-call-us-panel-entry__title Style for the contact telephone number title Yes .o-call-us-panel-entry > h3  
.o-call-us-panel-entry__number small Style applied to a small element inside a contact number telephone number title   .o-call-us-panel-entry__number small  
.o-call-us-panel-entry__sub-heading Style for other contact information headings (address, email, generic)   .o-call-us-panel-entry > p > span  
.o-call-us-panel-entry__number Style for the contact telephone number Yes .o-call-us-panel-entry > p  
.o-call-us-panel__opening-day Style for the contact opening times Yes .o-call-us-panel-entry > p  
.o-call-us-panel__address Style for the contact address   .o-call-us-panel-entry > p  
o-call-us-panel__link Style for an optional additional link to support the contact details   .o-call-us-panel-entry > p  
.o-call-us-panel__email Style for the contact email   .o-call-us-panel-entry > p  
.o-call-us-panel__additional-text Style for generic text   .o-call-us-panel-entry > p  
o-call-us-panel__small-print Style for any support information or legal disclaimers to accompany the contact telephone number Yes .o-call-us-panel-entry > p  

Component releases

  • Added on: v3.0.0 (15/09/17)
  • Updated on: v5.0.0 (05/10/20)

Latest update:

  • updated: Following WCAG 2.5.5 guidelines, telephone number links have an increased target size to improve accessibility on touch devices.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team