@deriv-com/dds-marketing 1.0.2 → 1.1.0

package/dist/components/blocks/feature-stack/FeatureStack.types.js

@@ -0,0 +1,14 @@
+// GENERATED from feature-stack.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const featureStackParts = {
+    root: 'dds-featurestack',
+    inner: 'dds-featurestack__inner',
+    header: 'dds-featurestack__header',
+    title: 'dds-featurestack__title',
+    description: 'dds-featurestack__description',
+    link: 'dds-featurestack__link',
+    media: 'dds-featurestack__media',
+    image: 'dds-featurestack__image',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const featureStackDefaults = { ground: 'page' };

package/dist/components/blocks/feature-stack/feature-stack-impl.css

@@ -0,0 +1,87 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * From the fold, the words are centred over the picture.
+ *
+ * FeatureCards' rule and its reason: content stacked under a heading takes a centred heading. The
+ * header and its line are capped narrower than the column, so `margin-inline: auto` centres those
+ * boxes rather than their words inside a box left at the start edge; the link centres with them.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition, and it is the
+ * width the rest of this package folds at.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__link {
+    justify-content: center;
+  }
+}
+
+/*
+ * A heading with nothing under it closes up: its bound step is the distance to the line, and with
+ * nothing there it would only add to the step from the words to the picture. `:last-child` is the
+ * condition itself, DataTable's way, rather than a prop standing in for it.
+ */
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * The illustration stands on the section's foot.
+ *
+ * It reaches down through the section's own bottom padding to the band's edge, so the picture
+ * stands on the band rather than floating above the next one — the reference design's globe, which
+ * the band ends on. space.section.default is the inner's padding, given back.
+ */
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__media {
+  margin-block-end: calc(-1 * var(--space-section-default));
+}
+
+/*
+ * The picture keeps its own shape; the screen only decides how tall it may grow.
+ *
+ * The frame wraps the picture rather than a box the block chose: as wide as the picture's shape
+ * allows, up to the column, and centred. The picture shows at its own proportions — a square stays
+ * square, a landscape stays landscape — so a page that brings a 1:1 picture gets a 1:1 picture,
+ * whatever shape the block's own example is. What changes with the screen is the tallest it may be:
+ * aspect.portrait of the column on a phone, where the column is narrow and a portrait is what fills
+ * it; aspect.landscape of its widest from the fold, so a band never becomes a picture with a heading
+ * on top. A picture past that limit is drawn smaller, keeping its shape, never cropped.
+ *
+ * The limits are aspect.portrait (4:5) and aspect.landscape (4:3) said as factors, 1.25 and 0.75 —
+ * a ratio token is a pair, and a height has to be a length. `100cqi` is the section's width, the
+ * root declaring `container-type`; the column is that less the page gutter each side.
+ *
+ * `47.9375rem` is the last width below the fold, LogoRows' bound.
+ */
+/* Set on the frame rather than the section: a container query styles what is inside the container,
+   never the container itself, so the section could not take the fold's value. */
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__media {
+  --dds-featurestack-column: calc(100cqi - 2 * var(--space-inset-page));
+  --dds-featurestack-tallest: calc(var(--dds-featurestack-column) * 1.25);
+  inline-size: fit-content;
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__media {
+    --dds-featurestack-tallest: calc(min(var(--dds-featurestack-column), var(--size-feature-stack-media)) * 0.75);
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__image {
+  block-size: auto;
+  inline-size: auto;
+  max-block-size: var(--dds-featurestack-tallest);
+  max-inline-size: 100%;
+}

package/dist/components/blocks/image-banner/ImageBanner.css

@@ -0,0 +1,133 @@
+/* GENERATED from imagebanner.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-imagebanner {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__card {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  overflow: clip;
+  position: relative;
+  border-radius: var(--radius-container);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__content {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-inline-size: 0;
+  position: relative;
+  padding-block: var(--space-inset-card);
+  padding-inline: var(--space-inset-card);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__title {
+  margin-block: 0;
+  text-wrap: balance;
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  margin-block-end: var(--space-heading-description-actions);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__action {
+  display: flex;
+  column-gap: var(--space-actions-gap);
+  row-gap: var(--space-actions-gap);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__media {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  overflow: clip;
+  position: relative;
+  border-radius: var(--radius-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-media-position="end"] .dds-imagebanner__card {
+  flex-direction: row;
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-media-position="start"] .dds-imagebanner__card {
+  flex-direction: row-reverse;
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-ground="page"] .dds-imagebanner__card {
+  background-color: var(--color-bg-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-ground="strong"] .dds-imagebanner__card {
+  background-color: var(--color-bg-surface-card-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-ground="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-ground="subtle"] .dds-imagebanner__card {
+  background-color: var(--color-bg-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__title {
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="split"] .dds-imagebanner__media {
+  aspect-ratio: var(--aspect-landscape);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="split"] .dds-imagebanner__title {
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+

package/dist/components/blocks/image-banner/ImageBanner.d.ts

@@ -0,0 +1,32 @@
+import './ImageBanner.css';
+import './image-banner-impl.css';
+import '../block-reveal.css';
+import { type ImageBannerProps } from './ImageBanner.types.js';
+export type { ImageBannerProps };
+/**
+ * A dark card in the middle of a page, pairing a headline and a line under it with a photograph.
+ *
+ * The reference site's ImageBanner, and two of its layouts are `variant`: the photograph beside the
+ * words (split) or behind them (cover), each with one action. The reference's third, a collage
+ * beside a row of checked features with no action, is not offered: a set of features is a list a
+ * page composes, and FeatureBullets is that.
+ *
+ * The reference wrote each layout twice, `-left` and `-right`. Here that is `mediaPosition`, start
+ * and end, which is the axis FeatureSplit already names and the one a mirrored page reads without
+ * translating. The reference also ranged the words to the far edge on its right-hand layouts; they
+ * start here on either side, because a heading beside its content starts with it.
+ *
+ * The card is dark on every ground, which is what the block is for. `ground` paints the band around
+ * it the way every block's does, and on the dark band the card steps up to the strong card fill so
+ * it still reads as a card.
+ *
+ *
+ * The photograph is the page's. It is not hidden from assistive technology the way FeatureSplit's
+ * is: the reference asks for alt text where the photograph means something, so the page says
+ * whether it does, with an empty alt where it does not.
+ *
+ * It arrives the way every block does — the headline, the line, then the action, and
+ * the photograph after them. A cover photograph is the card's ground rather than a part of what it
+ * says, so it is there from the start and only the words arrive over it.
+ */
+export declare function ImageBanner({ ground, variant, mediaPosition, parallax, title, headingLevel, description, action, media, }: ImageBannerProps): import("react").JSX.Element;

package/dist/components/blocks/image-banner/ImageBanner.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './ImageBanner.css';
+import './image-banner-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { imageBannerDefaults, imageBannerParts } from './ImageBanner.types.js';
+/**
+ * A dark card in the middle of a page, pairing a headline and a line under it with a photograph.
+ *
+ * The reference site's ImageBanner, and two of its layouts are `variant`: the photograph beside the
+ * words (split) or behind them (cover), each with one action. The reference's third, a collage
+ * beside a row of checked features with no action, is not offered: a set of features is a list a
+ * page composes, and FeatureBullets is that.
+ *
+ * The reference wrote each layout twice, `-left` and `-right`. Here that is `mediaPosition`, start
+ * and end, which is the axis FeatureSplit already names and the one a mirrored page reads without
+ * translating. The reference also ranged the words to the far edge on its right-hand layouts; they
+ * start here on either side, because a heading beside its content starts with it.
+ *
+ * The card is dark on every ground, which is what the block is for. `ground` paints the band around
+ * it the way every block's does, and on the dark band the card steps up to the strong card fill so
+ * it still reads as a card.
+ *
+ *
+ * The photograph is the page's. It is not hidden from assistive technology the way FeatureSplit's
+ * is: the reference asks for alt text where the photograph means something, so the page says
+ * whether it does, with an empty alt where it does not.
+ *
+ * It arrives the way every block does — the headline, the line, then the action, and
+ * the photograph after them. A cover photograph is the card's ground rather than a part of what it
+ * says, so it is there from the start and only the words arrive over it.
+ */
+export function ImageBanner({ ground = imageBannerDefaults.ground, variant = imageBannerDefaults.variant, mediaPosition = imageBannerDefaults.mediaPosition, parallax = imageBannerDefaults.parallax, title, headingLevel = imageBannerDefaults.headingLevel, description, action, media, }) {
+    const titleId = useId();
+    const Title = headingLevel;
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: imageBannerParts.root, "data-ground": ground, "data-variant": variant, "data-media-position": mediaPosition, "data-parallax": parallax, "aria-labelledby": titleId, children: _jsx("div", { className: imageBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: imageBannerParts.card, children: [_jsxs("div", { className: imageBannerParts.content, children: [_jsx(Title, { className: imageBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: imageBannerParts.description, ...arriving(1), children: description })) : null, action ? (_jsx("div", { className: imageBannerParts.action, ...arriving(2), children: action })) : null] }), _jsx("div", { className: imageBannerParts.media, ...(variant === 'cover' ? {} : arriving(3)), children: media })] }) }) }));
+}

package/dist/components/blocks/image-banner/ImageBanner.types.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+export interface ImageBannerOwnProps {
+    /**
+     * `page` — The default, and the page's own white, with the dark card set into it. Most of the time: the card is already the break
+     * `subtle` — The grey band, for a card that follows a white section the page wants told apart from this one. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
+     * `strong` — `color.bg.brand-strong`, the dark band, with the card a step lighter at color.bg.surface-card-strong so it still reads as a card. For a page whose dark band is already here and wants the card inside it
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `split` — The default. The words in one half and the photograph filling the other, edge to edge, with one action under the words. On a phone the card runs the width of the screen and the photograph stacks with the words
+     * `cover` — The photograph fills the whole card, with the words over it behind a scrim that darkens the side they are on and leaves the photograph clear on the other. For a photograph wide enough to be the band rather than half of it
+     */
+    variant?: 'split' | 'cover';
+    /**
+     * `end` — The default. The words lead and the photograph follows, which is the order the card argues in
+     * `start` — The photograph leads — the second of two cards on a page, or a photograph whose subject faces the words. A split card puts it above the words on a phone as well, as the reference design does
+     */
+    mediaPosition?: 'end' | 'start';
+    /** Always. The one thing the card says, in under eight words — "Join our global community". */
+    title: string;
+    /**
+     * `h2` — The default: the card is a section of the page, under the page's own h1
+     * `h3` — The card sits inside a section that already carries the h2 it belongs to
+     */
+    headingLevel?: 'h2' | 'h3';
+    /** The line under the headline saying what it means for the reader, in one or two sentences. */
+    description?: string;
+    /** The one thing the card asks for. The card is dark in both themes, so a Button here takes tone="inverse": the primary is the coral fill and it is the card's one primary. On a phone it fills the width of the card. */
+    action?: ReactNode;
+    /** Always. The page's photograph, through AspectRatio or as an image — people or product. Split and cover crop it to fill the space they give it. Alt text is the page's to give, empty where the photograph is decoration. */
+    media: ReactNode;
+    /** The photograph drifts against the scroll as the card passes through the view, by motion.distance.drift over the whole pass, so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. For a careers or about page, where the photograph of the people is the point. Off by default: a card selling one action does not need its picture moving under the button. */
+    parallax?: boolean;
+}
+export type ImageBannerProps = ImageBannerOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const imageBannerParts: {
+    readonly root: "dds-imagebanner";
+    readonly inner: "dds-imagebanner__inner";
+    readonly card: "dds-imagebanner__card";
+    readonly content: "dds-imagebanner__content";
+    readonly title: "dds-imagebanner__title";
+    readonly description: "dds-imagebanner__description";
+    readonly action: "dds-imagebanner__action";
+    readonly media: "dds-imagebanner__media";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const imageBannerDefaults: {
+    readonly ground: "page";
+    readonly variant: "split";
+    readonly mediaPosition: "end";
+    readonly headingLevel: "h2";
+    readonly parallax: false;
+};

package/dist/components/blocks/image-banner/ImageBanner.types.js

@@ -0,0 +1,14 @@
+// GENERATED from image-banner.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const imageBannerParts = {
+    root: 'dds-imagebanner',
+    inner: 'dds-imagebanner__inner',
+    card: 'dds-imagebanner__card',
+    content: 'dds-imagebanner__content',
+    title: 'dds-imagebanner__title',
+    description: 'dds-imagebanner__description',
+    action: 'dds-imagebanner__action',
+    media: 'dds-imagebanner__media',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const imageBannerDefaults = { ground: 'page', variant: 'split', mediaPosition: 'end', headingLevel: 'h2', parallax: false };

package/dist/components/blocks/image-banner/image-banner-impl.css

@@ -0,0 +1,281 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ */
+
+/*
+ * A title with nothing under it carries no step under it.
+ *
+ * The steps inside the column sit on each part's own `margin-block-end`, as FeatureSplit's do,
+ * because title-to-description and description-to-what-follows are two roles. With nothing after
+ * the title or the line, that step is measured against nothing, so the last of them drops it.
+ */
+:where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__title:last-child,
+:where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__description:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * One column below the fold.
+ *
+ * The row direction is the contract's to say, and the generated sheet carries both values. What is
+ * left here is the fold, which `structure` has no width to attach to. Written an attribute deeper
+ * than the generated rule — `.dds-imagebanner[data-media-position="end"] .dds-imagebanner__card` —
+ * so it wins however the two sheets are ordered.
+ *
+ * The words lead, except on a split card whose photograph was asked to lead: the reference design
+ * puts that photograph above the words on a phone as well, which is the one place this block
+ * differs from FeatureSplit's words-first fold.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition, and it is the
+ * width the rest of this package folds at.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"])
+    .dds-imagebanner[data-variant][data-media-position]
+    .dds-imagebanner__card {
+    flex-direction: column;
+  }
+
+  :where([data-dds-context="marketing"])
+    .dds-imagebanner[data-variant="split"][data-media-position="start"]
+    .dds-imagebanner__card {
+    flex-direction: column-reverse;
+  }
+
+  /*
+   * A split or cover card runs the width of a phone, as the reference design's does: the gutter
+   * goes, and so do the corners, which at the screen's edge would round into nothing.
+   */
+  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__inner {
+    padding-inline: 0;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__card {
+    border-radius: var(--radius-none);
+  }
+
+  /*
+   * The action fills the card's width on a phone, and the row is what does it: it becomes a column
+   * and stretches what it holds, so the Button is full width here and its own size from the fold.
+   * That is the package's rule for a section's actions, a single one included.
+   */
+  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__action {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__action > * {
+    inline-size: 100%;
+  }
+
+}
+
+/*
+ * The words take half the card at full width and the photograph the rest.
+ *
+ * Split is side by side from the fold. It stretches the photograph to the card's height and asks a
+ * height of the card, size.image-banner.card, so a short line beside a wide photograph is still a
+ * band rather than a strip; the landscape ratio the phone uses is let go, since the card now decides
+ * the photograph's shape.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__content {
+    flex: 1 1 0;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="split"] .dds-imagebanner__card {
+    min-block-size: var(--size-image-banner-card);
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant] .dds-imagebanner__media {
+    flex: 1 1 0;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="split"] .dds-imagebanner__media {
+    aspect-ratio: auto;
+  }
+
+  /*
+   * The cover card's words hold three fifths of it, on the side away from where the photograph
+   * shows clear — the reference design's measure.
+   */
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content {
+    flex: 0 1 60%;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant] .dds-imagebanner__action {
+    align-items: center;
+    flex-direction: row;
+  }
+}
+
+/*
+ * More room inside the card once it is a desktop's width, as the reference design gives it.
+ */
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__content {
+    padding: var(--space-inset-2xl);
+  }
+}
+
+/*
+ * Whatever the page put in a split photograph fills it.
+ *
+ * The slot takes a node, so what arrives is the page's element — an AspectRatio box or an image —
+ * and this cannot know whether it carries dimensions. `cover`, because the half is a shape the card
+ * decided on and a photograph letterboxed in it would show the card through the gaps.
+ */
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="split"] .dds-imagebanner__media > *,
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="split"] .dds-imagebanner__media img,
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__media > *,
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__media img {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+/*
+ * Bare media is a block; a component keeps its own display.
+ *
+ * `display: block` is for what arrives as a raw element — an image, a video, an inline SVG — which
+ * sits on a text baseline otherwise and leaves a gap under it. Written at no weight at all, so a
+ * component the page placed here — an IllustrationScene, whose grid lays its pane over its photo —
+ * keeps the display its own sheet gives it. In the rule above, a class deeper than the component's
+ * root, it turned the scene's grid into a block, and the pane fell below the photo and was clipped.
+ */
+:where([data-dds-context="marketing"] .dds-imagebanner .dds-imagebanner__media > *, [data-dds-context="marketing"] .dds-imagebanner .dds-imagebanner__media img) {
+  display: block;
+}
+
+
+/*
+ * The cover photograph is the card's ground: it fills the card behind the words, and the words are
+ * stacked over it. A stacking order is an integer, which is why it is here rather than bound.
+ *
+ * The card asks a height so the photograph has somewhere to show, size.image-banner.card at every
+ * width — the reference design's band.
+ */
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__card {
+  min-block-size: var(--size-image-banner-card);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__media {
+  inset: 0;
+  position: absolute;
+  z-index: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content {
+  z-index: 1;
+}
+
+/*
+ * The scrim over the cover photograph, darkest where the words are.
+ *
+ * color.bg.overlay held across the whole of the words' column — three fifths of the card, the
+ * content's share — so white body copy keeps AA over even a pale photograph; then
+ * color.bg.overlay-subtle, the role for an image overlay, and clear at the far side, so the
+ * photograph shows where nothing is written on it. Darkest only at the words' edge was not enough:
+ * over a light photograph the end of a line of copy sat at about 2:1.
+ * On a phone the words are at the top across the whole width, so the scrim runs down rather than
+ * across.
+ *
+ * A gradient takes a physical direction — there is no `to inline-end` — so the direction is a
+ * custom property set once per case: toward the photograph's side, and mirrored under `:dir(rtl)`,
+ * which is the package's rule for a pattern that must follow the reading direction. Set on the
+ * photograph rather than the section, because a container query styles what is inside the
+ * container and never the container itself.
+ *
+ * The words need no rule to change sides: the photograph is out of flow behind them, so the row
+ * `mediaPosition` sets holds the words alone, at the start or, reversed, at the end.
+ */
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__media::after {
+  background-image: linear-gradient(
+    var(--dds-imagebanner-scrim-toward, to bottom),
+    var(--color-bg-overlay),
+    var(--color-bg-overlay) 60%,
+    var(--color-bg-overlay-subtle) 80%,
+    transparent
+  );
+  content: '';
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="end"] .dds-imagebanner__media {
+    --dds-imagebanner-scrim-toward: to right;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"] .dds-imagebanner__media {
+    --dds-imagebanner-scrim-toward: to left;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="end"]:dir(rtl) .dds-imagebanner__media {
+    --dds-imagebanner-scrim-toward: to left;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"]:dir(rtl) .dds-imagebanner__media {
+    --dds-imagebanner-scrim-toward: to right;
+  }
+}
+
+/*
+ * `parallax`: the photograph drifts against the scroll as the card passes through the view — the
+ * reference design's ParallaxBanner, folded in here as an option on the split and cover cards.
+ *
+ * The photograph is drawn taller than its frame by the drift, half above and half below, so the
+ * movement never shows an edge at either end; the frame clips it. The image itself is the thing
+ * that moves, so the frame keeps its size and the card its layout.
+ *
+ * Scroll-driven, the way LogoColumns moves its wall: the frame names a view timeline and the image
+ * runs down it from half the drift above centre to half below, over the whole pass (`cover`), so as
+ * the page carries the card up the photograph falls behind a little and reads as further away.
+ * Linear, because the scroll is the easing. The card and the frame clip with `overflow: clip`, not
+ * `hidden`: `hidden` makes a box a scroll container, and a view timeline measured against one that
+ * never scrolls stands still.
+ *
+ * A browser with no scroll timeline, and a reader who asked for less motion, get the photograph
+ * still and centred, as with `parallax` off.
+ */
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-parallax="true"]:is([data-variant="split"], [data-variant="cover"]) .dds-imagebanner__media img {
+  block-size: calc(100% + var(--motion-distance-drift));
+  margin-block-start: calc(var(--motion-distance-drift) / -2);
+  object-position: center top;
+}
+
+@keyframes dds-imagebanner-drift {
+  from {
+    translate: 0 calc(var(--motion-distance-drift) / -2);
+  }
+  to {
+    translate: 0 calc(var(--motion-distance-drift) / 2);
+  }
+}
+
+@supports (animation-timeline: view()) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__media {
+    view-timeline: --dds-imagebanner-frame block;
+  }
+
+  /* Only for a reader who has not asked for less motion — asked here, around the rule, rather than
+     undone after it: the drift's selector outweighs any plain reset, and a reset that loses to it
+     leaves the photograph moving for exactly the reader who asked it not to. */
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) .dds-imagebanner[data-parallax="true"]:is([data-variant="split"], [data-variant="cover"]) .dds-imagebanner__media img {
+      animation: dds-imagebanner-drift linear both;
+      animation-range: cover;
+      animation-timeline: --dds-imagebanner-frame;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-parallax="true"]:is([data-variant="split"], [data-variant="cover"]) .dds-imagebanner__media img {
+    animation: none;
+  }
+}

package/dist/components/blocks/landing-hero/LandingHero.css

@@ -7,6 +7,7 @@
   inline-size: 100%;
   justify-content: center;
   overflow: hidden;
+  overflow-wrap: anywhere;
   position: relative;
   background-color: var(--color-bg-brand-strong);
   color: var(--color-fg-on-brand-strong);