/* Gallery: a row of slides, each with a little text on the left and an image on the right (Figma "Techincal Gallery Slide"), on a transparent background.
The row's height is FIXED (--gallery-image-h, 480px; it only grows if a slide's text is taller), and every slide is that tall; each image is scaled to
the height and its container is exactly as wide as the image, so nothing is cropped or stretched. js/gallery.js sets --gallery-h on the row.
If the slides are wider than the page the row scrolls sideways. A pager (one slot per slide) is added under the row, and the row loops.
Stacked variant: add .gallery--stacked and the text block sits ABOVE the picture (same markup). The picture is still the fixed height and the slide as wide as the picture
(the text wraps to that width); the row is as tall as the tallest text + 20px + the picture.
Add .gallery--noloop for a row that stops at the first and last slide (no looping, no copies); the pager and snapping still work.
On a dark section (.cs-section--dark) the divider, text and pager switch to the light grey automatically.
V7Prototype
Tested: …
(as many optional paragraphs as needed)
Give each its width and height attributes (the file's pixel size) so the page does not jump while it loads.
Load js/gallery.js (plain script) once per page.
Add .gallery--full to let the row span the full width of the screen: it breaks out of the page container, the first slide still lines up with the
container's left edge, and the row scrolls to the screen's right edge.
On touch devices (phones, tablets) the row is dragged freely: continuously, with momentum and no snapping, so a wide picture can be looked at by dragging along it; it still loops.
Dragging: the row can be dragged with the mouse (js/gallery.js). When you let go it always snaps so that a slide's left edge sits on the page
container's left edge. The row loops: the last slide sits to the left of the first. Touch swipes and trackpad scrolling snap the same way. The scrollbar is hidden, and the pictures cannot be picked up and dragged away on their own, so a drag always moves the row. */
.gallery {
position: relative; display: flex; align-items: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
scrollbar-width: none; -ms-overflow-style: none; /* no native scrollbar */
scroll-snap-type: x mandatory;
cursor: grab; -webkit-tap-highlight-color: transparent;
touch-action: pan-y; /* a finger's sideways drag is handled by js/gallery.js; vertical swipes still scroll the page. (Just pan-y: Safari ignores the whole declaration if it also says pinch-zoom, and then takes over the drag after a few pixels.) */
height: var(--gallery-h, auto); /* set by js/gallery.js */
}
.gallery::-webkit-scrollbar { display: none; }
.gallery.is-free { scroll-snap-type: none; } /* touch devices: dragged freely, never snapped (js/gallery.js) */
.gallery.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.gallery.is-moving { scroll-snap-type: none; } /* while the script slides the row into place */
.gallery__end { flex: none; height: 1px; } /* extra room added by js/gallery.js so the last slide can reach the left edge */
.gallery-slide {
flex: none; display: flex; gap: var(--space-5); padding-right: var(--space-5);
position: relative; padding-left: calc(var(--space-5) + 2px); /* 2px for the divider + the 20px padding */
height: var(--gallery-h, auto); background: transparent; /* the page colour shows through (the white in Figma is just the canvas) */
scroll-snap-align: start; scroll-snap-stop: always; /* a swipe or trackpad flick cannot skip past a slide */
}
.gallery-slide::before { /* dashed divider on the left: a 2px line, dashes 2px long with 2px gaps (a CSS dashed border would not match the Figma) */
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: repeating-linear-gradient(to bottom, rgba(63, 63, 63, .5) 0 2px, transparent 2px 4px);
}
.gallery-slide__info { flex: none; width: 280px; display: grid; gap: 30px; align-self: start; padding-bottom: var(--space-5); }
.gallery-slide__info > * { margin: 0; }
.gallery-slide__info > .t-body { text-box: trim-both cap alphabetic; color: var(--color-ink); }
.gallery-slide__image { flex: none; height: 100%; }
.gallery-slide__image > img, .gallery-slide__image > video { display: block; height: 100%; width: auto; max-width: none; pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } /* the width follows the picture's shape */
.gallery--full {
--gallery-edge: max(var(--gutter), calc((100vw - var(--container)) / 2)); /* where the container's edge is */
width: 100vw; margin-left: calc(50% - 50vw);
padding-inline: var(--gallery-edge); scroll-padding-inline: var(--gallery-edge);
}
/* Title above the row (H3) and the pager under it, centred in the page container. Both are siblings of .gallery inside the same container.
Research phases
*/
.gallery__title { margin: 0 0 30px; color: var(--color-headline); }
.gallery__pager { justify-content: center; margin-top: var(--space-8); }
/* Dark section: light grey text, divider and pager (the same light grey as the other text on the dark section) */
.cs-section--dark .gallery__title { color: var(--color-type-sample); }
.cs-section--dark .gallery-slide::before { background: repeating-linear-gradient(to bottom, rgba(217, 217, 217, .5) 0 2px, transparent 2px 4px); }
.cs-section--dark .gallery-slide__info > .t-body { color: var(--color-type-sample); }
.cs-section--dark .pager__item { color: var(--color-type-sample); }
.cs-section--dark .pager__item[aria-current="true"] { background: var(--color-type-sample); color: var(--color-case-dark); }
.cs-section--dark .pager__item:focus-visible { outline-color: var(--color-type-sample); }
/* Stacked variant: text block above the picture */
.gallery--stacked .gallery-slide { flex-direction: column; }
.gallery--stacked .gallery-slide__info { width: 0; min-width: 100%; } /* the picture sets the slide's width; the text wraps to it */
.gallery--stacked .gallery-slide__image { height: var(--gallery-image-h); margin-top: auto; } /* pictures sit on the bottom of the (equally tall) slides, so they line up even when one slide's label wraps onto two lines */
/* One-slide gallery (js/gallery.js adds .gallery--single): no loop, no drag, no pager. */
.gallery--single { cursor: auto; scroll-snap-type: none; }
.gallery--single.is-wide { cursor: grab; } /* wider than the screen: drag it along (js/gallery.js) */
.gallery--single.is-wide.is-dragging { cursor: grabbing; }
/* A phone in a slide: the box takes the phone's own shape at the row height. For a taller row set --gallery-image-h on that gallery (e.g. style="--gallery-image-h:610px"). */
.gallery-slide__image > .phone { height: 100%; }
/* A title above a gallery, with a gallery under it, one after another: 160px between a gallery (or its pager) and the next title; and a large image after them is 160px down. */
.cs-stat-row + .gallery__title { margin-top: var(--cs-row-gap); }
.gallery + .gallery__title, .gallery__pager + .gallery__title, .large-image + .gallery__title { margin-top: 160px; }
.gallery--single + .large-image { margin-top: 160px; }
/* Two pictures in ONE slide, side by side 10px apart, both at the row's height (the slide is as wide as the two together):
*/
.gallery-slide__image--pair { display: flex; gap: 10px; }
/* Plain variant (.gallery--plain): no dashed divider and no slide padding, for a row that is just a picture (or a few) running off the screen edge, e.g. the M&S dashboard row. Use ONE slide
so there is no loop or pager. A slide's picture can hold several things side by side (.gallery-slide__image--row: 70px apart, centred up and down; a phone takes the full row height and a
picture 80% of it):
…
*/
.gallery--plain .gallery-slide { padding-inline: 0; }
.gallery--plain .gallery-slide::before { display: none; }
.gallery-slide__image--row { display: flex; align-items: center; gap: 70px; }
.gallery-slide__image--row > img { flex: none; height: calc(var(--gallery-image-h, 480px) * 0.8); width: auto; } /* (a fixed height from the row height: a percentage made the browser size it from the wrong height) */
/* Bleed-left (.gallery--bleed-left, with .gallery--plain): the row starts at the SCREEN's left edge instead of the container's, with a tail piece in the space to the left of the first thing
(the container edge less 70px, showing the right-hand end of a long picture) so the strip runs off both sides of the screen. The first thing in the slide still lines up with the container edge.