Skip to content

Add anchor links and evidence section to product pages #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devansXD merged 2 commits into from
Feb 9, 2026
Merged

Add anchor links and evidence section to product pages #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7173dd8
Add anchor links and evidence section to product pages
devansXD Feb 9, 2026
c6a1e65
Merge branch 'master' into daves-branch
devansXD Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 74 additions & 26 deletions app/views/current/product-detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,12 @@ <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-2">
{
href: "#evidence",
text: "Evidence and documents"
},
{
href: "#contact",
text: "Evaluation contact"
}

]
}) }}

Expand Down Expand Up @@ -190,10 +195,37 @@ <h2 class="nhsuk-card__heading nhsuk-heading-s">
</div>

</div>
<div class="nhsuk-grid-column-one-third nhsuk-u-padding-left-6">
<div class="nhsuk-grid-column-one-third">



{# Quick Links #}

<div class="nhsuk-u-margin-top-4" id="evidence">

<h3 class="nhsuk-card__heading nhsuk-heading-s">
Related resources
</h3>

<ul class="nhsuk-list">
<li>
<a href="#">Product brochure (PDF)</a>
</li>


<li>
<a href="#">Clinical trial publication</a>
</li>
<li>
<a href="#">Safety data sheet</a>
</li>
<li>
<a href="#">Training materials</a>
</li>
</ul>

</div>



</div>
</div>
Expand All @@ -202,17 +234,15 @@ <h2 class="nhsuk-card__heading nhsuk-heading-s">
{# NHS TRUST TRIALS - CHARTS FIRST #}
{# ============================================ #}
<div class="nhsuk-grid-row nhsuk-u-margin-bottom-6" id="trials">
<div class="nhsuk-grid-column-full">
<div class="nhsuk-grid-column-two-thirds">

<hr class="nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-5">

<h2 class="nhsuk-heading-l">NHS trust trials at a glance</h2>
<p class="nhsuk-body-l nhsuk-u-margin-bottom-5">18 NHS trusts have trialled this product. Click any section for details.</p>

<div class="nhsuk-grid-row">

{# Outcome chart #}
<div class="nhsuk-grid-column-one-third">
<div class="nhsuk-u-margin-bottom-4">
<div class="nhsuk-card nhsuk-card--clickable" style="text-align: center; cursor: pointer;" onclick="document.getElementById('trial-list').scrollIntoView({behavior: 'smooth'});">
<div class="nhsuk-card__content">
<h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">Trial outcomes</h3>
Expand Down Expand Up @@ -248,8 +278,8 @@ <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">Trial outcomes</h3>
</div>

{# Regional chart #}
<div class="nhsuk-grid-column-one-third">
<div class="nhsuk-card nhsuk-card--clickable" style="text-align: center; cursor: pointer;" onclick="document.getElementById('regional-breakdown').scrollIntoView({behavior: 'smooth'});">
<div class="nhsuk-u-margin-bottom-4">
<div class="nhsuk-card nhsuk-card--clickable" style="text-align: center; cursor: pointer;" onclick="document.getElementById('trial-list').scrollIntoView({behavior: 'smooth'});">
<div class="nhsuk-card__content">
<h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">By NHS region</h3>

Expand Down Expand Up @@ -303,7 +333,7 @@ <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">By NHS region</h3>
</div>

{# Trust type chart #}
<div class="nhsuk-grid-column-one-third">
<div class="nhsuk-u-margin-bottom-4">
<div class="nhsuk-card nhsuk-card--clickable" style="text-align: center; cursor: pointer;" onclick="document.getElementById('contacts').scrollIntoView({behavior: 'smooth'});">
<div class="nhsuk-card__content">
<h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">Willing to discuss</h3>
Expand Down Expand Up @@ -336,7 +366,6 @@ <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">Willing to discuss</h3>
</div>
</div>

</div>
</div>
</div>

Expand All @@ -345,8 +374,8 @@ <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">Willing to discuss</h3>
{# DETAILED TRIAL LIST #}
{# ============================================ #}
<div class="nhsuk-grid-row nhsuk-u-margin-bottom-6" id="trial-list">
<div class="nhsuk-grid-column-full">
<div class="nhsuk-grid-column-two-thirds">

<h2 class="nhsuk-heading-l">Individual trust trials</h2>
<p class="nhsuk-body">Click on any trust to see their full trial report and contact details.</p>

Expand All @@ -359,10 +388,9 @@ <h2 class="nhsuk-heading-l">Individual trust trials</h2>
</div>

{# Trial cards - new format #}
<div class="nhsuk-grid-row">


{# Trust 1 - Manchester #}
<div class="nhsuk-grid-column-one-half nhsuk-u-margin-bottom-4">
<div class="nhsuk-u-margin-bottom-4" id="contacts">
<div class="nhsuk-card">
<div class="nhsuk-card__content">

Expand Down Expand Up @@ -424,7 +452,7 @@ <h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Contact for peer discussion<
</div>

{# Trust 2 - Guy's and St Thomas' #}
<div class="nhsuk-grid-column-one-half nhsuk-u-margin-bottom-4">
<div class="nhsuk-u-margin-bottom-4">
<div class="nhsuk-card">
<div class="nhsuk-card__content">

Expand Down Expand Up @@ -486,7 +514,7 @@ <h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Contact for peer discussion<
</div>

{# Trust 3 - Birmingham #}
<div class="nhsuk-grid-column-one-half nhsuk-u-margin-bottom-4">
<div class="nhsuk-u-margin-bottom-4">
<div class="nhsuk-card">
<div class="nhsuk-card__content">

Expand Down Expand Up @@ -548,7 +576,7 @@ <h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Contact for peer discussion<
</div>

{# Trust 4 - Leeds (Under review) #}
<div class="nhsuk-grid-column-one-half nhsuk-u-margin-bottom-4">
<div class="nhsuk-u-margin-bottom-4">
<div class="nhsuk-card">
<div class="nhsuk-card__content">

Expand Down Expand Up @@ -601,12 +629,6 @@ <h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Contact for peer discussion<
</div>
</div>





</div>

<p class="nhsuk-body">
<a href="#" class="nhsuk-link">Show all 18 trust trials →</a>
</p>
Expand Down Expand Up @@ -659,4 +681,30 @@ <h2 class="nhsuk-heading-l">Evidence and documentation</h2>
</div>
</div>


{# Contact Information Card #}
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
{% from "card/macro.njk" import card %}

{% set cardDescriptionHtml %}
<ul>
<li>you disagree with with something on this page</li>
<li>you have a query about something on this page</li>
<li>you would like to amend something on this page</li>

</ul>
<p>In all instances, contact the team on 0330 2234 776 or email: <a href="">enquiries@dhsc.gov.uk</a></p>
{% endset %}

<div id="contact">
{{ card({
type: "non-urgent",
heading: "You can contact us if:",
descriptionHtml: cardDescriptionHtml
}) }}
</div>
</div>
</div>

{% endblock %}
109 changes: 104 additions & 5 deletions app/views/current/product-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,41 @@ <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-3">
<strong class="nhsuk-tag nhsuk-tag--white">Clinical trial available</strong>
</div>

{# Supplier Information #}

{{ contentsList({
items: [
{
href: "#trials",
text: "Trust trials"

},
{
href: "#costs",
text: "Cost breakdown"
},
{
href: "#contacts",
text: "Trust contacts"
}
,
{
href: "#tech-spec",
text: "Technical specifications"
}
,
{
href: "#evidence",
text: "Evidence and documents"
},
{
href: "#contact",
text: "Evaluation contact"
}

]
}) }}

{# Supplier Information Card #}
<div class="nhsuk-card">
<div class="nhsuk-card__content">
<h3 class="nhsuk-card__heading nhsuk-heading-s">
Expand Down Expand Up @@ -201,7 +235,7 @@ <h2 class="nhsuk-heading-m">Working with this supplier</h2>

{# Technical Specifications - Collapsed by default #}

<details class="nhsuk-details nhsuk-expander">
<details class="nhsuk-details nhsuk-expander" id="tech-spec">
<summary class="nhsuk-details__summary">
<span class="nhsuk-details__summary-text">
View technical specifications
Expand Down Expand Up @@ -370,7 +404,7 @@ <h3 class="nhsuk-heading-s nhsuk-u-margin-top-4">Clinical trial data</h3>

{# Cost Analysis - Collapsed by default #}

<details class="nhsuk-details nhsuk-expander">
<details class="nhsuk-details nhsuk-expander" id="costs">
<summary class="nhsuk-details__summary">
<span class="nhsuk-details__summary-text">
View cost analysis
Expand Down Expand Up @@ -450,7 +484,7 @@ <h3 class="nhsuk-heading-s nhsuk-u-margin-top-4">Clinical trial data</h3>

{# Quick Links #}
<div class="nhsuk-u-margin-top-4">

<h3 class="nhsuk-card__heading nhsuk-heading-s">
Related resources
</h3>
Expand Down Expand Up @@ -493,7 +527,7 @@ <h2 class="nhsuk-heading-l">Information shared by NHS organisations</h2>
<div class="nhsuk-grid-column-two-thirds">

{# Trust Evaluation 1 - Barts Health NHS Trust (Business case) #}
<div class="nhsuk-card">
<div class="nhsuk-card" id="contacts">
<div class="nhsuk-card__content">
<div class="nhsuk-u-margin-bottom-3">
<strong class="nhsuk-tag nhsuk-tag--green">Procured</strong>
Expand Down Expand Up @@ -757,11 +791,76 @@ <h4 class="nhsuk-heading-s">Contact for peer discussion</h4>
Kerris is happy to discuss staff training and supplier experience.
</p>
</div>

</div>
</div>

</div>
</div>
{# ============================================ #}
{# EVIDENCE AND DOCUMENTATION #}
{# ============================================ #}
<div class="nhsuk-grid-row nhsuk-u-margin-bottom-6" id="evidence">
<div class="nhsuk-grid-column-two-thirds">

<hr class="nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-5">

<h2 class="nhsuk-heading-l">Evidence and documentation</h2>

<ul class="nhsuk-list">
<li class="nhsuk-u-margin-bottom-3">
<a href="#" class="nhsuk-link">
<strong>Instructions for use (IFU)</strong>
</a>
<br><span class="nhsuk-u-secondary-text-color nhsuk-body-s">PDF, 2.3MB · Supplier provided</span>
</li>
<li class="nhsuk-u-margin-bottom-3">
<a href="#" class="nhsuk-link">
<strong>Clinical evidence summary</strong>
</a>
<br><span class="nhsuk-u-secondary-text-color nhsuk-body-s">PDF, 890KB · Supplier provided</span>
</li>
<li class="nhsuk-u-margin-bottom-3">
<a href="#" class="nhsuk-link">
<strong>British Medical Journal - Clinical trial 2024</strong>
</a>
<br><span class="nhsuk-u-secondary-text-color nhsuk-body-s">External link · Peer-reviewed publication</span>
</li>
<li class="nhsuk-u-margin-bottom-3">
<a href="#" class="nhsuk-link">
<strong>Safety data sheet</strong>
</a>
<br><span class="nhsuk-u-secondary-text-color nhsuk-body-s">PDF, 1.1MB · Supplier provided</span>
</li>
</ul>

</div>
</div>

{# Contact Information Card #}
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
{% from "card/macro.njk" import card %}

{% set cardDescriptionHtml %}
<ul>
<li>you disagree with with something on this page</li>
<li>you have a query about something on this page</li>
<li>you would like to amend something on this page</li>

</ul>
<p>In all instances, contact the team on 0330 2234 776 or email: <a href="">enquiries@dhsc.gov.uk</a></p>
{% endset %}

<div id="contact">
{{ card({
type: "non-urgent",
heading: "You can contact us if:",
descriptionHtml: cardDescriptionHtml
}) }}
</div>
</div>
</div>

{# Back to Search #}
<div class="nhsuk-grid-row nhsuk-u-margin-top-8">
Expand Down