Homepage header
You must use the homepage header on the homepage of the National Careers Service website and only at the top. You cannot use the homepage header on any other pages.
You should use the homepage header to help create a National Careers Service look and feel and make the website more visually engaging. The homepage header should be full width.
Contents
<div class="ncs-hero homepage-hero">
<!-- Desktop image -->
<div class="d-only">
<img src="https://lab-cdn.nationalcareersservice.org.uk/media/headers/homepage-desktop-header.png" alt="Woman sat at a laptop and wearing a headset in an office."/>
</div>
<!-- Mobile image -->
<div class="m-only">
<img src="https://lab-cdn.nationalcareersservice.org.uk/media/headers/homepage-mobile-header.png" alt="Woman sat at a laptop and wearing a headset in an office."/>
</div>
<div class="content govuk-width-container">
<div class="govuk-grid-row">
<div class="ncs-logo"></div>
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
<div class="block mb-5">
<span>Welcome</span>
<span>to</span>
<span>the</span>
</div>
<div class="block ncs">
<span>National</span>
<span>Careers</span>
<span>Service</span>
</div>
</h1>
<div class="sub-heading">
<p class="block">
<span>Get</span>
<span>information,</span>
<span>advice</span>
<span>and</span>
<span>guidance</span>
<span>to</span>
<span>help</span>
<span>you</span>
<span>make</span>
<span>decisions</span>
<span>at</span>
<span>all</span>
<span>stages</span>
<span>in</span>
<span>your</span>
<span>career.</span>
</p>
<p class="block">
<span>Available</span>
<span>to</span>
<span>people</span>
<span>who</span>
<span>live</span>
<span>in</span>
<span>England.</span>
</p>
</div>
</div>
</div>
</div>
</div>
Images in the homepage header
Images on the homepage header should be:
- 1,920px by 250px and in panoramic format on desktop
- 486px by 282px on mobile
On the desktop image, you need to add the National Careers Service logo in the top right corner. You should not add the logo to the mobile version of the homepage header image.
Page header
You can choose to use a page header component on landing pages on the National Careers Service website.
The page header should be full width and only ever used at the top of the page.
Contents
<div class="ncs-hero page-hero">
<!-- Desktop image -->
<div class="d-only">
<img src="https://lab-cdn.nationalcareersservice.org.uk/media/headers/page-header.jpg" alt=""/>
</div>
<!-- Mobile image -->
<div class="m-only">
<img src="https://lab-cdn.nationalcareersservice.org.uk/media/headers/page-mobile-header.jpg" alt=""/>
</div>
<div class="content govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
<div class="block ncs">
<span>Skills</span>
<span>assessment</span>
</div>
</h1>
<div class="sub-heading">
<p class="block">
<span>Find</span>
<span>out</span>
<span>about</span>
<span>careers</span>
<span>that</span>
<span>might</span>
<span>be</span>
<span>right</span>
<span>for</span>
<span>you</span>
<span>by</span>
<span>taking</span>
<span>one</span>
<span>of</span>
<span>our</span>
<span>accessments.</span>
</p>
</div>
</div>
</div>
</div>
</div>
Images in the page header
Images in the page headers other than the homepage should be:
- 1,920px by 210px and in panoramic format on desktop
- 486px by 220px on mobile
You should not use the National Careers Service logo with the page header component.
How to use these components
You can copy the HTML and paste it where you'd like to display the image header on your page.
You can then replace the image and edit the heading and paragraph elements to display the content you would like.
Writing for these components
You always need to add a h1 on the image header components. You have the option to add some paragraph text underneath the heading if you'd like to add a short description of the page.
You should display the text in a two third column. You need to choose images carefully, thinking about how the text and white background will cover the image.
Research on these components
From user research, we know that our users would prefer to see header images that show:
- more than one person
- people looking towards the camera
- someone participating in a task or action
- people who are happy in their work
- a diverse range of careers and people
Further guidance on images
You can read more advice about using images in our National Careers Service images guidance.