Page types - News
How to display, tag and categorise news articles.
When to use this pattern
Use this pattern to publish a news article to a public-facing website.
How to use this pattern
News index
This index sorts the already-published news so that the most recently posted article is at the top of the list.
Use the document list component to build consistent excerpts of articles.
A list of categories appears on the news index, and you could also add contact details for the media team.
If the majority of news articles feature images to support the content, you should use thumbnail images for each article in the news index. For any article which does not include an image, you can set a thumbnail placeholder. If supporting images are rarely available, you should remove thumbnails from all articles in the news index. You can find more information on thumbnail images in the document list component.
Open this example landing news example in new window
Copy example landing news code
Close example landing news code
<div class="hs2-width-container">
<main class="hs2-main-wrapper" id="maincontent" role="main">
<div class="hs2-grid-row">
<div class="hs2-grid-column-two-thirds">
<h1>News</h1>
<h3>The latest news, press releases and statements from the HS2 media relations team.</h3>
</div>
</div>
<div>
<ul class="hs2-document-list">
<li class="hs2-document-list__item hs2-document-list__item--featured hs2-document-list__item--full-width">
<div class="hs2-u-padding-left-4 hs2-u-padding-right-4 hs2-container">
<div class="hs2-document-list__item-image" aria-hidden="true">
<a class="hs2-document-list__image-link" href="#0" tabindex="-1">
<img class="w-inherit" srcset="/assets/images/s300_artist-impression-hs2-train-from-side.jpeg 1x, /assets/images/s300_artist-impression-hs2-train-from-side.jpeg 2x" src="/assets/images/s300_artist-impression-hs2-train-from-side.jpeg" alt="" loading="lazy">
</a>
</div>
<div class="hs2-document-list__item-content">
<div class="hs2-document-list__item-header">
<h3 class="hs2-document-list__item-title hs2-u-fs-m hs2-u-mt-no hs2-u-mb-xs">
<a href="#0">Government takes action to ensure Scotland receives best possible HS2 service
</span></a>
</h3>
<ul class="ps-0 hs2-document-list__item-metadata hs2-u-mb-xs">
<li class="hs2-document-list__item-attribute">
<span class="hs2-u-vh">Published: </span><time datetime="2022-01-01">1 January 2022</time>
</li>
<li class="hs2-document-list__item-attribute">
<a class="hs2-document-list__attribute-link" href="#0">
<span>Press releases</span>
</a>
</li>
</ul>
</div>
<div class="hs2-document-list__item-description">Intention to remove Golborne Link from HS2 Bill announced with alternative options to be explored.</div>
</div>
</div>
</li>
</ul>
</div>
<div class="hs2-grid-row hs2-u-margin-top-4">
<div class="hs2-grid-column-two-thirds">
<ul class="hs2-document-list">
<li class="hs2-document-list__item">
<div class="hs2-document-list__item-image" aria-hidden="true">
<a class="hs2-document-list__image-link" href="#0" tabindex="-1">
<img class="w-inherit" srcset="/assets/images/s300_s300_Default_News_Image.jpg 1x, /assets/images/s300_s300_Default_News_Image.jpg 2x" src="/assets/images/s300_s300_Default_News_Image.jpg" alt="" loading="lazy">
</a>
</div>
<div class="hs2-document-list__item-content">
<div class="hs2-document-list__item-header">
<h3 class="hs2-document-list__item-title hs2-u-fs-m hs2-u-mt-no hs2-u-mb-xs">
<a href="#0">HS2 Press Statement on Steve Allen
</span></a>
</h3>
<ul class="ps-0 hs2-document-list__item-metadata hs2-u-mb-xs">
<li class="hs2-document-list__item-attribute">
<span class="hs2-u-vh">Published: </span><time datetime="2022-01-01">1 January 2022</time>
</li>
<li class="hs2-document-list__item-attribute">
<a class="hs2-document-list__attribute-link" href="#0">
<span>Press releases</span>
</a>
</li>
</ul>
</div>
<div class="hs2-document-list__item-description">HS2 Ltd has announced that its Chief Financial Officer, Steve Allen, has decided to leave the company at the end of the financial year.</div>
</div>
</li>
<li class="hs2-document-list__item">
<div class="hs2-document-list__item-image" aria-hidden="true">
<a class="hs2-document-list__image-link" href="#0" tabindex="-1">
<img class="w-inherit" srcset="/assets/images/s300_stewart-jackson-hs2-resident-commissioner-960.jpg 1x, /assets/images/s300_stewart-jackson-hs2-resident-commissioner-960.jpg 2x" src="/assets/images/s300_stewart-jackson-hs2-resident-commissioner-960.jpg" alt="" loading="lazy">
</a>
</div>
<div class="hs2-document-list__item-content">
<div class="hs2-document-list__item-header">
<h3 class="hs2-document-list__item-title hs2-u-fs-m hs2-u-mt-no hs2-u-mb-xs">
<a href="#0">Department for Transport appoints new HS2 Residents' Commissioner
</span></a>
</h3>
<ul class="ps-0 hs2-document-list__item-metadata hs2-u-mb-xs">
<li class="hs2-document-list__item-attribute">
<span class="hs2-u-vh">Published: </span><time datetime="2021-07-15">15 July 2021</time>
</li>
<li class="hs2-document-list__item-attribute">
<a class="hs2-document-list__attribute-link" href="#0">
<span>Press releases</span>
</a>
</li>
</ul>
</div>
<div class="hs2-document-list__item-description">Stewart Jackson appointed to ensure the government meets its core principles of respecting people and places as the building of HS2 progresses.</div>
</div>
</li>
<li class="hs2-document-list__item">
<div class="hs2-document-list__item-image" aria-hidden="true">
<a class="hs2-document-list__image-link hs2-document-list__image-link--placeholder" href="#0" tabindex="-1">
</a>
</div>
<div class="hs2-document-list__item-content">
<div class="hs2-document-list__item-header">
<h3 class="hs2-document-list__item-title hs2-u-fs-m hs2-u-mt-no hs2-u-mb-xs">
<a href="#0">Search for new HS2 Ltd Chair is relaunched to help drive transformation and level up the country
</span></a>
</h3>
<ul class="ps-0 hs2-document-list__item-metadata hs2-u-mb-xs">
<li class="hs2-document-list__item-attribute">
<span class="hs2-u-vh">Published: </span><time datetime="2022-01-01">1 January 2022</time>
</li>
<li class="hs2-document-list__item-attribute">
<a class="hs2-document-list__attribute-link" href="#0">
<span>Press releases</span>
</a>
</li>
</ul>
</div>
<div class="hs2-document-list__item-description">The criteria for the role of HS2 Chair have been updated to appeal to leaders from a wider field of sectors and backgrounds.</div>
</div>
</li>
</ul>
</div>
<div class="hs2-grid-column-one-third">
<hr class="hs2-section-break hs2-section-break--visible hs2-u-margin-bottom-3">
<div>
<h5 class="hs2-u-margin-bottom-2">Categories</h5>
<ul class="hs2-list">
<li><a href="#">Press releases</a></li>
<li><a href="#">Statements</a></li>
</ul>
</div>
<hr class="hs2-section-break--m">
<div>
<h5 class="hs2-u-margin-bottom-2">Media enquiries</h5>
<ul class="hs2-list">
<li>
<div>Telephone: 0845 604 1858 <br /> Monday to Friday, 8:30am to 5:30pm</div>
</li>
<li>Out of hours: 07867 906 553</li>
<li>Email: <a href="#">media.relations@hs2.org.uk</a></li>
</ul>
</div>
</div>
</div>
</main>
</div>
Copy example landing news code
Close example landing news code
{% from "document-list/macro.njk" import documentList %}
{% block content %}
<div class="hs2-grid-row">
<div class="hs2-grid-column-two-thirds">
<h1>News</h1>
<h3>The latest news, press releases and statements from the HS2 media relations team.</h3>
</div>
</div>
<div>
{{ documentList({
"documents": [
{
"featured": true,
"fullWidth": true,
"thumbnail": {
"smallSrc": '/assets/images/s300_artist-impression-hs2-train-from-side.jpeg',
"largeSrc": '/assets/images/s300_artist-impression-hs2-train-from-side.jpeg'
},
"url": '#0',
"title": 'Government takes action to ensure Scotland receives best possible HS2 service',
"metadata": {
"type": {
"text": 'Press releases',
"url": '#0'
},
"date": {
"iso": '2022-01-01',
"short": '1 January 2022'
}
},
"description": 'Intention to remove Golborne Link from HS2 Bill announced with alternative options to be explored.'
}
]
}) }}
</div>
<div class="hs2-grid-row hs2-u-margin-top-4">
<div class="hs2-grid-column-two-thirds">
{{ documentList({
"documents": [
{
"thumbnail": {
"smallSrc": '/assets/images/s300_s300_Default_News_Image.jpg',
"largeSrc": '/assets/images/s300_s300_Default_News_Image.jpg'
},
"url": '#0',
"title": 'HS2 Press Statement on Steve Allen',
"metadata": {
"type": {
"text": 'Press releases',
"url": '#0'
},
"date": {
"iso": '2022-01-01',
"short": '1 January 2022'
}
},
"description": 'HS2 Ltd has announced that its Chief Financial Officer, Steve Allen, has decided to leave the company at the end of the financial year.'
},
{
"thumbnail": {
"smallSrc": '/assets/images/s300_stewart-jackson-hs2-resident-commissioner-960.jpg',
"largeSrc": '/assets/images/s300_stewart-jackson-hs2-resident-commissioner-960.jpg'
},
"url": '#0',
"title": "Department for Transport appoints new HS2 Residents' Commissioner",
"metadata": {
"type": {
"text": 'Press releases',
"url": '#0'
},
"date": {
"iso": '2021-07-15',
"short": '15 July 2021'
}
},
"description": 'Stewart Jackson appointed to ensure the government meets its core principles of respecting people and places as the building of HS2 progresses.'
},
{
"thumbnail": true,
"url": '#0',
"title": 'Search for new HS2 Ltd Chair is relaunched to help drive transformation and level up the country',
"metadata": {
"type": {
"text": 'Press releases',
"url": '#0'
},
"date": {
"iso": '2022-01-01',
"short": '1 January 2022'
}
},
"description": 'The criteria for the role of HS2 Chair have been updated to appeal to leaders from a wider field of sectors and backgrounds.'
}
]
}) }}
</div>
<div class="hs2-grid-column-one-third">
<hr class="hs2-section-break hs2-section-break--visible hs2-u-margin-bottom-3">
<div>
<h5 class="hs2-u-margin-bottom-2">Categories</h5>
<ul class="hs2-list">
<li><a href="#">Press releases</a></li>
<li><a href="#">Statements</a></li>
</ul>
</div>
<hr class="hs2-section-break--m">
<div>
<h5 class="hs2-u-margin-bottom-2">Media enquiries</h5>
<ul class="hs2-list">
<li><div>Telephone: 0845 604 1858 <br /> Monday to Friday, 8:30am to 5:30pm</div></li>
<li>Out of hours: 07867 906 553</li>
<li>Email: <a href="#">media.relations@hs2.org.uk</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}News article
This is a text page that can include images and videos. Each news article is reached through a link on the news index. It needs to have at least one of the categories: statement or press release.
There is no limit on length. If you think an article seems too long, question the user need for such length with the content author.
The title is important. It will stand out on the news index and it links users to the article. It needs to:
- be in plain English
- use terms and phrases that reflect the language of users
- be as short as possible
- be front-loaded, with the most important information first
Each article needs to have the pagination component at the end, to link to the previous and next articles in the index.
Open this example article news example in new window
Copy example article news code
Close example article news code
<div class="hs2-width-container">
<main class="hs2-main-wrapper" id="maincontent" role="main">
<span class="hs2-u-font-size-24 hs2-u-secondary-text-color hs2-u-font-weight-bold">Press releases</span>
<h1 class="hs2-u-margin-bottom-0">Government takes action to ensure Scotland receives best possible HS2 service</h1>
<div class="hs2-grid-row">
<div class="hs2-grid-column-two-thirds">
<figure class="hs2-image">
<img class="hs2-image__img" src="/assets/images/s300_artist-impression-hs2-train-from-side.jpeg" alt="Train from the side">
</figure>
<p>
The government has today (6 June 2022) committed to leaving no stone unturned when it comes to finding the right
solution to take HS2 trains to Scotland.
</p>
<p>
The Department for Transport has announced its intention to remove the Golborne Link from the current HS2 Bill and
explore alternatives that deliver similar benefits, within the £96 billion envelope of the Integrated Rail Plan.
</p>
<p>
The Golborne Link – a high speed rail link connecting HS2 to the West Coast Mainline – will, subject to Parliamentary,
be removed from the High Speed Rail (Crewe – Manchester) Bill after its second reading following clear recommendations
set out in last year’s Union Connectivity Review.
</p>
<p>
The government is updating safeguarding boundaries to align with the HS2 Bill, but will maintain safeguarding for the
Golborne Link during the work on possible alternatives – meaning impacted residents and small businesses can continue
to apply under the property compensation schemes.
</p>
<p>
The independent Union Connectivity Review undertaken by Sir Peter Hendy claimed that the Golborne Link does not
resolve all the current capacity constraints on the West Coast Main Line between Crewe and Preston.
</p>
<p>
In line with this review, the government has committed to exploring a number of alternatives that could deliver
similar benefits within the framework of the Integrated Rail Plan – ranging from upgrading existing infrastructure
to brand new high speed links.
</p>
<p>
Scotland is already set to benefit from the boost in connectivity and huge economic benefits HS2 will bring with
services between London and Glasgow set to be available, based on current timetable assumptions, once HS2 trains
start running onto the conventional rail network.
</p>
<p>HS2 Minister Andrew Stephenson said:</p>
<ul class="hs2-list">
<li>
<blockquote>
"HS2 is a once-in-a-lifetime project that will transform travel across the entire UK as we know it and serve
millions of people for hundreds of years to come and it’s absolutely vital that we get this right from the outset."
</blockquote>
</li>
<li>
<blockquote>
"Removing this link is about ensuring that we’ve left no stone unturned when it comes to working with our Scottish
counterparts to find a solution that will best serve the great people of Scotland."
</blockquote>
</li>
</ul>
<p>
The Union Connectivity review recommended a full exploration of alternative options to the Golborne Link and the UK
government is working with the Scottish Government and other devolved authorities to implement recommendations from it.
</p>
<p>
This is just one part of the £96 billion Integrated Rail Plan – the biggest ever public investment in Britain’s rail
network – and the first of 3 new high speed lines being planned, to add more seats, shorten journey times,
support local services and deliver a modern, fully connected transport network.
</p>
<p>
The High Speed Rail (Crewe – Manchester) Bill was introduced in January with the goal of bringing faster, greener
and more reliable train services as well unparalleled economic benefits to the north and will have its second reading
when parliamentary time allows.
</p>
</div>
<div class="hs2-grid-column-one-third">
<hr class="hs2-section-break hs2-section-break--visible hs2-u-margin-bottom-3">
<div>
<h5 class="hs2-u-margin-bottom-2">Published On</h5>
<time>6 June 2022</time>
</div>
<hr class="hs2-section-break--m">
<div>
<h5 class="hs2-u-margin-bottom-2">Published in</h5>
<a href="#">Press releases</a>
</div>
<hr class="hs2-section-break--m">
<div>
<h5 class="hs2-u-margin-bottom-2">Tags</h5>
<ul class="hs2-list">
<li>
<a href="#">Integrated data</a>
</li>
<li>
<a href="#">Census 2021</a>
</li>
<li>
<a href="#">Survey</a>
</li>
</ul>
</div>
<hr class="hs2-section-break--m">
<div>
<h5 class="hs2-u-margin-bottom-2">Share this article</h5>
<ul class="hs2-list">
<li class="flex align-center">
<img class="size-2 hs2-u-margin-right-2" src="/assets/images/facebook.svg" alt="" />
<a href="#">Facebook</a>
</li>
<li class="flex align-center">
<img class="size-2 hs2-u-margin-right-2" src="/assets/images/twitter.svg" alt="" />
<a href="#">Twitter</a>
</li>
</ul>
</div>
</div>
</div>
<nav class="hs2-pager" role="navigation" aria-label="pager">
<ul class="hs2-list hs2-pager__list">
<li class="hs2-pager-item--previous">
<a class="hs2-pager__link hs2-pager__link--prev" href="#">
<span class="hs2-pager__title">Previous</span>
<span class="hs2-u-visually-hidden">:</span>
<span class="hs2-pager__page">HS2 Press Statement on Steve Allen</span>
<svg class="hs2-icon hs2-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M6.69995 6.82499L8.59995 8.69999L6.62495 10.675L21.325 10.675L21.325 13.325L6.62495 13.325L8.59995 15.3L6.69995 17.175L1.54995 12L6.69995 6.82499Z"></path>
</svg>
</a>
</li>
<li class="hs2-pager-item--next">
<a class="hs2-pager__link hs2-pager__link--next" href="#">
<span class="hs2-pager__title">Next</span>
<span class="hs2-u-visually-hidden">:</span>
<span class="hs2-pager__page">Search for new HS2 Ltd Chair is relaunched to help drive transformation and level up the country</span>
<svg class="hs2-icon hs2-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M17.3 17.175L15.4 15.3L17.375 13.325H2.67505V10.675H17.375L15.4 8.70001L17.3 6.82501L22.4501 12L17.3 17.175Z"></path>
</svg>
</a>
</li>
</ul>
</nav>
</main>
</div>
Copy example article news code
Close example article news code
{% from "document-list/macro.njk" import documentList %}
{% from "pager/macro.njk" import pager %}
{% from 'images/macro.njk' import image %}
{% block content%}
<span class="hs2-u-font-size-24 hs2-u-secondary-text-color hs2-u-font-weight-bold">Press releases</span>
<h1 class="hs2-u-margin-bottom-0">Government takes action to ensure Scotland receives best possible HS2 service</h1>
<div class="hs2-grid-row">
<div class="hs2-grid-column-two-thirds">
{{ image({
"src": '/assets/images/s300_artist-impression-hs2-train-from-side.jpeg',
"alt": "Train from the side"
}) }}
<p>
The government has today (6 June 2022) committed to leaving no stone unturned when it comes to finding the right
solution to take HS2 trains to Scotland.
</p>
<p>
The Department for Transport has announced its intention to remove the Golborne Link from the current HS2 Bill and
explore alternatives that deliver similar benefits, within the £96 billion envelope of the Integrated Rail Plan.
</p>
<p>
The Golborne Link – a high speed rail link connecting HS2 to the West Coast Mainline – will, subject to Parliamentary,
be removed from the High Speed Rail (Crewe – Manchester) Bill after its second reading following clear recommendations
set out in last year’s Union Connectivity Review.
</p>
<p>
The government is updating safeguarding boundaries to align with the HS2 Bill, but will maintain safeguarding for the
Golborne Link during the work on possible alternatives – meaning impacted residents and small businesses can continue
to apply under the property compensation schemes.
</p>
<p>
The independent Union Connectivity Review undertaken by Sir Peter Hendy claimed that the Golborne Link does not
resolve all the current capacity constraints on the West Coast Main Line between Crewe and Preston.
</p>
<p>
In line with this review, the government has committed to exploring a number of alternatives that could deliver
similar benefits within the framework of the Integrated Rail Plan – ranging from upgrading existing infrastructure
to brand new high speed links.
</p>
<p>
Scotland is already set to benefit from the boost in connectivity and huge economic benefits HS2 will bring with
services between London and Glasgow set to be available, based on current timetable assumptions, once HS2 trains
start running onto the conventional rail network.
</p>
<p>HS2 Minister Andrew Stephenson said:</p>
<ul class="hs2-list">
<li>
<blockquote>
"HS2 is a once-in-a-lifetime project that will transform travel across the entire UK as we know it and serve
millions of people for hundreds of years to come and it’s absolutely vital that we get this right from the outset."
</blockquote>
</li>
<li>
<blockquote>
"Removing this link is about ensuring that we’ve left no stone unturned when it comes to working with our Scottish
counterparts to find a solution that will best serve the great people of Scotland."
</blockquote>
</li>
</ul>
<p>
The Union Connectivity review recommended a full exploration of alternative options to the Golborne Link and the UK
government is working with the Scottish Government and other devolved authorities to implement recommendations from it.
</p>
<p>
This is just one part of the £96 billion Integrated Rail Plan – the biggest ever public investment in Britain’s rail
network – and the first of 3 new high speed lines being planned, to add more seats, shorten journey times,
support local services and deliver a modern, fully connected transport network.
</p>
<p>
The High Speed Rail (Crewe – Manchester) Bill was introduced in January with the goal of bringing faster, greener
and more reliable train services as well unparalleled economic benefits to the north and will have its second reading
when parliamentary time allows.
</p>
</div>
<div class="hs2-grid-column-one-third">
<hr class="hs2-section-break hs2-section-break--visible hs2-u-margin-bottom-3">
<div>
<h5 class="hs2-u-margin-bottom-2">Published On</h5>
<time>6 June 2022</time>
</div>
<hr class="hs2-section-break--m">
<div>
<h5 class="hs2-u-margin-bottom-2">Published in</h5>
<a href="#">Press releases</a>
</div>
<hr class="hs2-section-break--m">
<div>
<h5 class="hs2-u-margin-bottom-2">Tags</h5>
<ul class="hs2-list">
<li>
<a href="#">Integrated data</a>
</li>
<li>
<a href="#">Census 2021</a>
</li>
<li>
<a href="#">Survey</a>
</li>
</ul>
</div>
<hr class="hs2-section-break--m">
<div>
<h5 class="hs2-u-margin-bottom-2">Share this article</h5>
<ul class="hs2-list">
<li class="flex align-center">
<img class="size-2 hs2-u-margin-right-2" src="/assets/images/facebook.svg" alt=""/>
<a href="#">Facebook</a>
</li>
<li class="flex align-center">
<img class="size-2 hs2-u-margin-right-2" src="/assets/images/twitter.svg" alt=""/>
<a href="#">Twitter</a>
</li>
</ul>
</div>
</div>
</div>
{{ pager({
"previousUrl": "#",
"previousPage": "HS2 Press Statement on Steve Allen",
"nextUrl": "#",
"nextPage": "Search for new HS2 Ltd Chair is relaunched to help drive transformation and level up the country"
}) }}
{% endblock %}Categories
Allocate at least one category to each news article. The categories then appear on the news index. A category that has no articles assigned to it will not be visible on the news index. If a user selects a category, it takes them to a news index for all the articles in that category.
Only one category will be visible on the news index, even if the article is assigned to more than one.
Open this example categories news example in new window
Copy example categories news code
Close example categories news code
<div class="hs2-width-container">
<main class="hs2-main-wrapper" id="maincontent" role="main">
<h1>Press releases</h1>
<div class="hs2-grid-row hs2-u-margin-top-4">
<div class="hs2-grid-column-two-thirds">
<ul class="hs2-document-list">
<li class="hs2-document-list__item">
<div class="hs2-document-list__item-image" aria-hidden="true">
<a class="hs2-document-list__image-link" href="#0" tabindex="-1">
<img class="w-inherit" srcset="/assets/images/s300_artist-impression-hs2-train-from-side.jpeg 1x, /assets/images/s300_artist-impression-hs2-train-from-side.jpeg 2x" src="/assets/images/s300_artist-impression-hs2-train-from-side.jpeg" alt="" loading="lazy">
</a>
</div>
<div class="hs2-document-list__item-content">
<div class="hs2-document-list__item-header">
<h3 class="hs2-document-list__item-title hs2-u-fs-m hs2-u-mt-no hs2-u-mb-xs">
<a href="#0">Government takes action to ensure Scotland receives best possible HS2 service
</span></a>
</h3>
<ul class="ps-0 hs2-document-list__item-metadata hs2-u-mb-xs">
<li class="hs2-document-list__item-attribute">
<span class="hs2-u-vh">Published: </span><time datetime="2022-01-01">1 January 2022</time>
</li>
<li class="hs2-document-list__item-attribute">
<a class="hs2-document-list__attribute-link" href="#0">
<span>Press releases</span>
</a>
</li>
</ul>
</div>
<div class="hs2-document-list__item-description">Intention to remove Golborne Link from HS2 Bill announced with alternative options to be explored.</div>
</div>
</li>
<li class="hs2-document-list__item">
<div class="hs2-document-list__item-image" aria-hidden="true">
<a class="hs2-document-list__image-link" href="#0" tabindex="-1">
<img class="w-inherit" srcset="/assets/images/s300_stewart-jackson-hs2-resident-commissioner-960.jpg 1x, /assets/images/s300_stewart-jackson-hs2-resident-commissioner-960.jpg 2x" src="/assets/images/s300_stewart-jackson-hs2-resident-commissioner-960.jpg" alt="" loading="lazy">
</a>
</div>
<div class="hs2-document-list__item-content">
<div class="hs2-document-list__item-header">
<h3 class="hs2-document-list__item-title hs2-u-fs-m hs2-u-mt-no hs2-u-mb-xs">
<a href="#0">Department for Transport appoints new HS2 Residents' Commissioner
</span></a>
</h3>
<ul class="ps-0 hs2-document-list__item-metadata hs2-u-mb-xs">
<li class="hs2-document-list__item-attribute">
<span class="hs2-u-vh">Published: </span><time datetime="2021-07-15">15 July 2021</time>
</li>
<li class="hs2-document-list__item-attribute">
<a class="hs2-document-list__attribute-link" href="#0">
<span>Press releases</span>
</a>
</li>
</ul>
</div>
<div class="hs2-document-list__item-description">Stewart Jackson appointed to ensure the government meets its core principles of respecting people and places as the building of HS2 progresses.</div>
</div>
</li>
<li class="hs2-document-list__item">
<div class="hs2-document-list__item-image" aria-hidden="true">
<a class="hs2-document-list__image-link hs2-document-list__image-link--placeholder" href="#0" tabindex="-1">
</a>
</div>
<div class="hs2-document-list__item-content">
<div class="hs2-document-list__item-header">
<h3 class="hs2-document-list__item-title hs2-u-fs-m hs2-u-mt-no hs2-u-mb-xs">
<a href="#0">Search for new HS2 Ltd Chair is relaunched to help drive transformation and level up the country
</span></a>
</h3>
<ul class="ps-0 hs2-document-list__item-metadata hs2-u-mb-xs">
<li class="hs2-document-list__item-attribute">
<span class="hs2-u-vh">Published: </span><time datetime="2022-01-01">1 January 2022</time>
</li>
<li class="hs2-document-list__item-attribute">
<a class="hs2-document-list__attribute-link" href="#0">
<span>Press releases</span>
</a>
</li>
</ul>
</div>
<div class="hs2-document-list__item-description">The criteria for the role of HS2 Chair have been updated to appeal to leaders from a wider field of sectors and backgrounds.</div>
</div>
</li>
</ul>
</div>
<div class="hs2-grid-column-one-third">
<hr class="hs2-section-break hs2-section-break--visible hs2-u-margin-bottom-3">
<div>
<h5 class="hs2-u-margin-bottom-2">Categories</h5>
<ul class="hs2-list">
<li><a href="#">Press releases</a></li>
<li><a href="#">Statements</a></li>
</ul>
</div>
<hr class="hs2-section-break--m">
<div>
<h5 class="hs2-u-margin-bottom-2">Media enquiries</h5>
<ul class="hs2-list">
<li>
<div>Telephone: 0845 604 1858 <br /> Monday to Friday, 8:30am to 5:30pm</div>
</li>
<li>Out of hours: 07867 906 553</li>
<li>Email: <a href="#">media.relations@hs2.org.uk</a></li>
</ul>
</div>
</div>
</div>
</main>
</div>
Copy example categories news code
Close example categories news code
{% from "document-list/macro.njk" import documentList %}
{% block content %}
<h1>Press releases</h1>
<div class="hs2-grid-row hs2-u-margin-top-4">
<div class="hs2-grid-column-two-thirds">
{{ documentList({
"documents": [
{
"thumbnail": {
"smallSrc": '/assets/images/s300_artist-impression-hs2-train-from-side.jpeg',
"largeSrc": '/assets/images/s300_artist-impression-hs2-train-from-side.jpeg'
},
"url": '#0',
"title": 'Government takes action to ensure Scotland receives best possible HS2 service',
"metadata": {
"type": {
"text": 'Press releases',
"url": '#0'
},
"date": {
"iso": '2022-01-01',
"short": '1 January 2022'
}
},
"description": 'Intention to remove Golborne Link from HS2 Bill announced with alternative options to be explored.'
},
{
"thumbnail": {
"smallSrc": '/assets/images/s300_stewart-jackson-hs2-resident-commissioner-960.jpg',
"largeSrc": '/assets/images/s300_stewart-jackson-hs2-resident-commissioner-960.jpg'
},
"url": '#0',
"title": "Department for Transport appoints new HS2 Residents' Commissioner",
"metadata": {
"type": {
"text": 'Press releases',
"url": '#0'
},
"date": {
"iso": '2021-07-15',
"short": '15 July 2021'
}
},
"description": 'Stewart Jackson appointed to ensure the government meets its core principles of respecting people and places as the building of HS2 progresses.'
},
{
"thumbnail": true,
"url": '#0',
"title": 'Search for new HS2 Ltd Chair is relaunched to help drive transformation and level up the country',
"metadata": {
"type": {
"text": 'Press releases',
"url": '#0'
},
"date": {
"iso": '2022-01-01',
"short": '1 January 2022'
}
},
"description": 'The criteria for the role of HS2 Chair have been updated to appeal to leaders from a wider field of sectors and backgrounds.'
}
]
}) }}
</div>
<div class="hs2-grid-column-one-third">
<hr class="hs2-section-break hs2-section-break--visible hs2-u-margin-bottom-3">
<div>
<h5 class="hs2-u-margin-bottom-2">Categories</h5>
<ul class="hs2-list">
<li><a href="#">Press releases</a></li>
<li><a href="#">Statements</a></li>
</ul>
</div>
<hr class="hs2-section-break--m">
<div>
<h5 class="hs2-u-margin-bottom-2">Media enquiries</h5>
<ul class="hs2-list">
<li><div>Telephone: 0845 604 1858 <br /> Monday to Friday, 8:30am to 5:30pm</div></li>
<li>Out of hours: 07867 906 553</li>
<li>Email: <a href="#">media.relations@hs2.org.uk</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}Tags
Tags are not mandatory. Do not use the Tags block if there are no tags. A tag helps to identify an article, for example, “Census 2021”. Good tags help improve search performance. They need to be an important word or phrase that users will recognise.
You can use more than one tag for each article. Each tag is highlighted in on the news index. An “All articles for [tag name]” news index lists all the news articles that use that tag on the website.
Open this example tags news example in new window
Copy example tags news code
Close example tags news code
<div class="hs2-width-container">
<main class="hs2-main-wrapper" id="maincontent" role="main">
<h1>All Articles for <em class="hs2-highlight">High Speed Two</em></h1>
<div class="hs2-grid-row hs2-u-margin-top-4">
<div class="hs2-grid-column-two-thirds">
<ul class="hs2-document-list">
<li class="hs2-document-list__item">
<div class="hs2-document-list__item-content">
<div class="hs2-document-list__item-header">
<h3 class="hs2-document-list__item-title hs2-u-fs-m hs2-u-mt-no hs2-u-mb-xs">
<a href="#0">HS2 Ltd response to Construction Commissioner's 23rd report
</span></a>
</h3>
<ul class="ps-0 hs2-document-list__item-metadata hs2-u-mb-xs">
<li class="hs2-document-list__item-attribute">
<span class="fw-bold">Press release</span>
</li>
</ul>
</div>
<div class="hs2-document-list__item-description">
<p><em class="hs2-highlight">High Speed Two</em> (HS2) Ltd responds to the twenty-third Construction Commissioner's report published in December 2022.</p>
</div>
</div>
</li>
<li class="hs2-document-list__item">
<div class="hs2-document-list__item-content">
<div class="hs2-document-list__item-header">
<h3 class="hs2-document-list__item-title hs2-u-fs-m hs2-u-mt-no hs2-u-mb-xs">
<a href="#0">HS2 Crewe to Manchester: supplement to the update on the strategic outline business case
</span></a>
</h3>
<ul class="ps-0 hs2-document-list__item-metadata hs2-u-mb-xs">
<li class="hs2-document-list__item-attribute">
<span class="fw-bold">Released: </span><time datetime="2021-02-18">18 February 2021</time>
</li>
<li class="hs2-document-list__item-attribute">
<span class="fw-bold">Press release</span>
</li>
</ul>
</div>
<div class="hs2-document-list__item-description">
<p>Supplement to the update on the SOBC sets out the implications of removing the Golborne Link from the <em class="hs2-highlight">High Speed</em> (Crewe to Manchester) Bill scheme.</p>
</div>
</div>
</li>
<li class="hs2-document-list__item">
<div class="hs2-document-list__item-content">
<div class="hs2-document-list__item-header">
<h3 class="hs2-document-list__item-title hs2-u-fs-m hs2-u-mt-no hs2-u-mb-xs">
<a href="#0">HS2 Ltd response to Construction Commissioner's 20th, 21st and 22nd reports
</span></a>
</h3>
<ul class="ps-0 hs2-document-list__item-metadata hs2-u-mb-xs">
<li class="hs2-document-list__item-attribute">
<span class="fw-bold">Released: </span><time datetime="2019-12-01">2 December 2019</time>
</li>
<li class="hs2-document-list__item-attribute">
<span class="fw-bold">Press release</span>
</li>
</ul>
</div>
<div class="hs2-document-list__item-description">
<p><em class="hs2-highlight">High Speed Two</em> (HS2) Ltd responds to the twentieth, twenty-first and twenty-second Construction Commissioner's report published in March 2022, June 2022 and September 2022.</p>
</div>
</div>
</li>
<li class="hs2-document-list__item">
<div class="hs2-document-list__item-content">
<div class="hs2-document-list__item-header">
<h3 class="hs2-document-list__item-title hs2-u-fs-m hs2-u-mt-no hs2-u-mb-xs">
<a href="#0">High Speed Two 6-monthly report to Parliament: October 2022
</span></a>
</h3>
<ul class="ps-0 hs2-document-list__item-metadata hs2-u-mb-no">
<li class="hs2-document-list__item-attribute">
<span class="fw-bold">Released: </span><time datetime="2017-04-20">20 April 2017</time>
</li>
<li class="hs2-document-list__item-attribute">
<span class="fw-bold">Press release</span>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="hs2-grid-column-one-third">
<hr class="hs2-section-break hs2-section-break--visible hs2-u-margin-bottom-3">
<div>
<h5 class="hs2-u-margin-bottom-2">Categories</h5>
<ul class="hs2-list">
<li><a href="#">Press releases</a></li>
<li><a href="#">Statements</a></li>
</ul>
</div>
<hr class="hs2-section-break--m">
<div>
<h5 class="hs2-u-margin-bottom-2">Media enquiries</h5>
<ul class="hs2-list">
<li>
<div>Telephone: 0845 604 1858 <br /> Monday to Friday, 8:30am to 5:30pm</div>
</li>
<li>Out of hours: 07867 906 553</li>
<li>Email: <a href="#">media.relations@hs2.org.uk</a></li>
</ul>
</div>
</div>
</div>
</main>
</div>
Copy example tags news code
Close example tags news code
{% from "document-list/macro.njk" import documentList %}
{% block content %}
<h1>All Articles for <em class="hs2-highlight">High Speed Two</em></h1>
<div class="hs2-grid-row hs2-u-margin-top-4">
<div class="hs2-grid-column-two-thirds">
{{ documentList({
"documents": [
{
"url": '#0',
"title": "HS2 Ltd response to Construction Commissioner's 23rd report",
"metadata": {
"type": {
"text": 'Press release'
}
},
"description": '<p><em class="hs2-highlight">High Speed Two</em> (HS2) Ltd responds to the twenty-third Construction Commissioner's report published in December 2022.</p>'
},
{
"url": '#0',
"title": 'HS2 Crewe to Manchester: supplement to the update on the strategic outline business case',
"metadata": {
"type": {
"text": 'Press release'
},
"date": {
"prefix": 'Released',
"showPrefix": true,
"iso": '2021-02-18',
"short": '18 February 2021'
}
},
"description": '<p>Supplement to the update on the SOBC sets out the implications of removing the Golborne Link from the <em class="hs2-highlight">High Speed</em> (Crewe to Manchester) Bill scheme.</p>'
},
{
"url": '#0',
"title": "HS2 Ltd response to Construction Commissioner's 20th, 21st and 22nd reports",
"metadata": {
"type": {
"text": 'Press release'
},
"date": {
"prefix": 'Released',
"showPrefix": true,
"iso": '2019-12-01',
"short": '2 December 2019'
}
},
"description": '<p><em class="hs2-highlight">High Speed Two</em> (HS2) Ltd responds to the twentieth, twenty-first and twenty-second Construction Commissioner's report published in March 2022, June 2022 and September 2022.</p>'
},
{
"url": '#0',
"title": 'High Speed Two 6-monthly report to Parliament: October 2022',
"metadata": {
"type": {
"text": 'Press release'
},
"date": {
"prefix": 'Released',
"showPrefix": true,
"iso": '2017-04-20',
"short": '20 April 2017'
}
}
}
]
}) }}
</div>
<div class="hs2-grid-column-one-third">
<hr class="hs2-section-break hs2-section-break--visible hs2-u-margin-bottom-3">
<div>
<h5 class="hs2-u-margin-bottom-2">Categories</h5>
<ul class="hs2-list">
<li><a href="#">Press releases</a></li>
<li><a href="#">Statements</a></li>
</ul>
</div>
<hr class="hs2-section-break--m">
<div>
<h5 class="hs2-u-margin-bottom-2">Media enquiries</h5>
<ul class="hs2-list">
<li><div>Telephone: 0845 604 1858 <br /> Monday to Friday, 8:30am to 5:30pm</div></li>
<li>Out of hours: 07867 906 553</li>
<li>Email: <a href="#">media.relations@hs2.org.uk</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}