• Organism
  • CORE COMPONENT
  • Taxonomic name: O-HELP-UTILITY-SECTION
  • Extension: ADDITIONAL-HELP
  • Added on: v4.9.0 (24/05/19)
  • Updated on: v5.3.0 (26/01/21)

Help utility section

The utility help section permits the display of contact information for project teams at a glance. It works by containing a call us panel and an FAQ panel in a pair of matched show/hide areas.

Design and usage

The layout can be either side-by-side or stacked, with column widths and ordering variable depending on the number of phone numbers required (max three) or a team's other requirements.

Structure

  • Width of component is full width, aligned to the grid (12 cols desktop, 8 cols tablet, 4 cols mobile).

  • Content width ratios can vary depending on what content requires prioritisation:

    • Desktop: 50:50 (6 cols X 6 cols), 66:33 (8 cols X 4 cols), 33:66 (4 cols X 8 cols)
    • Tablet: 50:50 (4 cols X 4 cols), full width (stacked)
    • Mobile: Full width (stacked).
  • Ordering of 'Call us' and 'FAQs' segments can be changed depending on requirements.
  • Show/hide applied functionality for each segment working independently of the other.
  • Contact details formatting from existing call us panel pattern (for up to two numbers only); can support maximum detail version including (for each number): opening times, address, email address, web link, additional information.
  • Numbers only: When FAQs are not required, format adjusts to single number format from standard call us panel pattern (contained within show/hide).
  • FAQ: Advised to keep these within a sensible length; also, the number of FAQs should be kept to a minimum where possible - this component is intended to be an at-a-glance device for help/important information only.
  • FAQ: If the FAQ part spans either 8 cols or full width, don't forget that the copy must only run across 7 for readability reasons.

Labels

  • Title: "Do you need some help?" (Can be changed depending on project team requirements).
  • As per standard Call Us and FAQ panels.
  • Please note: ordering of segments is flexible based on project team requirements.

Non-JS requirements

  • As per standard Call Us panel, FAQ panel and show/hide components.

Positioning

  • Component title: Always left aligned Sans Source Pro semi-bold 16px #5C596D.
  • Ordering: Individual segment ordering can be changed depending on project requirements.
  • Positioning is centred within a page (all viewports – desktop, tablet and mobile).
  • Placement: Should always appear as last section before the footer.

Examples

Standard 50/50 variant

Interactive example

Code example

<div class="o-help-utility-section t-accent-light t-accent-light--1">
	<div class="l-content-container">
		<h2 class="a-heading a-heading--2 a-heading--semibold">Do you need some help?</h2>
		<div class="l-columns l-columns--1-small l-columns--2-medium l-columns--2-large">
			<div class="l-columns__column">
				<div class="m-showhide o-help-utility-section__showhide" data-module="m-showhide" data-module-load="true">
					<h3 class="a-heading a-heading--2 a-heading--light m-showhide__heading">Call us</h3>
					<div class="m-showhide__content">
						<div class="o-call-us-panel o-call-us-panel--left o-call-us-panel--one" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
						...
						</div>
					</div>
				</div>
			</div>
			<div class="l-columns__column">
				<div class="m-showhide o-help-utility-section__showhide" data-module="m-showhide" data-module-load="true">
					<h3 class="a-heading a-heading--2 a-heading--light m-showhide__heading">FAQs</h3>
					<div class="m-showhide__content">
						<div class="o-faq-panel o-faq-panel--utility" data-module="o-faq-panel">
						...
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

66/33 variant on lightest blue

Interactive example

Code example

<div class="o-help-utility-section t-accent-light t-accent-light--4">
	<div class="l-content-container">
		<h2 class="a-heading a-heading--2 a-heading--semibold">Do you need some help?</h2>
		<div class="l-columns l-columns--66-33-large l-columns--1-small l-columns--1-medium l-columns--2-large">
			<div class="l-columns__column">
				<div class="m-showhide o-help-utility-section__showhide" data-module="m-showhide" data-module-load="true">
					<h3 class="a-heading a-heading--2 a-heading--light m-showhide__heading">Call us</h3>
					<div class="m-showhide__content">
						<div class="o-call-us-panel o-call-us-panel--left o-call-us-panel--one" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
						...
						</div>
					</div>
				</div>
			</div>
			<div class="l-columns__column">
				<div class="m-showhide o-help-utility-section__showhide" data-module="m-showhide" data-module-load="true">
					<h3 class="a-heading a-heading--2 a-heading--light m-showhide__heading">FAQs</h3>
					<div class="m-showhide__content">
						<div class="o-faq-panel o-faq-panel--utility" data-module="o-faq-panel">
						...
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Full-width stacked variant on light grey, FAQs first

Interactive example

Code example

<div class="o-help-utility-section t-accent-light t-accent-light--2">
	<div class="l-content-container">
		<h2 class="a-heading a-heading--2 a-heading--semibold">Do you need some help?</h2>
		<div class="l-columns l-columns--1-small l-columns--1-medium l-columns--1-large">
			<div class="l-columns__column">
				<div class="m-showhide o-help-utility-section__showhide" data-module="m-showhide" data-module-load="true">
					<h3 class="a-heading a-heading--2 a-heading--light m-showhide__heading">FAQs</h3>
					<div class="m-showhide__content">
						<div class="o-faq-panel o-faq-panel--utility" data-module="o-faq-panel">
						...
						</div>
					</div>
				</div>
			</div>
			<div class="l-columns__column">
				<div class="m-showhide o-help-utility-section__showhide" data-module="m-showhide" data-module-load="true">
					<h3 class="a-heading a-heading--2 a-heading--light m-showhide__heading">Call us</h3>
					<div class="m-showhide__content">
						<div class="o-call-us-panel o-call-us-panel--left o-call-us-panel--one" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
						...
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Development and test

Notes for developers

  • Help utility section should used on white, lightest blue or light grey backgrounds.
  • Call Us and FAQ panel order can be reversed depending on project requirements.
  • Call us panel formatting should follow standard Call us panel - see Call us panel for reference; be sure to include all appropriate meta data when including the Call us panel detail.
  • FAQ panel formatting should follow FAQ narrow variant across all breakpoints - see Frequently asked questions panel - right hand side variant for reference; be aware, however, that the target div is not required as there is no need for the content to be moved by the JavaScript for this FAQ panel variant.
  • Ensure the correct level headings are used for the content placed inside the show/hide areas

Extension component

This component forms part of the 'additional-help' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:

<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/additional-help.css" rel="stylesheet" />

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.

Be sure to check that each showide functions independently, that IDs are unique on each of the FAQ panel questions and that the Call Us and FAQ panels function as per their equivalent stand-alone versions.

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-help-utility-section Base style for help utility section organism Yes div  
.o-help-utility-section__showhide Base style for help utility section showhide sections Yes .o-help-utility-section .m-showhide  
.o-faq-panel--utility Modifier for the FAQ panel component with the help utility section Yes .o-help-utility-section .o-faq-panel  

Component releases

  • Added on: v4.9.0 (24/05/19)
  • Updated on: v5.3.0 (26/01/21)

Latest update:

  • updated: It is now recommended that the data attribute data-module-load="true" is added alongside data-module="m-showhide" in order to force loading of the JavaScript on page load instead of it being lazy loaded. This helps mitigate issues when anchoring to elements within the page and reduces large amounts of page reflow as users interact with the page.

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