@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/blocks/feature-cards-carousel/feature-cards-carousel-impl.css

@@ -0,0 +1,207 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * A heading with no line 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 header to the row.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * The header starts on a phone and is centred from the fold — FeatureCards' arrangement and its
+ * reason. Both boxes are capped narrower than the column, so `margin-inline: auto` is what centres
+ * them rather than their words inside a box left at the start edge.
+ *
+ * `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-featurecardscarousel .dds-featurecardscarousel__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__description {
+    margin-inline: auto;
+  }
+}
+
+/*
+ * Two measures the row is built from, both read off the band rather than the row — TestimonialRow's.
+ *
+ * The root declares `container-type`, so `cqi` here is the band's width. `--column` is the width of
+ * the column the heading sits in; `--bleed` is how far that column stands in from the band's edge.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel {
+  --dds-featurecardscarousel-column: calc(min(100cqi, var(--size-content-max)) - 2 * var(--space-inset-page));
+  --dds-featurecardscarousel-bleed: calc((100cqi - min(100cqi, var(--size-content-max))) / 2 + var(--space-inset-page));
+}
+
+/*
+ * The row runs out to the band's edges and its first card stands where the heading does — the
+ * reference design's breakout, built as TestimonialRow builds it.
+ *
+ * A negative margin takes the row out of the column to the band's edges; a leading padding of the
+ * same measure brings the first card back into line with the heading. The padding scrolls away with
+ * the cards, so a card is then cut off by the band rather than by the column.
+ * `scroll-padding-inline` matches it, or a browser reads the resting position as short of the first
+ * card's snap point and scrolls the gutter away on load.
+ *
+ * The block padding is room for a CardButton's lift and its focus ring, which a scroll container
+ * would otherwise clip; the negative margin gives it back.
+ *
+ * No scrollbar: the dots and the arrows under the row are the standing sign that it moves.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__track {
+  margin-block: calc(-1 * var(--space-gap-sm));
+  margin-inline: calc(-1 * var(--dds-featurecardscarousel-bleed));
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  padding-block: var(--space-gap-sm);
+  padding-inline-start: var(--dds-featurecardscarousel-bleed);
+  scroll-padding-inline: var(--dds-featurecardscarousel-bleed);
+  scroll-snap-type: x proximity;
+  scrollbar-width: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__track::-webkit-scrollbar {
+  display: none;
+}
+
+/*
+ * The row's focus ring is drawn inside it. The row runs out to the band's edges and the band hides
+ * its overflow, so a ring drawn outside would lose its two sides to the band.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__track:focus-visible {
+  outline-offset: calc(-1 * var(--border-width-focus));
+}
+
+/*
+ * The trailing gutter, as a spacer rather than a padding.
+ *
+ * A scroll container leaves its end padding out of what it scrolls to once its content overflows,
+ * so the last card would come to rest against the band's edge. A generated box is a flex item like
+ * a card, and its width counts. The negative margin takes back the gap the row puts before it.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__track::after {
+  content: '';
+  flex: none;
+  inline-size: var(--dds-featurecardscarousel-bleed);
+  margin-inline-start: calc(-1 * var(--space-grid-gutter));
+}
+
+/*
+ * A card's width: most of the column on a phone — 85%, TestimonialRow's share — so the next card's
+ * edge shows past it, which is what says the row moves; size.feature-cards-carousel.card from the
+ * fold, held to the column, so at full width the row shows the next card's edge the same way. The
+ * reference set a phone's card to the whole column, and a row whose next card starts exactly at
+ * the screen's edge reads as a single card.
+ *
+ * It does not shrink: a flex item shrinks to fit before it overflows, and a row of squeezed cards
+ * is the one thing this is not. Every card is as tall as the row, which is the tallest of them.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__item {
+  flex: none;
+  inline-size: calc(var(--dds-featurecardscarousel-column) * 0.85);
+  scroll-snap-align: start;
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__item {
+    inline-size: min(var(--size-feature-cards-carousel-card), var(--dds-featurecardscarousel-column));
+  }
+}
+
+/* `hidden` has to win over the part's own `display`, which outranks the browser's rule for it. */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__footer[hidden] {
+  display: none;
+}
+
+/*
+ * The arrows stand at the end of the footer, after the dots — and at its end on their own too,
+ * when the row has fewer stops than PaginationDots draws a row for.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__nav {
+  margin-inline-start: auto;
+}
+
+/*
+ * An arrow with nowhere to go stays in its place, receded to opacity.disabled, and its slot is
+ * inert — TestimonialRow's rule and its reason: ButtonIcon has no disabled state of its own.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__nav-slot[data-available='false'] {
+  opacity: var(--opacity-disabled);
+}
+
+/*
+ * The cards on a painted ground — FeatureCards' rules, for the same cards on the same grounds.
+ *
+ * A light card turns white on the subtle band, where its own gray.50 is the band's; a dark card is
+ * lifted a step in dark mode; a surface card is raised off it. On the dark band a neutral card
+ * turns round to the inverse fill and white ink, a plain card takes the white ink alone, and an
+ * eyebrow inside any of them takes the band's quieter ink. The coloured cards keep their own.
+ */
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="subtle"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="surface-light"] {
+  background-color: var(--color-bg-surface-card-light-raised);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="subtle"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="accent-strong"] {
+  background-color: var(--color-bg-surface-card-strong-raised);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="subtle"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="surface"] {
+  background-color: var(--color-bg-surface-card-raised);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="strong"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="surface"] {
+  background-color: var(--color-bg-surface-inverse);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="strong"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="surface-raised"] {
+  background-color: var(--color-bg-surface-raised-on-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="strong"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="plain"] {
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="strong"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton):is([data-variant="surface"], [data-variant="surface-raised"], [data-variant="plain"])
+  .dds-cardbody__eyebrow {
+  color: var(--color-fg-muted-inverse);
+}
+
+/*
+ * Previous and next point along the row. A right-to-left row puts previous on the right, so the
+ * chevrons are mirrored to point the way each one moves; as they ship, both pointed backwards.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__nav-slot svg:dir(rtl) {
+  scale: -1 1;
+}

package/dist/components/blocks/feature-scroll/FeatureScroll.css

@@ -6,6 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
+  overflow-wrap: anywhere;
 }
 
 :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__inner {

package/dist/components/blocks/feature-split/FeatureSplit.css

@@ -6,6 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
+  overflow-wrap: anywhere;
 }
 
 :where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__inner {

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

@@ -77,7 +77,20 @@
 :where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__media > *,
 :where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__media img {
   block-size: 100%;
-  display: block;
   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-featuresplit .dds-featuresplit__media > *, [data-dds-context="marketing"] .dds-featuresplit .dds-featuresplit__media img) {
+  display: block;
+}
+

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

@@ -0,0 +1,86 @@
+/* GENERATED from featurestack.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-featurestack {
+  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-featurestack .dds-featurestack__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);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-heading);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__title {
+  margin-block: 0;
+  text-wrap: balance;
+  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-featurestack .dds-featurestack__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);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__link {
+  display: flex;
+  margin-block-start: var(--space-heading-description-actions);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__media {
+  align-self: center;
+  min-inline-size: 0;
+  overflow: clip;
+  border-start-end-radius: var(--radius-container);
+  border-start-start-radius: var(--radius-container);
+  max-inline-size: var(--size-feature-stack-media);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__image {
+  display: block;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack[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);
+}
+

package/dist/components/blocks/feature-stack/FeatureStack.d.ts

@@ -0,0 +1,19 @@
+import './FeatureStack.css';
+import './feature-stack-impl.css';
+import '../block-reveal.css';
+import { type FeatureStackProps } from './FeatureStack.types.js';
+export type { FeatureStackProps };
+/**
+ * A heading, a line, a way on, and an illustration the band ends on — FeatureSplit stacked, the
+ * words over the picture rather than beside it. The reference design's PartnersPayout layout, taken
+ * down to its frame.
+ *
+ * The reference drew figures between the heading and the picture. Those were the page's content,
+ * not the layout's: a page that wants figures puts them in a section of its own or in its copy, and
+ * this keeps only what every use of the layout shares — the words centred over a picture that
+ * stands on the band's foot.
+ *
+ * It arrives the way every block does: the heading, the line, the link, then the picture.
+ * `'use client'` for that and for `useId`, which names the region by its heading.
+ */
+export declare function FeatureStack({ ground, title, description, link, image, }: FeatureStackProps): import("react").JSX.Element;

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

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './FeatureStack.css';
+import './feature-stack-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { featureStackDefaults, featureStackParts, } from './FeatureStack.types.js';
+/**
+ * A heading, a line, a way on, and an illustration the band ends on — FeatureSplit stacked, the
+ * words over the picture rather than beside it. The reference design's PartnersPayout layout, taken
+ * down to its frame.
+ *
+ * The reference drew figures between the heading and the picture. Those were the page's content,
+ * not the layout's: a page that wants figures puts them in a section of its own or in its copy, and
+ * this keeps only what every use of the layout shares — the words centred over a picture that
+ * stands on the band's foot.
+ *
+ * It arrives the way every block does: the heading, the line, the link, then the picture.
+ * `'use client'` for that and for `useId`, which names the region by its heading.
+ */
+export function FeatureStack({ ground = featureStackDefaults.ground, title, description, link, image, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: featureStackParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: featureStackParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: featureStackParts.header, children: [_jsx("h2", { className: featureStackParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: featureStackParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureStackParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: featureStackParts.media, ...arriving(3), children: image ? (_jsx("img", { className: featureStackParts.image, src: image.src, alt: image.alt, width: image.width, height: image.height, loading: "lazy", decoding: "async" })) : null })] }) }));
+}

package/dist/components/blocks/feature-stack/FeatureStack.types.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import type { BlockImage } from '../../block-image-data.js';
+export interface FeatureStackOwnProps {
+    /**
+     * `page` — The default, and the page's own white
+     * `subtle` — The grey band, for a section that needs setting apart from the one above it. 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, and the reference design's ground for this layout. The heading and the line under it turn white; an illustration made for a dark ground sits best here
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. The statement the section makes, in a few words — "Trusted in 190+ countries", "One account, every device". */
+    title: string;
+    /** A short line under the heading that says what the statement means for the reader, or what the picture shows. */
+    description?: string;
+    /** A way on for the reader who wants more — "Learn more", "See where we operate". A standalone Link, under the line, the way FeatureCards takes one. */
+    link?: ReactNode;
+    /** Always. The picture the section ends on — a globe, a map, a product shot — which the block draws at its own proportions: a square picture stays square, a tall one stays tall, held to the screen's limit. Use one at least as wide as the column, twice that for sharp screens, and give its width and height so the block reserves its shape before it loads. `alt` empty when the heading already says what it shows; otherwise describe it. */
+    image: BlockImage;
+}
+export type FeatureStackProps = FeatureStackOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const featureStackParts: {
+    readonly root: "dds-featurestack";
+    readonly inner: "dds-featurestack__inner";
+    readonly header: "dds-featurestack__header";
+    readonly title: "dds-featurestack__title";
+    readonly description: "dds-featurestack__description";
+    readonly link: "dds-featurestack__link";
+    readonly media: "dds-featurestack__media";
+    readonly image: "dds-featurestack__image";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const featureStackDefaults: {
+    readonly ground: "page";
+};

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);
+}
+