Skip to content

Add stacked horizontal product cards component #15095

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
charleycampbell merged 20 commits into from
Jan 26, 2026
+434 −10
Merged

Add stacked horizontal product cards component #15095

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
8811f74
Add StackedProducts component and story
emma-imber Jan 6, 2026
b4b577b
Only show first three products by default and add option to show all
emma-imber Jan 6, 2026
3ad0ec6
Add Show less and chevron icons
emma-imber Jan 6, 2026
b9e8eb6
Add card counter to bottom right corner
emma-imber Jan 6, 2026
041754f
Merge branch 'main' into ei/add-stacked-horizontal-cards
emma-imber Jan 7, 2026
d0e70a6
Use primaryHeadingText in horizontal cards
emma-imber Jan 7, 2026
b0cf6ec
Implement dark mode colours
emma-imber Jan 7, 2026
90985a7
Bigger gap between cards on mobile
emma-imber Jan 12, 2026
ccfbe86
Merge branch 'main' into ei/add-stacked-horizontal-cards
emma-imber Jan 13, 2026
c590c39
Make StackedProducts .importable
emma-imber Jan 14, 2026
bb06731
Add header to StackedProducts component
emma-imber Jan 19, 2026
0bbdef5
Move card counter to top of component
emma-imber Jan 19, 2026
0bf1e3a
Adjust header spacing
emma-imber Jan 19, 2026
8ea9bba
Use LinkButton for Show all/Show less
emma-imber Jan 20, 2026
6e72ec5
Merge branch 'main' into ei/add-stacked-horizontal-cards
emma-imber Jan 20, 2026
3ebbc89
Add click tracking to cards
emma-imber Jan 21, 2026
1323ead
Update read more styling on hover to reflect updated design
emma-imber Jan 21, 2026
1231e91
Track read more clicks with a separate data-component
emma-imber Jan 21, 2026
25b7cb7
Align card count with heading
emma-imber Jan 22, 2026
541f5e9
Merge branch 'main' into ei/add-stacked-horizontal-cards
oliverabrahams Jan 26, 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
271 changes: 271 additions & 0 deletions dotcom-rendering/fixtures/manual/productBlockElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,3 +242,274 @@ export const exampleProduct: ProductBlockElement = {
},
],
};

export const exampleAtAGlanceProductArray: ProductBlockElement[] = [
{
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
elementId: 'b85ec38b-091b-40c2-8902-a9114df3cfe3',
primaryHeadingHtml: '<em>Best running watch for beginners:</em>',
primaryHeadingText: extractHeadingText(
'<em>Best running watch for beginners:</em>',
),
secondaryHeadingHtml: 'Garmin Forerunner 55',
brandName: 'Garmin',
productName: 'Forerunner 55',
image: {
url: 'https://media.guim.co.uk/7bf8bdea17b8d7e3f0b9aef1aa88d94737d4bdf3/0_0_725_725/725.jpg',
caption:
'Garmin Forerunner 55 GPS 42mm Running Smartwatch, Easy to use, Lightweight, Training Guidance, Safety & Tracking Features, Black',
height: 725,
width: 725,
alt: '',
credit: 'Photograph: PR Image',
displayCredit: false,
},
displayType: 'InlineWithProductCard',
customAttributes: [],
productCtas: [
{
url: 'https://www.decathlon.co.uk/p/garmin-forerunner-55-gps-watch-black/341619/m8758300',
text: '',
retailer: 'Decathlon',
price: '£179.99',
},
{
url: 'https://www.amazon.co.uk/Garmin-Forerunner-Lightweight-Smartwatch-Training/dp/B0953X73TP?th=1',
text: '',
retailer: 'Amazon',
price: '£122.49',
},
],
starRating: 'none-selected',
content: [],
},
{
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
elementId: '1cb32565-86fa-4d95-a944-de49a065e71e',
primaryHeadingHtml: '<em>Best budget running watch:</em>',
primaryHeadingText: extractHeadingText(
'<em>Best budget running watch:</em>',
),
secondaryHeadingHtml: 'Suunto Run',
brandName: 'Suunto',
productName: 'Run',
image: {
url: 'https://media.guim.co.uk/ecc054be145a6e5b3c6fca3694f9b4cbea5078b1/0_0_725_725/725.jpg',
caption: 'SUUNTO RUN All Black GPS Sport and Running Watch',
height: 725,
width: 725,
alt: '',
credit: 'Photograph: PR Image',
displayCredit: false,
},
displayType: 'InlineWithProductCard',
customAttributes: [],
productCtas: [
{
url: 'https://www.sportsshoes.com/product/suu151/suunto-run-gps-watch',
text: '',
retailer: 'SportsShoes',
price: '£174.99',
},
{
url: 'https://www.suunto.com/en-gb/Products/sports-watches/suunto-run/suunto-run-all-black-with-silicone-strap',
text: '',
retailer: 'Suunto',
price: '£199',
},
],
starRating: 'none-selected',
content: [],
},
{
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
elementId: '43670bc5-00f2-460d-853e-3e6e0bf205c5',
primaryHeadingHtml: '<em>Best mid-range running watch:</em>',
primaryHeadingText: extractHeadingText(
'<em>Best mid-range running watch:</em>',
),
secondaryHeadingHtml: 'Coros Pace Pro',
brandName: 'Coros',
productName: 'Pace Pro',
image: {
url: 'https://media.guim.co.uk/33599323a25a435d3a5647cc9906d2b011f6763e/0_0_725_725/725.jpg',
caption: 'COROS PACE Pro GPS Sport Watch Black',
height: 725,
width: 725,
alt: '',
credit: 'Photograph: PR Image',
displayCredit: false,
},
displayType: 'InlineWithProductCard',
customAttributes: [],
productCtas: [
{
url: 'https://healf.com/en-uk/products/coros-coros-pace-pro-gps-sport-watch-black',
text: '',
retailer: 'Healf',
price: '£299',
},
{
url: 'https://www.myprotein.com/p/sports-accessories/coros-pace-pro-gps-sport-watch-black-one-size/16889572/',
text: '',
retailer: 'Myprotein',
price: '£299',
},
],
starRating: 'none-selected',
content: [],
},
{
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
elementId: '830b3256-bd3a-4fc2-a4a3-6d42fcf0467f',
primaryHeadingHtml: '<em>Best-looking mid-range running watch:</em>',
primaryHeadingText: extractHeadingText(
'<em>Best-looking mid-range running watch:</em>',
),
secondaryHeadingHtml: 'Suunto Race 2',
brandName: 'Suunto',
productName: 'Race 2',
image: {
url: 'https://media.guim.co.uk/c9f1e864f353555555af61c83f4fe5acf01be95b/0_0_725_725/725.jpg',
caption: 'Suunto Race 2',
height: 725,
width: 725,
alt: '',
credit: 'Photograph: PR Image',
displayCredit: false,
},
displayType: 'InlineWithProductCard',
customAttributes: [],
productCtas: [
{
url: 'https://www.sportsshoes.com/product/suu123/suunto-race-2-gps-watch---ss26',
text: '',
retailer: 'SportsShoes',
price: '£429',
},
{
url: 'https://www.suunto.com/en-gb/Products/sports-watches/suunto-race-2/suunto-race-2-all-black/',
text: '',
retailer: 'Suunto',
price: '£429',
},
],
starRating: 'none-selected',
content: [],
},
{
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
elementId: '407575ba-5898-4995-a94b-f7ab624c60de',
primaryHeadingHtml: '<em>The best running watch money can buy:</em>',
primaryHeadingText: extractHeadingText(
'<em>The best running watch money can buy:</em>',
),
secondaryHeadingHtml: 'Garmin Forerunner 970',
brandName: 'Garmin',
productName: 'Forerunner 970',
image: {
url: 'https://media.guim.co.uk/5d6f01a3ac82c8f4208e47f6645034b7155c704b/0_0_725_725/725.jpg',
caption: 'Forerunner 970 GPS Smartwatch',
height: 725,
width: 725,
alt: '',
credit: 'Photograph: PR Image',
displayCredit: false,
},
displayType: 'InlineWithProductCard',
customAttributes: [],
productCtas: [
{
url: 'https://www.blacks.co.uk/19695870/garmin-forerunner-970-gps-watch-19695870/6206138',
text: '',
retailer: 'Blacks',
price: '£579',
},
{
url: 'https://www.cotswoldoutdoor.com/p/garmin-forerunner-970-gps-smartwatch-B3BG3B0054.html',
text: '',
retailer: 'Cotswold Outdoor',
price: '£629.99',
},
],
starRating: 'none-selected',
content: [],
},
{
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
elementId: 'd7de82bb-fd1c-4efb-a54d-9844156db9e5',
primaryHeadingHtml: '<em>Best running watch for battery life:</em>',
primaryHeadingText: extractHeadingText(
'<em>Best running watch for battery life:</em>',
),
secondaryHeadingHtml: 'Garmin Enduro 3',
brandName: 'Garmin',
productName: 'Enduro 3',
image: {
url: 'https://media.guim.co.uk/4ca5935158967c6b2d1a91fabca27ec20a52ef96/0_0_725_725/725.jpg',
caption: 'Garmin Enduro 3 DLC Titanium GPS Watch',
height: 725,
width: 725,
alt: '',
credit: 'Photograph: PR Image',
displayCredit: false,
},
displayType: 'InlineWithProductCard',
customAttributes: [],
productCtas: [
{
url: 'https://www.sportsshoes.com/product/gar340/garmin-enduro-3-sapphire-gps-watch',
text: '',
retailer: 'SportsShoes',
price: '£615.99',
},
{
url: 'https://www.millets.co.uk/19656651/garmin-enduro-3-gps-smartwatch-19656651/5930679/',
text: '',
retailer: 'Millets',
price: '£649',
},
],
starRating: 'none-selected',
content: [],
},
{
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
elementId: 'c75a0b5a-929e-4550-a146-ccc080c76655',
primaryHeadingHtml: '<em>Best running watch with LTE/satellite:</em>',
primaryHeadingText: extractHeadingText(
'<em>Best running watch with LTE/satellite:</em>',
),
secondaryHeadingHtml: 'Garmin Fenix 8 Pro',
brandName: 'Garmin',
productName: 'Fenix 8 Pro',
image: {
url: 'https://media.guim.co.uk/719acb5d276ed7d64f889ee5a031cfd8d945db67/0_0_725_725/725.jpg',
caption:
'Garmin\nfēnix 8 Pro AMOLED GPS Multisport Smartwatch, Graphite, 47mm',
height: 725,
width: 725,
alt: '',
credit: 'Photograph: PR Image',
displayCredit: false,
},
displayType: 'InlineWithProductCard',
customAttributes: [],
productCtas: [
{
url: 'https://www.sportsshoes.com/product/gar354/garmin-fenix-8-pro-amoled-sapphire--(47mm)-gps-watch---aw25',
text: '',
retailer: 'SportsShoes',
price: '£875.49',
},
{
url: 'https://www.johnlewis.com/garmin-fenix-8-pro-amoled-gps-multisport-smartwatch-graphite/p114305025',
text: '',
retailer: 'John Lewis',
price: '£991.57',
},
],
starRating: 'none-selected',
content: [],
},
];
24 changes: 14 additions & 10 deletions dotcom-rendering/src/components/HorizontalSummaryProductCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
textSansBold15,
textSansBold17,
} from '@guardian/source/foundations';
import { Link } from '@guardian/source/react-components';
import type { ArticleFormat } from '../lib/articleFormat';
import { palette } from '../palette';
import type { ProductBlockElement } from '../types/content';
Expand Down Expand Up @@ -54,10 +55,12 @@ const buttonContainer = css`

const readMore = css`
${textSansBold15};
text-decoration-line: underline;
text-decoration-color: ${palette('--product-card-read-more-decoration')};
color: ${palette('--product-card-read-more')};
text-underline-offset: 20%;
:hover {
color: ${palette('--product-card-read-more')};
text-decoration-color: ${palette('--product-card-read-more')};
}
`;

const productCardHeading = css`
Expand Down Expand Up @@ -94,16 +97,17 @@ export const HorizontalSummaryProductCard = ({
/>
</div>
<div css={informationContainer}>
<div
css={productCardHeading}
dangerouslySetInnerHTML={{
__html: product.primaryHeadingHtml,
}}
></div>
<div css={productCardHeading}>{product.primaryHeadingText}</div>
<div css={secondaryHeading}>{product.secondaryHeadingHtml}</div>
<a href={`#${product.h2Id}`} css={readMore}>
<Link
href={`#${product.h2Id}`}
onFocus={(event) => event.stopPropagation()}
cssOverrides={readMore}
data-component="at-a-glance-stacked-card-read-more"
data-link-name="product read more link"
>
Read more
</a>
</Link>
<div css={price}>{cardCta.price}</div>
</div>
<div css={buttonContainer}>
Expand Down
Loading
Loading