Introduction
This set of styles are based on Bootstrap v5 and the Westfield Health brand guide.
Make it better
This is a living thing which changes and grows along with our digital services. If there is anything that could be improved, please contact us.
Colours
The theme colours are a combination of the Westfield Health brand and Bootstrap defaults.
SCSS variables are provided e.g. $healthy-orange for use in style sheets.
| Colour | Swatch | HEX | RGB | Variable name / class name |
|---|---|---|---|---|
| Brand colours | ||||
Healthy Orange |
#e94e1b | 233,78,27 | $healthy-orange |
|
Confident Grey |
#5d686e | 93,104,110 | $confident-grey |
|
Open Blue |
#89c7cf | 137,199,207 | $open-blue |
|
Warm Orange |
#f38b00 | 243,139,0 | $warm-orange |
|
Refreshing Green |
#a5c27e | 168,194,126 | $refreshing-green |
|
Grounded Purple |
#94a4c6 | 148,163,198 | $grounded-purple |
|
Responsible Grey |
#8d979e | 141,151,158 | $responsible-grey |
|
Background Grey |
#e6ebee | 230,235,238 | $background-grey |
|
| Brand colour accents | ||||
Open Blue (40%) |
#d4e8eb | 212,232,235 | $open-blue-40 |
|
Warm Orange (40%) |
#f4d2a0 | 244,210,160 | $warm-orange-40 |
|
Refreshing Green (40%) |
#dbe7cb | 219,231,203 | $refreshing-green-40 |
|
Grounded Purple (40%) |
#d5dae7 | 213,218,231 | $grounded-purple-40 |
|
Confident Grey (40%) |
#afb3b6 | 175,179,182 | $confident-grey-40 |
|
| Bootstrap defaults | ||||
Primary |
#d34317 | 211,67,23 | $primary$healthy-orange-WCAG-white |
|
Secondary |
#5d686e | 93,104,110 | $secondary$confident-grey |
|
Success |
#198754 | 25,135,84 | $success$green |
|
Info |
#89c7cf | 137,199,207 | $info$open-blue |
|
Warning |
#f38b00 | 243,139,0 | $warning$warm-orange |
|
Danger |
#dc3545 | 220,53,69 | $danger$red |
|
Light |
#e6ebee | 230,235,238 | $light$background-grey |
|
Dark |
#5d686e | 93,104,110 | $dark$confident-grey |
|
| WCAG colours (minimum contrast ratio).
Naming format: A useful tool for checking minimum contrast ratios: Color Contrast Analyzer |
||||
healthy-orange-WCAG-white(foreground/text colour) |
#d34317 | 211,67,23 | $healthy-orange-WCAG-white |
|
healthy-orange-WCAG-open-blue-40(foreground/text colour) |
#b33b14 | 179,59,20 | $healthy-orange-WCAG-open-blue-40 |
|
healthy-orange-WCAG-background-grey(foreground/text colour) |
#bc3c15 | 188,60,21 | $healthy-orange-WCAG-background-grey |
|
healthy-orange-WCAG-gray-100(foreground/text colour) |
#c84118 | 200,65,24 | $healthy-orange-WCAG-gray-100 |
|
confident-grey-WCAG-open-blue(foreground/text colour) |
#454b4f | 69,75,79 | $confident-grey-WCAG-open-blue |
|
confident-grey-WCAG-grounded-purple(foreground/text colour) |
#383838 | 56,56,56 | $confident-grey-WCAG-grounded-purple |
|
Typography
The default font is Co Text Light with the following attributes: font-style:normal; font-weight:normal;. For headings and bold text the Co Text Regular with the following attributes: font-style:normal; font-weight:normal;
The fonts weights should always be set to normal and not given a numeric value as this causes problems with the rendered font. To bold Co Text Light use the <strong> element.
Headings
Every page should have at least one <h1> title. This is usually in the page banner section. All HTML headings, <h1> through <h6>, are available. Header levels should appear on the page in order of size i.e. <h1>, <h2>, <h3>.
Westfield Health heading
Westfield Health heading
Westfield Health heading
Westfield Health heading
Westfield Health heading
Westfield Health heading
<h1>Westfield Health heading</h1><h2>Westfield Health heading</h2><h3>Westfield Health heading</h3><h4>Westfield Health heading</h4><h5>Westfield Health heading</h5><h6>Westfield Health heading</h6>
h1 through h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
<p class="h1">Westfield Health heading</p>
Display Headings
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading – a larger, slightly more opinionated heading style.
Display 1
Display 2
Display 3
Display 4
<p class="display-1">Westfield Health heading</p><p class="display-2">Westfield Health heading</p><p class="display-3">Westfield Health heading</p><p class="display-4">Westfield Health heading</p>
Lead
Make a paragraph stand out by adding lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
Inline text elements
Styling for common inline HTML5 elements.
You can use the mark tag to <mark>highlight</mark> text.
<del>This line of text is meant to be treated as deleted text.</del>
<s>This line of text is meant to be treated as no longer accurate.</s>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
<u>This line of text will render as underlined</u>
<small>This line of text is meant to be treated as fine print.</small>
<strong>This line rendered as bold text.</strong>
<em>This line rendered as italicized text.</em>
CSS classes mark and small classes are also available to apply the same styles as <mark> and <small> while avoiding any unwanted semantic implications that the tags would bring.
Blockquotes
For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<blockquote class="blockquote"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></blockquote>
Lists
Tick/cross lists
Below are some custom list styles.
- Lorem ipsum
- Consectetur adipisicing
- Dolor sit amet
<ul class="list-tick">
- Lorem ipsum
- Consectetur adipisicing
- Dolor sit amet
<ul class="list-cross">
Included/excluded lists
Lists styles used when referencing items/plan benefits.
- Lorem ipsum
- Consectetur adipisicing
- Dolor sit amet
<ul class="list-included">
- Lorem ipsum
- Consectetur adipisicing
- Dolor sit amet
<ul class="list-excluded">
Ordered lists
Ordered list styles using custom background colours
- Lorem ipsum
- Consectetur adipisicing
- Dolor sit amet
<ol class="list-circle text-healthy-orange">
- Lorem ipsum
- Consectetur adipisicing
- Dolor sit amet
<ol class="list-circle text-open-blue">
The following colour classes are available: text-healthy-orange, text-confident-grey, text-open-blue, text-warm-orange, text-refreshing-green & text-grounded-purple
Unstyled lists
Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
<ul class="list-unstyled">
Inline lists
Remove a list’s bullets and apply some light margin with a combination of two classes, list-inline and list-inline-item.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline"><li class="list-inline-item">Lorem ipsum</li><li class="list-inline-item">Phasellus iaculis</li><li class="list-inline-item">Nulla volutpat</li></ul>Center on page/section
Use a left aligned list that is centered on the page/section
Lorem ipsum dolor sit, amet consectetur adipisicing elit
- lorem ipsum dolor sit amet
- consectetur adipisicing elit
- quo tempora praesentium culpa
- natus facere commodi molestias
- facere at dignissimos maxime
- expedita assumenda culpa
- veniam enim! Sit quos illo fugit sunt
<h3 class="text-center">Lorem ipsum dolor sit, amet consectetur adipisicing elit</h3><div class="d-flex justify-content-center"><ul><li>lorem ipsum dolor sit amet</li><li>consectetur adipisicing elit</li><li>quo tempora praesentium culpa</li><li>natus facere commodi molestias</li><li>facere at dignissimos maxime</li><li>expedita assumenda culpa</li><li>veniam enim! Sit quos illo fugit sunt</li></ul></div>Buttons & links
Button styles
Allowed button styles
<button class="btn btn-primary">Primary</button><button class="btn btn-outline-primary">Primary outline</button><button class="btn btn-secondary">Secondary</button><button class="btn btn-outline-secondary">Secondary outline</button>
Prohibited button styles
Primary button use
The primary button should always be used alone. If a second button is required this should be a secondary or outline.
Correct
Incorrect
Call to actions (CTAs)
Call to actions (CTAs) should be the primary orange button with a right “action” arrow.
<button class="btn btn-primary btn-arrow">Primary CTA</button>
Each section should only have one CTA which should be the desired action/result for a user on that specific section or page. A page can contain more than one CTA as long as they are not contained within the same section.
For example a page banner may have a CTA which is then repeated lower down once the user has read the content of the page.
If a section presents the user with two actions as in Save or Cancel then the main primary/desired action should be the primary CTA as in the example below.
There is also a btn-back-arrow button style available for use when navigation between pages is required.
<button class="btn btn-secondary btn-back-arrow">Back</button>
<button class="btn btn-primary btn-arrow">Next</button>
Links
To add emphasis to a link include the Fontawesome right chevron icon at the end of the link text .
<a>Link with emphasis<i class="fa-light fa-chevron-right ps-2"></i></a>
Icons
We use a combination of custom designed icons and the Fontawsome library for more genric icons.
Icons are *.svg files hosted in the Westfield Health WordPress theme. To use an icon copy the filename by clicking on the desired icon below.
Custom orange icons
<div class="max-width-100px"><div class="icon-circle bg-white"><img class="img-fluid" src="/wp-content/themes/wh-wordpress-theme/img/icons/23/orange/business-size.svg" alt="image alt text"></div></div>
Path to icons: https://www.westfieldhealth.com/wp-content/themes/wh-wordpress-theme/img/icons/23/orange/icon.svg
Icons are also available in the following theme colours…
Custom white icons
<div class="max-width-100px"><div class="icon-circle bg-secondary"><img class="img-fluid" src="/wp-content/themes/wh-wordpress-theme/img/icons/23/white/business-size.svg" alt="image alt text"></div></div>
Path to icons: https://www.westfieldhealth.com/wp-content/themes/wh-wordpress-theme/img/icons/23/white/icon.svg
Custom blue icons
<div class="max-width-100px"><div class="icon-circle bg-white"><img class="img-fluid" src="/wp-content/themes/wh-wordpress-theme/img/icons/23/blue/business-size.svg" alt="image alt text"></div></div>
Path to icons: https://www.westfieldhealth.com/wp-content/themes/wh-wordpress-theme/img/icons/23/blue/icon.svg
Custom purple icons
<div class="max-width-100px"><div class="icon-circle bg-white"><img class="img-fluid" src="/wp-content/themes/wh-wordpress-theme/img/icons/23/purple/business-size.svg" alt="image alt text"></div></div>
Path to icons: https://www.westfieldhealth.com/wp-content/themes/wh-wordpress-theme/img/icons/23/blue/icon.svg
Custom black icons
<div class="max-width-100px"><div class="icon-circle bg-white"><img class="img-fluid" src="/wp-content/themes/wh-wordpress-theme/img/icons/23/black/business-size.svg" alt="image alt text"></div></div>
Path to icons: https://www.westfieldhealth.com/wp-content/themes/wh-wordpress-theme/img/icons/23/black/icon.svg
Custom grey icons
<div class="max-width-100px"><div class="icon-circle bg-white"><img class="img-fluid" src="/wp-content/themes/wh-wordpress-theme/img/icons/23/grey/business-size.svg" alt="image alt text"></div></div>
Path to icons: https://www.westfieldhealth.com/wp-content/themes/wh-wordpress-theme/img/icons/23/grey/icon.svg
Fontawesome
We utilise the Fontawesome library for any generic icons such as the social media logos in the website footer. The footer icons use the stacking styling to be consistent with our custom icons.
<span class="fa-stack fa-3x"><i class="fas fa-circle fa-stack-2x text-secondary"></i><i class="fab fa-facebook-f fa-stack-1x fa-inverse text-white"></i></span>
Contact us
The contact us block appears at the bottom of pages where required.
Get in touch to find out more
<div id="contact-us" class="bg-open-blue"><div class="page-section text-center"><h2 class="text-confident-grey-WCAG-open-blue">Get in touch to find out more</h2><?php include(locate_template('page_section_contact-us_business_v3.php')); ?></div></div>
There are several variations of the contact block template based on the type of page you’re on:
page_section_contact-us_business_v3.phppage_section_contact-us_case-study_v2.phppage_section_contact-us_generic_v3.phppage_section_contact-us_giving-back_v3.phppage_section_contact-us_individual_v3.phppage_section_contact-us_individual-hcp_v3.phppage_section_contact-us_individual-phi_v3.phppage_section_contact-us_intermediaries_v3.php
Video embed
Embed video iframes in a responsive container that allows full width video to be displayed at any screen width.
This code can be used for both Vimeo and YouTube video embeds (examples are shown in the markup below).
<div class="responsive-iframe-container"><!-- Vimeo --><iframe title="video title" class="responsive-iframe" src="https://player.vimeo.com/video/####" width="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><!-- YouTube --><iframe title="video title" class="responsive-iframe" src="https://www.youtube.com/embed/####" width="100%" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>Icons in circles
Used to highlight key points in page content.
An example of this block can be seen here: /business
Lorem ipsum dolor sit amet
Eum corporis sint quos reprehenderit
Temporibus blanditiis illo dignissimos iusto
(Atque obcaecati alias optio)
Deserunt veniam alias sapiente sunt molestias
<div class="row d-flex justify-content-center"><div class="col-12 col-md"><div class="row d-flex align-items-center mb-4"><div class="col-3 col-md-12 mb-md-3"><div class="max-width-100px mx-auto"><div class="icon-circle bg-refreshing-green"><img class="img-fluid" src="../icon.svg" alt="image alt text"></div></div></div><div class="col-9 col-md-12"><h5 class="text-start text-md-center mb-0">Lorem ipsum dolor sit amet</h5></div></div></div></div>
Circle image & text
Used to break up content when there is a lot of text.
An example of this can be seen here: /business/our-solutions/mental-health-first-aid-courses
Lorem ipsum dolor sit amet consectetur adipisicing
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti, voluptatum amet quasi vel aliquam aperiam.
<div class="row d-flex align-items-center justify-content-center"><div class="col-12 col-sm-7 col-md-4 text-center"><img class="img-fluid mx-auto px-5 px-st-6 px-md-0 mb-4 mb-md-0" src="../image.jpg" alt="image alt text"></div><div class="col-12 col-md-6"><p class="lead"><strong>Lorem ipsum dolor sit amet consectetur adipisicing</strong></p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti, voluptatum amet quasi vel aliquam aperiam.</p></div></div>
This layout can also be used with the image on the right side:
Lorem ipsum dolor sit amet consectetur adipisicing
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti, voluptatum amet quasi vel aliquam aperiam.
<div class="row d-flex align-items-center justify-content-center"><div class="col-12 col-md-6 order-2 order-md-1"><p class="lead"><strong>Lorem ipsum dolor sit amet consectetur adipisicing</strong></p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti, voluptatum amet quasi vel aliquam aperiam.</p></div><div class="col-12 col-sm-7 col-md-4 order-1 order-md-2 text-center"><img class="img-fluid mx-auto px-5 px-st-6 px-md-0 mb-4 mb-md-0" src="../image.jpg" alt="image alt text"></div></div>
CTA card
Content block used for highlighting features.
Recommended display is is 3 column (col-xl-4). The tiles are stacked vertically for smaller screens. The ‘Content label’ is optional.
An example of this can be seen here: /help
<div class="row d-flex justify-content-center"><div class="cta-card position-relative col-12 col-xl-4 mb-3 mb-xl-4"><span class="content-tag-label-resource-card bg-open-blue shadow p-2"><p class="small text-black mb-0"><strong>Content label</strong></p></span><a class="text-decoration-none text-secondary" href="#" title="Card title"><div class="cta-card-outline shadow rounded bg-white d-flex align-items-start flex-column text-center text-sm-start h-100"><div class="d-block d-sm-flex flex-xl-column align-items-center h-100"><div class="cta-card-image lazy" data-src="/wp-content/uploads/____/__/____.jpg" style="background: no-repeat center / cover;"></div><div class="h-100 d-xl-flex flex-column align-items-end p-4"><h3 class="h4 text-secondary w-100">Lorem ipsum</h3><p class="text-secondary w-100">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi consequatur nesciunt velit quas, veritatis illo.</p><div class="cta-card-cta mx-auto mt-auto" title="Card title">Lorem ipsum</div></div></div></div></a></div></div>These cards can also be used in a horizontal format.
An example of this can be seen here: /help/your-wellbeing
<div class="row d-flex justify-content-center"><div class="cta-card cta-card-h col-12 mb-3 mb-xl-4"><span class="content-tag-label-resource-card bg-open-blue shadow p-2"><p class="small text-black mb-0"><strong>Content label</strong></p></span><a class="text-decoration-none text-secondary" href="#" title="Card title"><div class="cta-card-outline shadow rounded bg-white d-flex align-items-start flex-column text-center text-sm-start h-100"><div class="d-block d-sm-flex align-items-center h-100"><div class="cta-card-image lazy" data-src="/wp-content/uploads/____/__/____.jpg" style="background: no-repeat center / cover;"></div><div class="h-100 p-4"><h3 class="h4 text-secondary w-100">Lorem ipsum</h3><p class="text-secondary w-100">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi consequatur nesciunt velit quas, veritatis illo.</p><div class="cta-card-cta mx-auto mt-auto" title="Card title">Lorem ipsum</div></div></div></div></a></div></div>Blue icon tile
Content block used for highlighting features.
These tiles can be displayed as 2 column (col-xl-6), or 3 column (col-xl-4). The tiles are stacked vertically for smaller screens.
An example of this can be seen here: /business/our-solutions/business-health-insurance
Lorem ipsum dolor sit amet
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.
Primary CTA
Lorem ipsum dolor sit amet
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.
Primary CTA
Lorem ipsum dolor sit amet
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.
Primary CTA<div class="row d-flex justify-content-center"><div class="col-12 col-xl-4 mb-3 mb-xl-4"><div class="bg-white d-flex align-items-start flex-column text-center text-sm-start text-xl-center h-100 p-4"><div class="d-block d-sm-flex flex-xl-column align-items-center h-100"><img class="img-fluid max-width-100px me-0 me-sm-4 me-xl-0 mb-4 mb-sm-0 mb-xl-4" src="../icon.svg" alt="image alt text"><div class="h-100 d-xl-flex flex-column align-items-end"><h4 class="text-secondary w-100">Lorem ipsum dolor sit amet</h4><p class="text-secondary w-100">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.</p><a class="btn btn-primary btn-arrow pe-xl-5 mt-auto mx-auto" href="#" title="Primary CTA">Primary CTA</a></div></div></div></div></div>Ringed icon tile
Used for listing benefits.
Recommended 3 column (col-lg-4). The tiles are stacked vertically for smaller screens.
An example of this can be seen here: /business/your-business/corporate-wellbeing-solutions
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa quos dolorum ea accusantium minus ratione repudiandae, eos possimus mollitia. Similique a quidem incidunt quisquam.
Primary CTA
Lorem ipsum dolor sit amet
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.
Primary CTA<div class="row d-flex justify-content-center px-2"><div class="col-12 col-lg-4 mb-3 mb-lg-0"><div class="row h-100 bg-white border border-background-grey d-flex align-items-center align-items-lg-start flex-lg-column p-3 mx-md-0"><div class="col-12 col-sm-auto col-lg-12 rings open-blue mx-auto mb-2 mb-sm-0 mb-lg-4"><img class="img-fluid mb-0" src="../icon.svg" alt="image alt text"></div><div class="col-12 col-sm col-lg-12 text-center text-sm-start text-lg-center"><h4 class="mb-2">Lorem ipsum dolor sit amet</h4><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.</p><a class="btn btn-primary btn-arrow d-inline-block d-lg-none" href="#" title="Primary CTA">Primary CTA</a></div><div class="d-none d-lg-inline-block text-center mt-auto"><a class="btn btn-primary btn-arrow pe-xl-5" href="#" title="Primary CTA">Primary CTA</a></div></div></div></div>This layout can also be used with the icon on the left side.
Recommended 2 column (col-lg-6). The tiles are stacked vertically for smaller screens.
An example of this can be seen here: /business/our-solutions/health-cash-plans-for-employees
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa quos dolorum ea accusantium minus ratione repudiandae, eos possimus mollitia. Similique a quidem incidunt quisquam.
Link text
Lorem ipsum dolor sit amet
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.
Link text
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa quos dolorum ea accusantium minus ratione.
Link text<div class="row d-flex justify-content-center px-2"><div class="col-12 col-lg-6 mb-3 mb-lg-4"><div class="row h-100 bg-white border border-background-grey d-flex align-items-center p-3 mx-md-0"><div class="col-12 col-sm-auto rings open-blue mx-auto mb-2 mb-sm-0"><img class="img-fluid mb-0" src="../icon.svg" alt="image alt text"></div><div class="col-12 col-sm text-center text-sm-start"><h4 class="mb-2">Lorem ipsum dolor sit amet</h4><p class="mb-2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.</p><a href="#" title="Link text">Link text<i class="fa-light fa-chevron-right ps-2"></i></a></div></div></div></div>There is also a large icon option.
Recommended 3 column (col-lg-4). Icons revert to smaller size at -lg- breakpoint and the tiles are stacked vertically for smaller screens.
An example of this can be seen here: /about-us/giving-back/donations
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa quos dolorum ea accusantium minus ratione repudiandae, eos possimus mollitia. Similique a quidem incidunt quisquam.
Primary CTA
Lorem ipsum dolor sit amet
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.
Primary CTA<div class="row d-flex justify-content-center px-2"><div class="col-12 col-lg-4 mb-3 mb-lg-0"><div class="row h-100 bg-white border border-background-grey d-flex align-items-center align-items-lg-start flex-lg-column p-3 mx-md-0"><div class="col-12 col-sm-auto col-lg-12 rings lg open-blue mx-auto mb-2 mb-sm-0 mb-lg-4"><img class="img-fluid mb-0" src="../icon.svg" alt="image alt text"></div><div class="col-12 col-sm col-lg-12 text-center text-sm-start text-lg-center"><h4 class="mb-2">Lorem ipsum dolor sit amet</h4><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.</p><a class="btn btn-primary btn-arrow d-inline-block d-lg-none" href="#" title="Primary CTA">Primary CTA</a></div><div class="d-none d-lg-inline-block text-center mt-auto"><a class="btn btn-primary btn-arrow pe-xl-5" href="#" title="Primary CTA">Primary CTA</a></div></div></div></div>Challenge and solution
Used for showing challenge and solutions for different options.
This layout is stacked vertically for smaller screens.
An example of this can be seen here: /business/challenges/working-from-home-wellbeing-and-productivity
The Challenge
The Solution
Lorem ipsum dolor sit amet
The ChallengeLorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.
The SolutionLorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.
Lorem ipsum dolor sit amet
The ChallengeLorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.
The SolutionLorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.
Lorem ipsum dolor sit amet
The ChallengeLorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.
The SolutionLorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.
<div class="row d-none d-md-flex mt-4"><div class="col-3"> </div><div class="col-4 text-center"><strong>The Challenge</strong></div><div class="col-1"> </div><div class="col-4 text-center"><strong>The Solution</strong></div></div><div class="row mb-5"><div class="col-12 col-sm-3 d-flex align-items-center justify-content-center mb-2 mb-sm-0"><div><div class="rings open-blue mx-auto mb-2"><img class="img-fluid" src="../icon.svg" alt="image alt text"></div><h4 class="text-center mb-0">Lorem ipsum dolor sit amet</h4></div></div><div class="col-12 col-sm-4 d-block d-md-flex align-items-center bg-gray-100 p-3"><p class="mb-0"><span class="d-block d-md-none mb-2"><strong>The Challenge</strong></span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.</p></div><div class="col-1 d-none d-md-flex align-items-center"><p class="h2 w-100 text-center mb-0"><i class="text-primary fas fa-chevron-right"></i></p></div><div class="col-12 col-sm-5 col-md-4 d-block d-md-flex align-items-center bg-open-blue-40 p-3"><p class="mb-0"><span class="d-block d-md-none mb-2"><strong>The Solution</strong></span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum cum tenetur corrupti.</p></div></div>
Quote
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia aspernatur pariatur, distinctio officiis corrupti corporis aperiam. Soluta mollitia, dolor eos repellat atque blanditiis, illum minima perspiciatis architecto odit aliquam accusamus?
Lorem ipsum dolor,
Mollitia aspernatur pariatur distinctio
<div class="row"><div class="col-12 col-sm-auto text-center"><i class="d-inline-block fas fa-quote-left fa-4x text-primary mx-auto"></i></div><div class="col text-center px-0"><p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia aspernatur pariatur, distinctio officiis corrupti corporis aperiam. Soluta mollitia, dolor eos repellat atque blanditiis, illum minima perspiciatis architecto odit aliquam accusamus?</p></div><div class="col-12 col-sm-auto d-flex"><i class="d-inline-block fas fa-quote-right fa-4x text-primary mt-auto mx-auto"></i></div></div><div class="d-flex align-items-center justify-content-center"><img class="img-fluid max-width-150px" src="/wp-content/uploads/2025/01/vicky-walker-quote.png" alt="image alt text"><p class="lead ms-4 mb-0"><strong>Lorem ipsum dolor,</strong><br/>Mollitia aspernatur pariatur distinctio</p></div>Icon show/hide
Show hide content based on icon/image click.
An example of this can be seen here: /about-us/giving-back/our-framework
<div id="circleDropdown"></div><div class="icon-circle-show-hide-content"><div class="row d-flex justify-content-center text-center mb-5"><!-- Icon 1 --><div id="iconCircle1_icon" class="icon-circle col-6 col-sm-4 col-md-3 mb-4 mb-md-0 active"><a id="iconCircle1" class="icon-circle-trigger" href="#circleDropdown"><div class="position-relative"><div class="px-2 px-sm-0"><svg data-name="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><circle cx="150" cy="150" r="150"></svg></div><div class="position-absolute absolute-center-x absolute-center-y d-flex align-items-center"><div class="w-100 px-3 px-sm-2"><h4 class="text-white mb-2 mb-sm-0">Icon 1</h4><p class="text-white d-none d-sm-block mb-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit</p><i class="text-white fa-solid fa-chevron-down fa-xl"></i></div></div></div></a></div></div><!-- Icon 1 content --><div id="iconCircle1_content" class="icon-circle-content-blocks d-block bg-background-grey"><div class="section-marker page-section py-0 mb-3"><div class="row d-flex justify-content-center"><div class="position-relative col-3"><div class="marker position-absolute"></div></div> <!-- Icon 1 content marker --></div></div><div class="page-section pt-0"><div class="row d-flex align-items-center justify-content-center"><div class="col-12 col-sm-7 order-2 order-sm-1"><h3>Icon 1 content</h3><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas nemo eos, itaque veritatis illo voluptate provident.</p><p>Asperiores enim soluta labore at laboriosam quis sapiente molestiae temporibus magnam.</p></div><div class="col-12 col-sm-5 order-1 order-sm-2 text-center"><img src="..." alt="image alt text" class="img-fluid mx-auto px-5 px-sm-0 mb-4 mb-md-0"></div></div></div></div></div>
FAQ collapse
Question and answer block where collapse icon changes depending on state of collapse block.
An example of this can be seen here: /individual/health-cash-plan, under the ‘More information‘ tab
(FAQ answer text) lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis odio, atque voluptatum ut corrupti modi dolores voluptate fuga maiores eveniet laborum, consectetur, obcaecati asperiores in. Modi officiis ut magnam ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus voluptatibus amet doloremque, ea, corporis omnis ut maiores sunt porro esse nesciunt in voluptas enim laudantium non beatae commodi adipisci debitis.
(FAQ answer text) lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis odio, atque voluptatum ut corrupti modi dolores voluptate fuga maiores eveniet laborum, consectetur, obcaecati asperiores in. Modi officiis ut magnam ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus voluptatibus amet doloremque, ea, corporis omnis ut maiores sunt porro esse nesciunt in voluptas enim laudantium non beatae commodi adipisci debitis.
(FAQ answer text) lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis odio, atque voluptatum ut corrupti modi dolores voluptate fuga maiores eveniet laborum, consectetur, obcaecati asperiores in. Modi officiis ut magnam ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus voluptatibus amet doloremque, ea, corporis omnis ut maiores sunt porro esse nesciunt in voluptas enim laudantium non beatae commodi adipisci debitis.
<div class="frequently-asked-questions"><!-- FAQ question 1 --><div class="d-flex pt-3"><p class="faq-question mb-0"><a data-bs-toggle="collapse" href="#FAQ01" role="button" aria-expanded="false" aria-controls="FAQ01">(FAQ question text) lorem ipsum, dolor sit amet consectetur adipisicing elit?</a></p><a data-bs-toggle="collapse" href="#FAQ01" role="button" aria-expanded="false" aria-controls="FAQ01"><i class="text-primary fas fa-chevron-down ms-auto"></i><i class="text-primary fas fa-chevron-up ms-auto"></i></a></div><div class="collapse" id="FAQ01"><div class="faq-answer mt-3"><p class="mb-0">(FAQ answer text) lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis odio, atque voluptatum ut corrupti modi dolores voluptate fuga maiores eveniet laborum, consectetur, obcaecati asperiores in. Modi officiis ut magnam ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus voluptatibus amet doloremque, ea, corporis omnis ut maiores sunt porro esse nesciunt in voluptas enim laudantium non beatae commodi adipisci debitis.</p></div></div><!-- FAQ question 2 --><div class="d-flex border-top border-gray-300 pt-3 mt-3"><p class="faq-question mb-0"><a data-bs-toggle="collapse" href="#FAQ02" role="button" aria-expanded="false" aria-controls="FAQ02">(FAQ question text) lorem ipsum, dolor sit amet consectetur adipisicing elit?</a></p><a data-bs-toggle="collapse" href="#FAQ02" role="button" aria-expanded="false" aria-controls="FAQ02"><i class="text-primary fas fa-chevron-down ms-auto"></i><i class="text-primary fas fa-chevron-up ms-auto"></i></a></div><div class="collapse" id="FAQ02"><div class="faq-answer mt-3"><p class="mb-0">(FAQ answer text) lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis odio, atque voluptatum ut corrupti modi dolores voluptate fuga maiores eveniet laborum, consectetur, obcaecati asperiores in. Modi officiis ut magnam ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus voluptatibus amet doloremque, ea, corporis omnis ut maiores sunt porro esse nesciunt in voluptas enim laudantium non beatae commodi adipisci debitis.</p></div></div><!-- FAQ question 3 --><div class="d-flex border-top border-gray-300 pt-3 mt-3"><p class="faq-question mb-0"><a data-bs-toggle="collapse" href="#FAQ03" role="button" aria-expanded="false" aria-controls="FAQ03">(FAQ question text) lorem ipsum, dolor sit amet consectetur adipisicing elit?</a></p><a data-bs-toggle="collapse" href="#FAQ03" role="button" aria-expanded="false" aria-controls="FAQ03"><i class="text-primary fas fa-chevron-down ms-auto"></i><i class="text-primary fas fa-chevron-up ms-auto"></i></a></div><div class="collapse" id="FAQ03"><div class="faq-answer mt-3"><p class="mb-0">(FAQ answer text) lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis odio, atque voluptatum ut corrupti modi dolores voluptate fuga maiores eveniet laborum, consectetur, obcaecati asperiores in. Modi officiis ut magnam ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus voluptatibus amet doloremque, ea, corporis omnis ut maiores sunt porro esse nesciunt in voluptas enim laudantium non beatae commodi adipisci debitis.</p></div></div></div>Using the collapse block changing icons outside the FAQ layout
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae illo exercitationem cupiditate laborum mollitia maxime quia impedit quod optio, ex recusandae ipsa atque quae nesciunt eum. Nostrum tempora excepturi id.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad pariatur doloremque consectetur. Maxime aliquid eius quasi, mollitia qui quas, rerum temporibus tempore minima eos ea! Asperiores rerum placeat dignissimos nostrum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consectetur saepe reprehenderit non molestias fugit, dicta ipsum omnis perspiciatis doloremque eum, quisquam expedita placeat voluptatum enim excepturi qui obcaecati aperiam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, at quidem labore neque sequi laudantium odio esse atque expedita earum sapiente excepturi nihil officiis molestiae quas molestias quaerat maxime! Asperiores? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus tempora iure repellat praesentium quasi suscipit debitis, aut explicabo, corporis amet ad necessitatibus optio expedita, accusamus nisi blanditiis beatae nobis voluptatum.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum sapiente suscipit obcaecati molestiae debitis minus id adipisci perferendis repellat beatae. Iste asperiores dolorum nobis architecto eveniet repellendus accusamus sint obcaecati.
<p><div data-bs-toggle="collapse" href="#showMoreDetailCollapse" role="button" aria-expanded="false" aria-controls="showMoreDetailCollapse" class="collapsed">Show more detail...<i class="text-primary fas fa-chevron-down me-3"></i><i class="text-primary fas fa-chevron-up me-3"></i></a></p><div class="collapse" id="showMoreDetailCollapse"><div class="card card-body"><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae illo exercitationem cupiditate laborum mollitia maxime quia impedit quod optio, ex recusandae ipsa atque quae nesciunt eum. Nostrum tempora excepturi id.</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad pariatur doloremque consectetur. Maxime aliquid eius quasi, mollitia qui quas, rerum temporibus tempore minima eos ea! Asperiores rerum placeat dignissimos nostrum.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consectetur saepe reprehenderit non molestias fugit, dicta ipsum omnis perspiciatis doloremque eum, quisquam expedita placeat voluptatum enim excepturi qui obcaecati aperiam.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, at quidem labore neque sequi laudantium odio esse atque expedita earum sapiente excepturi nihil officiis molestiae quas molestias quaerat maxime! Asperiores? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus tempora iure repellat praesentium quasi suscipit debitis, aut explicabo, corporis amet ad necessitatibus optio expedita, accusamus nisi blanditiis beatae nobis voluptatum.</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum sapiente suscipit obcaecati molestiae debitis minus id adipisci perferendis repellat beatae. Iste asperiores dolorum nobis architecto eveniet repellendus accusamus sint obcaecati.</p></div></div>
FAQ Accordion
Question and answer accordion for us on FAQ page
An example of this can be seen here: /help/faq
(FAQ topic 1) lorem ipsum, dolor sit amet consectetur adipisicing elit?
(FAQ question 1 text) lorem ipsum, dolor sit amet consectetur adipisicing elit?
(FAQ answer text) lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis odio, atque voluptatum ut corrupti modi dolores voluptate fuga maiores eveniet laborum, consectetur, obcaecati asperiores in. Modi officiis ut magnam ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus voluptatibus amet doloremque, ea, corporis omnis ut maiores sunt porro esse nesciunt in voluptas enim laudantium non beatae commodi adipisci debitis.
(FAQ question 2 text) lorem ipsum, dolor sit amet consectetur adipisicing elit?
(FAQ answer text) lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis odio, atque voluptatum ut corrupti modi dolores voluptate fuga maiores eveniet laborum, consectetur, obcaecati asperiores in. Modi officiis ut magnam ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus voluptatibus amet doloremque, ea, corporis omnis ut maiores sunt porro esse nesciunt in voluptas enim laudantium non beatae commodi adipisci debitis.
(FAQ topic 2) lorem ipsum, dolor sit amet consectetur adipisicing elit?
(FAQ question 1 text) lorem ipsum, dolor sit amet consectetur adipisicing elit?
(FAQ question 2 text) lorem ipsum, dolor sit amet consectetur adipisicing elit?
(FAQ topic 3) lorem ipsum, dolor sit amet consectetur adipisicing elit?
(FAQ question 1 text) lorem ipsum, dolor sit amet consectetur adipisicing elit?
(FAQ question 2 text) lorem ipsum, dolor sit amet consectetur adipisicing elit?
(FAQ Question 3 text) lorem ipsum, dolor sit amet consectetur adipisicing elit?
(FAQ Question 4 text) lorem ipsum, dolor sit amet consectetur adipisicing elit?
<div class="frequently-asked-questions-accordion"><div class="accordion accordion-flush id="FAQTopicAccordion"><!-- FAQ topic 1 --><div class="accordion-item"><h2 class="accordion-header topic-header"><a class="accordion-button collapsed type="button" data-bs-toggle="collapse data-bs-target="#FAQTopicAccordion_01" aria-expanded="false aria-controls="FAQTopicAccordion_01">(FAQ topic 1) lorem ipsum, dolor sit amet consectetur adipisicing elit?</a></h2><div id="FAQTopicAccordion_01 class="faq-topic accordion-collapse collapse" data-bs-parent="#FAQTopicAccordion"><div class="accordion accordion-flush id="FAQAnswersAccordion_01"><!-- FAQ question 1 --><div class="accordion-item"><h2 class="accordion-header"><a class="faq-question accordion-button collapsed type="button" data-bs-toggle="collapse data-bs-target="#FAQAnswersAccordion_01_01" aria-expanded="false aria-controls="FAQAnswersAccordion_01_01">(FAQ question 1 text) lorem ipsum, dolor sit amet consectetur adipisicing elit?</a></h2><div id="FAQAnswersAccordion_01_01 class="accordion-collapse collapse" data-bs-parent="#FAQAnswersAccordion_01"><div class="accordion-body faq-answer"><p>(FAQ answer text) lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis odio, atque voluptatum ut corrupti modi dolores voluptate fuga maiores eveniet laborum, consectetur, obcaecati asperiores in. Modi officiis ut magnam ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus voluptatibus amet doloremque, ea, corporis omnis ut maiores sunt porro esse nesciunt in voluptas enim laudantium non beatae commodi adipisci debitis.</p></div></div></div><!-- FAQ question 2 --><div class="accordion-item"><h2 class="accordion-header"><a class="faq-question accordion-button collapsed type="button" data-bs-toggle="collapse data-bs-target="#FAQAnswersAccordion_01_02" aria-expanded="false aria-controls="FAQAnswersAccordion_01_02">(FAQ question 2 text) lorem ipsum, dolor sit amet consectetur adipisicing elit?</a></h2><div id="FAQAnswersAccordion_01_02 class="accordion-collapse collapse" data-bs-parent="#FAQAnswersAccordion_01"><div class="accordion-body faq-answer"><p>(FAQ answer text) lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis odio, atque voluptatum ut corrupti modi dolores voluptate fuga maiores eveniet laborum, consectetur, obcaecati asperiores in. Modi officiis ut magnam ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus voluptatibus amet doloremque, ea, corporis omnis ut maiores sunt porro esse nesciunt in voluptas enim laudantium non beatae commodi adipisci debitis.</p></div></div></div></div></div></div><!-- FAQ topic 2 --><div class="accordion-item"><h2 class="accordion-header topic-header"><a class="accordion-button collapsed type="button" data-bs-toggle="collapse data-bs-target="#FAQTopicAccordion_02" aria-expanded="false aria-controls="FAQTopicAccordion_02">(FAQ topic 2) lorem ipsum, dolor sit amet consectetur adipisicing elit?</a></h2><div id="FAQTopicAccordion_02 class="faq-topic accordion-collapse collapse" data-bs-parent="#FAQTopicAccordion"><div class="accordion accordion-flush id="FAQAnswersAccordion_01"><!-- FAQ question 1 --><div class="accordion-item"><h2 class="accordion-header"><a class="faq-question accordion-button collapsed type="button" data-bs-toggle="collapse data-bs-target="#FAQAnswersAccordion_02_01" aria-expanded="false aria-controls="FAQAnswersAccordion_01_01">(FAQ question 1 text) lorem ipsum, dolor sit amet consectetur adipisicing elit?</a></h2><div id="FAQAnswersAccordion_01_01 class="accordion-collapse collapse" data-bs-parent="#FAQAnswersAccordion_02"><div class="accordion-body faq-answer"><p>(FAQ answer text) lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis odio, atque voluptatum ut corrupti modi dolores voluptate fuga maiores eveniet laborum, consectetur, obcaecati asperiores in. Modi officiis ut magnam ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus voluptatibus amet doloremque, ea, corporis omnis ut maiores sunt porro esse nesciunt in voluptas enim laudantium non beatae commodi adipisci debitis.</p></div></div></div><!-- FAQ question 2 --><div class="accordion-item"><h2 class="accordion-header"><a class="faq-question accordion-button collapsed type="button" data-bs-toggle="collapse data-bs-target="#FAQAnswersAccordion_02_02" aria-expanded="false aria-controls="FAQAnswersAccordion_01_02">(FAQ question 2 text) lorem ipsum, dolor sit amet consectetur adipisicing elit?</a></h2><div id="FAQAnswersAccordion_01_02 class="accordion-collapse collapse" data-bs-parent="#FAQAnswersAccordion_02"><div class="accordion-body faq-answer"><p>(FAQ answer text) lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis odio, atque voluptatum ut corrupti modi dolores voluptate fuga maiores eveniet laborum, consectetur, obcaecati asperiores in. Modi officiis ut magnam ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus voluptatibus amet doloremque, ea, corporis omnis ut maiores sunt porro esse nesciunt in voluptas enim laudantium non beatae commodi adipisci debitis.</p></div></div></div></div></div></div></div></div>
Help us to help you
Icon popup
Show popup dialog on icon click.
An example of this can be seen here: www.westfieldhealth.com
<div id="icon-pop-up class="pop-up position-fixed"><div id="popupIcon class="icon-trigger d-flex align-items-center bg-primary rounded-pill shadow"><img class="icon-img" src="/wp-content/themes/wh-wordpress-theme/img/icons/23/white/support_1.svg" alt="image alt text"><p class="icon-content">Lorem ipsum dolor<<i class="fa-solid fa-chevron-right px-2"></i></p></div><div id="popupOverlay class="popup-overlay"><div id="popupBox class="popup-box bg-white rounded border border-gray-300 shadow"><button id="popupClose class="popup-close">×</button><h4>Icon popup</h4><p class="small">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae minima ad autem sequi. Aliquam, nihil. Totam maiores similique ea molestias illum ut quas sapiente provident ratione iure!</p><p class="small"><a href="https://www.westfieldhealth.com/..." title="Popup">Find out more<i class="fa-light fa-chevron-right ps-2"></i></a></p></div></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>