@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/.llm/components/footer.md

@@ -0,0 +1,408 @@
+<!-- GENERATED from footer.contract.json. Do not edit. -->
+
+# Footer
+
+The band that closes a marketing page, and the sections every one of them is made of: whose site this is, where else it goes, what the law obliges it to say, and the line that closes it.
+
+It holds no destinations and no wording of its own. What goes in it is what the page composes — the links, the groups they fall into, the disclaimer's paragraphs — because the foot of a marketing site is written by the site, and a component that took an array of links would be a second router to keep in step with the first. What this owns is the band: the ground it paints, the measure it holds its content to, the order its sections come in, and the space between them.
+
+The sections are the whole of it. A footer drawn by hand is a stack of divs whose gaps were chosen one at a time, and two pages built that way stop agreeing the first time one of them is tuned. Here each region is a declared part with a role token behind every gap, so a page fills the sections and the spacing is not its decision to make.
+
+It paints a dark ground, which is what makes it the end of the page rather than another section of it: a reader scrolling reaches a band that is plainly not more page, and stops looking for more. The ground is `color.bg.brand-strong` — the role this package names for a band breaking a long page — and the ink that goes with it is set once on the root and inherited by everything inside, which is the package's rule about a section that paints a ground.
+
+## Use when
+
+- A marketing page needs its closing band — the mark, the site's other destinations, the regulatory text and the copyright line
+- The same footer has to hold its content to the page's measure and gutter without the page restating either
+- The regulatory or legal wording has to sit in a consistent place across every page of the site
+
+## Do not use
+
+- The content closes a card or a panel rather than the page → `Card`
+- The navigation is the page's primary one, at the top → `Navbar`
+- What is needed is a horizontal rule between two blocks of content → `Divider`
+- A sticky bar of actions at the bottom of the viewport. This closes the document and scrolls away with it; an action rail that follows the reader is a different component and a different landmark
+- A second navigation landmark competing with the top bar. The destinations here are the ones a reader looks down for rather than up for — the company, the legal pages, the secondary sections
+- Page content. A band that closes the document is not a section to put a feature list in, and a reader who meets real content below the copyright line has been told the page ended and then found it had not
+
+## Anatomy
+
+Footer renders 12 elements. A token binding names the part it applies to.
+
+- `root` — `<footer>`, class `dds-footer`. The band, and the one thing here that paints a ground. It spans the full width so the ground reaches both edges of the viewport, and centres what it holds rather than taking the measure itself — a band whose ground stopped at the measure would read as a card at the bottom of the page.
+  
+  The ground is dark, and that is what ends the page. `color.bg.brand-strong` is the role this package names for a band breaking a long page, and `color.fg.on-brand-strong` is the ink that goes with it — set here and inherited, so the destinations, the labels and the small print are one decision rather than nine. Setting the ground without the ink is the failure the painted-ground rule exists to catch: the text keeps whatever the page was using and disappears.
+  
+  It is the query container the groups ask. The band runs the full width, so the width it reports is the one a reader actually has — `inner` is capped and inset, and a threshold measured against it would fire two gutters late, leaving the footer in its phone layout at a width where the bar above it had already opened. A container and not a media query all the same: a footer placed in a narrow region of a wide page is a narrow footer, and only the container knows that.
+- `inner` — `<div>`, class `dds-footer__inner`. The measure, and the order. It caps the content at the page's own maximum, holds the page gutter, and stacks the sections in the order they are read: the masthead, the destinations, and the block that closes the band. The gap between them is one step, because they are siblings of the same kind — blocks of the footer — and a stack that varied it would be ranking them.
+- `masthead` — `<div>`, class `dds-footer__masthead`. The row the band opens on: the mark, the accounts the company keeps elsewhere, and whatever a third party awarded it.
+  
+  A column first and a row once there is width for one. Stacked, the three read top to bottom and all range to the start — three regions at a phone's width laid out with `space-between` is a mark pinned to one edge and a badge to the other with a hole between them, which is a row pretending it still fits.
+  
+  Wide enough it becomes three cells, `1fr auto 1fr`, with the mark at the start, the accounts in the middle and the borrowed mark at the far end. The outer two are equal whatever they hold, so the middle is centred on the band rather than on the space the other two leave — `space-between` centres it only when the flanking regions happen to match, and a wordmark against a badge never does.
+  
+  The ends stay apart, which is the other half of the arrangement: a badge beside a logo is a badge the reader takes for part of the brand.
+- `brand` — `<div>`, class `dds-footer__brand`. The leading section: whose site this is. A slot rather than a prop with a shape, because a mark is a logo on one site, a logo and a sentence on another, and a component that named its parts would be wrong on both. Optional, and absent on a page whose footer is links and law alone. Rendered only when `brand` is set.
+- `social` — `<div>`, class `dds-footer__social`. The accounts the company keeps elsewhere, beside the mark rather than at the foot of the band.
+  
+  A row of marks and no words, which works here and nowhere else in this package: these are logos a reader recognises rather than icons standing for actions, and a label under each would be seven words saying what seven shapes already said. Each is still a link with an accessible name of its own — the shape is what a sighted reader uses, never what a screen reader is given. Rendered only when `social` is set.
+- `endorsement` — `<div>`, class `dds-footer__endorsement`. What somebody else said about the company, at the trailing end of the masthead.
+  
+  Away from the mark deliberately. An accreditation drawn beside a logo is read as part of the logo, and a badge that looks like branding is a badge nobody credits to the body that issued it. Rendered only when `endorsement` is set.
+- `body` — `<div>`, class `dds-footer__body`. The destinations and the rail beside them.
+  
+  A column first, so on a phone the rail follows the sets rather than squeezing beside them. Wide enough it is five equal cells: the sets take four and the rail takes the fifth, so every region across the band is one width.
+  
+  Its step is `space.gap.xl`, the same one the grid puts between columns, and that is the whole of what makes the five equal. With a narrower step between the rail and the sets, the rail's cell comes out nine pixels wider than a link column — near enough to look like a mistake and not near enough to look deliberate.
+- `nav` — `<nav>`, class `dds-footer__nav`. The destinations, and the part that carries the accessible name. A landmark rather than a div, so a reader moving by landmark is told this is navigation and which navigation it is.
+  
+  What arranges the columns inside it is a `Grid`, rendered here rather than asked of the page. The two halves of that are worth separating: the column count is the footer's decision, so it is a prop; the arithmetic that turns a count into tracks that fold as the room goes is Grid's, and it is a `repeat(auto-fit, minmax(min(100%, max(…))))` that is hard to get right once and should not exist twice. Composing it is how the footer has both — the same move Select makes with the SearchInput inside its list.
+  
+  Before this, the page supplied the Grid and the groups were its grandchildren: the contract said Footer took FooterGroups and no page could give it one directly. Table never asks a caller to wrap its rows and Navbar never asks one to wrap its items.
+  
+  The track floor is `min="md"` and it is what decides a phone. Grid fits as many tracks as clear the floor and drops the rest, so the count is arithmetic rather than a breakpoint: at 390 the band leaves 358 inside its gutter, two 240-pixel tracks and a gap cannot fit, and the sets become one column. At the `sm` floor they could — two tracks of 160 and a gap come to 344 — and a phone showed two columns with the long labels wrapping inside them.
+  
+  A cell may hold a `Stack` of sets rather than a single one, and that is why `Stack` is allowed here when Table and Navbar allow nothing but their own. A real footer's columns are not one set each: Trade, Markets and Payments share the first, Platforms, Promotions and Tools the next, and which set lands in which column is a judgement about their lengths that changes the moment one is added. A grid cannot balance cells by height, and nothing in this component knows that Payments is one link and Platforms is nine — the page does, so the page groups them and the grid places what it is given.
+- `aside` — `<div>`, class `dds-footer__aside`. The rail at the trailing end of the destinations: the app cards, a download, a partner mark.
+  
+  One cell of the band's five, so it is exactly as wide as a column of destinations. It had a width of its own for a while — a track from the grid's scale — which was better than the nothing before it, when `flex: none` around a card sized by its own sentence took half the band. But a fixed width is still a fifth region that answers to a different number than the other four.
+  
+  Outside the navigation landmark rather than a column of it, and that is why it is a slot and not a set. A reader running an eye down the columns is reading lists of links; a card with a picture and a button among them stops that read for something they were not looking for — and a screen reader moving by landmark would have it announced as a destination. Rendered only when `aside` is set.
+- `bottom` — `<div>`, class `dds-footer__bottom`. The block that closes the band, and the only rule drawn in it. Its border is what separates the page's own destinations from the record that ends the document, which is a change of register rather than another gap.
+  
+  A column rather than the row it was. What sits under the rule is the obliged text and then the closing line, read in that order — the accounts that used to sit opposite the copyright have moved up to the masthead, where they belong with the mark rather than with the law.
+  
+  The rule is `color.border.subtle-inverse`, a role added with this component. It was `color.border.strong` for a while, which is described as an emphasised border for active or prominent elements — the value looked right on a dark band and the name said something else, and a borrowed role is a decision nobody can find later.
+- `disclaimer` — `<div>`, class `dds-footer__disclaimer`. The regulatory text: what the page is obliged to say rather than what it wants to. Set small, because it is read by someone looking for it rather than offered to everyone, and run to the width of the band rather than held to a measure.
+  
+  That is a decision against the usual one and worth recording as such. A paragraph the width of a page is a paragraph nobody finishes, which is why this was capped at `size.measure.long-form` to begin with. What is here is mostly not that: the entity list is a run of short independent sentences, one per licence, and a reader looking for theirs scans down them rather than reading through. The risk warning at the end is continuous prose and does pay the cost — if this block grows more of that than of the list, the measure is the thing to put back.
+  
+  Set in the band's own ink rather than a muted one. On a light ground this was `color.fg.muted`, which is the role for supporting copy; on a dark ground there is no muted counterpart, and the nearest grey does not clear the contrast a paragraph needs. What makes this text recede here is its size and its place, not its colour. Rendered only when `disclaimer` is set.
+- `copyright` — `<p>`, class `dds-footer__copyright`. The line that closes the document, where there is one.
+  
+  Rendered only when the page passes it. It was unconditional and required, on the reading that every marketing page carries a notice — which is true of most and not of all, and a part that is always drawn around a string that may be empty is a blank line at the foot of the band. Rendered only when `copyright` is set.
+
+Apply these classes from the generated `footerParts` constant rather than writing the strings by hand.
+
+## Composition
+
+- Can contain: `FooterGroup`, `Stack`, `Link`
+- Never contains: `Footer`, `Navbar`, `SubdomainNavbar`, `BottomSheet`, `Table`, `Accordion`, `Card` — in children or in any prop that takes a node
+
+## Props
+
+### label — `string` **Required.**
+
+Use when: Always — it names the navigation landmark, and a page with two unnamed ones tells a screen-reader user there is navigation in both places without saying how they differ. Name the set rather than the act: 'Footer', not 'Footer navigation' — the role already supplies the word, and a name carrying it is announced twice
+Never for: A visible heading. Nothing draws this. The band needs no title, and a page that wants one composes a heading into the section itself
+
+### columns — `2` | `3` | `4` (default `4`)
+
+- `2` — A short footer, or one whose sets run long
+- `3` — The middle case, and the one a site with a rail beside its columns often wants
+- `4` — The default, and the widest the band goes. With the rail beside them that is five regions across
+
+Use when: How many columns the destinations fall into at full width. Four is the ceiling, and with the rail beside them that is five regions across — which is as many as a band can hold before a reader stops scanning columns and starts reading a wall.
+
+It is the count at full width and never the count on a phone. The grid behind it fits what it can and drops a track when the room goes, so this is the ceiling rather than a promise.
+Never for: Forcing a layout on a phone. Nothing here holds at a phone's width — the grid drops to a single column and this value is not read
+
+### copyright — `string`
+
+Use when: The line the band closes on, where the site carries one. Pass the sentence the site uses, the year included: this formats nothing and computes nothing.
+
+Optional, which it did not used to be. The argument for requiring it was that a marketing page has one whether or not anyone remembered to pass it, and a footer that rendered without it looks finished while missing the one sentence it exists to carry. That holds for a page that has a notice to give — it does not hold for a site that puts its ownership somewhere else, and a required prop is the component insisting on a sentence it cannot write.
+Never for: The regulatory text. A disclaimer is paragraphs and belongs in `disclaimer`, where it is set at a readable measure; squeezed into the closing line it becomes a wall of small print across the foot of the strip
+
+### brand — `node`
+
+Use when: The footer opens with the site's mark, which is the common case — usually the logo, often with a line about the company under it
+Never for: The page's heading. This is the site's mark, not the page's title
+
+### social — `node`
+
+Accepts: ButtonIcon, Link
+Use when: The accounts the company keeps elsewhere, at the head of the band beside the mark. They are about the company rather than about the site, which is why they sit with the mark and not among the destinations
+Never for: Destinations. Anything that goes to a section of the site belongs in the children, where the navigation landmark announces it as one
+
+### endorsement — `node`
+
+Accepts: *
+Use when: A mark somebody else awarded — an accreditation, a standard the company holds. At the far end of the masthead, away from the company's own mark, because a badge beside a logo reads as part of the logo
+Never for: The company's own mark, or anything that links into the site. This end of the row is for what a third party said, and a destination put here is one a reader will not look for
+
+### aside — `node`
+
+Accepts: *
+Use when: The rail beside the destinations: the app cards, a download, a partner mark. The one part of the band that is an offer rather than a way onward, which is why it is kept out of the columns instead of being a set among them
+Never for: Another set of links. A column of destinations belongs in the navigation landmark, where a screen reader announces it as one — put here it is outside the landmark and outside the order a reader is reading the columns in
+
+### disclaimer — `node`
+
+Accepts: Typography, Link
+Use when: The site is obliged to carry regulatory or legal wording — the risk warning, the licensing statement, the entity that holds the licence. Passed as nodes rather than a string because it runs to paragraphs and usually carries links
+Never for: Marketing copy. This section is set muted and small, which is right for text nobody chose to read and wrong for anything the page is trying to say
+
+## Accessibility
+
+Guaranteed by the component. Write none of it by hand: the ids these attributes point at are generated per instance, so an attribute set from outside either says the same thing twice or points at nothing.
+
+- Announced as: `contentinfo`
+- `Tab` — Moves through the band in reading order — the mark, then each destination, then whatever the disclaimer carries, then the closing strip. Nothing here is a composite widget, so there is no roving tabindex and no arrow keys: a reader uses the key they already have.
+- accessible name from label, on the navigation landmark rather than on the band, so a reader meeting a second set of destinations is told which set it is
+- The footer carries no explicit role. A <footer> that is not inside a sectioning element is already the contentinfo landmark, and writing the role as well says it twice — and says it wrongly if the element is ever nested, where the implicit landmark correctly disappears and a hand-written role would not.
+- The band is the last thing in the document, not a bar pinned to the viewport. A footer that followed the reader would cover the end of every page and announce the document had finished while it had not.
+
+## Rules
+
+- **On a phone a section's actions stack and each fills the width, including when there is only one** — On a phone a page's actions stack, and each one fills the width. Not most of it, and not the width its label happens to need — the whole column.
+
+Two side by side is what this replaces. On the narrowest screen each gets half a column minus the gap, which is rarely enough for a real label: the words wrap inside the pills, the two buttons come out different heights, and the pair reads as a broken row rather than as a choice. Stacked, each has the whole width and neither has to shorten its words to fit.
+
+A single action fills too, and that is the part worth saying, because it is the one that looks unnecessary. A lone button has the room to sit at its natural width and still should not: a full-width control is the phone's convention for the thing the screen is asking you to do, and a pill hugging its label reads as one option among others that are not there. It also makes the target predictable — the whole width, wherever the thumb lands — which a centred pill does not.
+
+Filling is the row's job rather than the button's. A button has no width of its own and is not given one; the row it sits in becomes a column and stretches its children, so nothing about the control changes and the same button is full width here and its own size on a desktop.
+
+This is the phone's breakpoint, size.breakpoint.md, and not the wider one that decides whether a heading is centred. Those are different questions and they break at different widths: a heading stops being centred when the measure is the screen, while a button stops being full width much sooner than that — stretched across a tablet it is a long way from its own label, and a label centred in a metre of pill is harder to hit than one in a pill the size of the words.
+
+What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
+  Guidance only — cannot be checked automatically.
+- **Never nest one interactive element inside another** — Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, Input and Switch simultaneously.
+  Guidance only — cannot be checked automatically.
+- **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
+
+color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.
+
+color.bg.strong is not a section ground. It is the inverted fill for an action that has to outrank what surrounds it, and the components that paint it — Button and ButtonIcon in their inverse form — already set both halves in one rule, which is the pattern a hand-painted section has to copy.
+  Guidance only — cannot be checked automatically.
+- **Every gap inside a section names the relationship it expresses, and the same relationship keeps its measure when it turns on its side** — A section's spacing is named by the relationship it expresses, not chosen by size. Every gap in a section has a role token, and reaching for a step off the generic scale because it happens to be the right number is how two sections written by two people stop lining up: the numbers agree today and drift the first time one of them is tuned.
+
+The heading group is three steps, not one gap. An eyebrow sits nearer its title than the title sits to its description, and the actions sit further from the description than either — space.heading.eyebrow-title, space.heading.title-description, space.heading.description-actions, in that order. A single `gap` on the group cannot say this; it sets all three the same and the block reads as evenly spaced lines rather than as a mark, a name and a paragraph. The eyebrow has to identify itself for this to work, because a group that opens with a title must not give its description the eyebrow's tighter step.
+
+The step between a title and its description follows the size of the title, which is why there are two of it. What a reader sees is not the gap but the gap plus the leading above it, and leading scales with the type: under a display title the leading is most of the space, under a card's title it is half as deep. One value for both makes a card look loose at the size that made a section look right. So space.heading.title-description is the display step and space.heading.title-description-compact is the step at a card's size, and the choice is made by how big the title is rather than by what kind of block it sits in.
+
+Every one of those steps is smaller than the gap below the group, and that ordering is what holds the group together as one thing. space.heading.content is the step between a heading group and the content it introduces, and it is the widest measure inside a section: the one gap the eye reads as a change of subject rather than as a continuation.
+
+That step is the same whether the content is under the heading or beside it. A split is the same relationship turned on its side — a heading group and the content it introduces — so the space between the two halves is space.heading.content, not a gutter. When the split collapses to one column on a phone the gap becomes vertical again, which is where it started, and nothing has to change for that to be right.
+
+space.grid.gutter is between two things of the same kind. Two cards in a row are the same kind; the two halves of a split are not, which is why the gutter is the wrong measure there even when the number would have looked acceptable. The gutter runs on both axes, so a grid reads as an even field rather than as rows with a seam down them.
+
+space.inset.card is the card's, not the page's. A row of cards padded differently is a row of different cards, and the fill is the only edge they have. A page composing a row does not get to choose it.
+
+Column count is not a breakpoint decision. A row holds as many columns as fit before a column would be narrower than size.grid.column-min, and drops one when they would not. Written as a fixed count that collapses at a breakpoint, a four-up row keeps four columns at every width above the phone and sets its copy two or three words to a line through the whole of the tablet range — and on a narrow desktop, which no breakpoint sits on at all. The threshold is a property of the row rather than of a card: a card fills whatever cell it is given.
+
+What this does not cover is the space above and below a section, which is space.section.default and space.section.compact, and the page's own side margin, which is space.inset.page. Those are the section's outside; everything here is its inside.
+  Guidance only — cannot be checked automatically.
+- **A section's title is centred over stacked content, starts beside content in columns, and starts on a phone** — Two arrangements, and the title's alignment is decided by which one it is introducing rather than chosen per section.
+
+Content stacked under the title — a row of cards, an accordion, a set of steps — takes a centred title. The heading group and the block below it share one axis, so a centred title is symmetric with the thing it names, and the eye drops from the middle of the words to the middle of the set. A title starting at the left over a centred or full-width block reads as belonging to the first column rather than to all of them.
+
+Content beside the title — a split, a picture in the other half, anything laid out in columns — takes a title that starts where its content starts. The two share a left edge, and that edge is what says they are one thing read across rather than two stacked. Centring the title there breaks the only alignment the reader has to hold the halves together, and it drifts further from its content the wider the page gets.
+
+The heading group is what carries this, not the heading alone. An eyebrow, a title and a description are read as one block and align together; aligning the title without them leaves a centred heading over start-aligned copy, which reads as a mistake rather than as a choice.
+
+Centred means all of it, not just the words. A badge, a row of actions, a picture — these are flex children, and a flex child is placed by align-items rather than by text-align, so a block that only sets the text leaves everything that is not text at the start. A hero is the case that shows it: its title and copy centred while its badge and its buttons did not.
+
+A capped block centres itself as well as its words. A heading group takes size.heading-group.max, and a cap that is not centred leaves the measure at the start of the column with the words centred inside it — composed, and a long way left of the middle it appears to be in.
+
+Both arrangements go to the start on a phone. A centred block reverts below the breakpoint, and the reason is the measure: on a phone the measure is the screen, so a centred title wraps to three or four ragged lines and the eye loses the left edge it was tracking — the same symmetry that reads as composure on a desktop is what makes it hard to scan on a phone. Centring there has to be asked for twice, and a section title is not one of the things that asks: it is centred because there is room for it, and on a phone there is not. Going back to the start means all of it too, and a capped block is the one that hides a leftover: its words go to the start while its measure stays in the middle of the column, which reads as a title still centred over a badge and buttons that are not — the box in the middle and the line inside it at the edge.
+
+A hero is a section like any other: its badge, title, copy and actions are one stacked block, so it is centred on a desktop and starts on a phone with everything else.
+
+What this is not about is a page whose body is a form or a document. A title over a sign-up form or a guide is not introducing a set of content — it is the first line of the thing itself, and it keeps the alignment the body has, which for running text is the start. The distinction is whether the block below is content the title names or content the title is part of.
+  Guidance only — cannot be checked automatically.
+- **Anything a pointer has to hit is at least 24px in both directions** — A control sized by its contents is as big as its contents, and a glyph is chosen for how it reads rather than for how easily it is hit. An icon-only button with no padding is a 16px target — smaller than the pad of a finger, and smaller than the tremor of a hand using a mouse.
+
+WCAG 2.2 asks for 24 by 24 CSS pixels at AA. The exceptions are narrower than they look: inline targets inside a sentence are exempt, and so is a small target with 24px of clear space around it — but a clear button sits against the field it empties, and a field is itself a target, so the spacing exemption does not apply to the case that keeps arising.
+
+The target and the mark are separate decisions, and conflating them is what produces both faults. Growing the glyph to 24px makes it shout; leaving the button at 16px makes it hard to hit. So the glyph keeps the size that reads correctly beside its text, and the box around it declares a minimum of its own — which is what size.target.min is for.
+
+Declared rather than emergent. Padding plus contents does clear 24px in several components today, and it is the weaker statement: it is a size nobody wrote down, so it moves when the type scale or the glyph does, and nothing says it was meant to be a target at all.
+  Guidance only — cannot be checked automatically.
+
+## Anti-examples
+
+❌ Footer for: The content closes a card or a panel rather than the page
+   → use `Card` instead.
+
+❌ Footer for: The navigation is the page's primary one, at the top
+   → use `Navbar` instead.
+
+❌ Footer for: What is needed is a horizontal rule between two blocks of content
+   → use `Divider` instead.
+
+## Example
+
+```tsx
+import { Footer, FooterGroup, Link, Typography } from '@deriv-com/dds-marketing'
+import { DerivCoralWordmark } from '@deriv-com/quill-logos-web'
+
+<Footer label="Footer" copyright="© 2026 Deriv. All rights reserved." brand={<DerivCoralWordmark />} social={<Link href="https://example.com/deriv" external>Follow us</Link>} endorsement={<Typography variant="body-sm" as="span">Investors in People · Platinum</Typography>} aside={<Typography variant="body-sm" as="span">Get the Deriv app — manage accounts and access markets anywhere.</Typography>} disclaimer={<Typography variant="body-sm" as="p">The products offered on our website are complex derivative products that carry a significant risk of potential loss. CFDs are complex instruments with a high risk of losing money rapidly due to leverage. You should consider whether you understand how these products work and whether you can afford to take the high risk of losing your money.</Typography>}>
+  <FooterGroup label="Trade" onExpandedChange={(expanded) => { /* your handler */ }}>
+    <Link href="/cfds">CFDs</Link>
+    <Link href="/options">Options</Link>
+    <Link href="/specs">Trading specifications</Link>
+  </FooterGroup>
+  <FooterGroup label="Markets" onExpandedChange={(expanded) => { /* your handler */ }}>
+    <Link href="/markets/forex">Forex</Link>
+    <Link href="/markets/stocks">Stocks</Link>
+    <Link href="/markets/commodities">Commodities</Link>
+    <Link href="/markets/crypto">Cryptocurrencies</Link>
+  </FooterGroup>
+  <FooterGroup label="About" onExpandedChange={(expanded) => { /* your handler */ }}>
+    <Link href="/who-we-are">Who we are</Link>
+    <Link href="/principles">Our principles</Link>
+    <Link href="/careers">Careers</Link>
+    <Link href="/newsroom">Newsroom</Link>
+  </FooterGroup>
+  <FooterGroup label="Legal" onExpandedChange={(expanded) => { /* your handler */ }}>
+    <Link href="/regulatory">Regulatory information</Link>
+    <Link href="/terms">Terms & conditions</Link>
+    <Link href="/privacy">Privacy policy</Link>
+    <Link href="/fraud">Fraud prevention</Link>
+  </FooterGroup>
+</Footer>
+```
+
+## In use
+
+Most rows below hold the same set, written once here:
+
+```tsx
+import { FooterGroup, Link } from '@deriv-com/dds-marketing'
+
+const footergroups = (
+  <>
+    <FooterGroup label="Trade">
+  <Link href="/cfds">CFDs</Link>
+  <Link href="/options">Options</Link>
+  <Link href="/specs">Trading specifications</Link>
+</FooterGroup>
+    <FooterGroup label="Markets">
+  <Link href="/markets/forex">Forex</Link>
+  <Link href="/markets/stocks">Stocks</Link>
+  <Link href="/markets/commodities">Commodities</Link>
+  <Link href="/markets/crypto">Cryptocurrencies</Link>
+</FooterGroup>
+    <FooterGroup label="About">
+  <Link href="/who-we-are">Who we are</Link>
+  <Link href="/principles">Our principles</Link>
+  <Link href="/careers">Careers</Link>
+  <Link href="/newsroom">Newsroom</Link>
+</FooterGroup>
+    <FooterGroup label="Legal">
+  <Link href="/regulatory">Regulatory information</Link>
+  <Link href="/terms">Terms & conditions</Link>
+  <Link href="/privacy">Privacy policy</Link>
+  <Link href="/fraud">Fraud prevention</Link>
+</FooterGroup>
+  </>
+)
+```
+
+### The three blocks
+
+The masthead, the destinations, and the record that ends the document — read in that order. Everything but the closing line is optional, and a footer is still a footer with any of it missing.
+
+```tsx
+import { Footer, FooterGroup, Link, Typography } from '@deriv-com/dds-marketing'
+import { DerivCoralWordmark } from '@deriv-com/quill-logos-web'
+
+// The shape a public page closes on
+<Footer label="Footer" copyright="© 2026 Deriv. All rights reserved." brand={<DerivCoralWordmark />} disclaimer={<Typography variant="body-sm" as="p">The products offered on our website are complex derivative products that carry a significant risk of potential loss. CFDs are complex instruments with a high risk of losing money rapidly due to leverage. You should consider whether you understand how these products work and whether you can afford to take the high risk of losing your money.</Typography>}>{footergroups}</Footer>
+
+// No mark — destinations and law alone
+<Footer label="Footer" copyright="© 2026 Deriv. All rights reserved." disclaimer={<Typography variant="body-sm" as="p">The products offered on our website are complex derivative products that carry a significant risk of potential loss. CFDs are complex instruments with a high risk of losing money rapidly due to leverage. You should consider whether you understand how these products work and whether you can afford to take the high risk of losing your money.</Typography>}>
+  <FooterGroup label="Trade" onExpandedChange={(expanded) => { /* your handler */ }}>
+    <Link href="/cfds">CFDs</Link>
+    <Link href="/options">Options</Link>
+    <Link href="/specs">Trading specifications</Link>
+  </FooterGroup>
+  <FooterGroup label="Legal" onExpandedChange={(expanded) => { /* your handler */ }}>
+    <Link href="/regulatory">Regulatory information</Link>
+    <Link href="/terms">Terms & conditions</Link>
+    <Link href="/privacy">Privacy policy</Link>
+    <Link href="/fraud">Fraud prevention</Link>
+  </FooterGroup>
+</Footer>
+
+// Nothing it is obliged to say
+<Footer label="Footer" copyright="© 2026 Deriv. All rights reserved." brand={<DerivCoralWordmark />}>
+  <FooterGroup label="Trade" onExpandedChange={(expanded) => { /* your handler */ }}>
+    <Link href="/cfds">CFDs</Link>
+    <Link href="/options">Options</Link>
+    <Link href="/specs">Trading specifications</Link>
+  </FooterGroup>
+  <FooterGroup label="Markets" onExpandedChange={(expanded) => { /* your handler */ }}>
+    <Link href="/markets/forex">Forex</Link>
+    <Link href="/markets/stocks">Stocks</Link>
+    <Link href="/markets/commodities">Commodities</Link>
+    <Link href="/markets/crypto">Cryptocurrencies</Link>
+  </FooterGroup>
+</Footer>
+```
+
+### Named sets, or none
+
+A site with enough links names its sets; one with five destinations does not, and would be inventing a heading for a list of one. Both are allowed inside the landmark.
+
+```tsx
+import { Footer, Link } from '@deriv-com/dds-marketing'
+
+// Grouped — the large-site shape
+<Footer label="Footer" copyright="© 2026 Deriv. All rights reserved.">{footergroups}</Footer>
+
+// Bare links — the small-site shape
+<Footer label="Footer" copyright="© 2026 Deriv. All rights reserved.">
+  <Link href="/about">About us</Link>
+  <Link href="/contact">Contact us</Link>
+  <Link href="/terms">Terms and conditions</Link>
+</Footer>
+```
+
+### How many columns at full width
+
+Four is the ceiling, and with the rail beside them that is five regions across. The count is a ceiling rather than a promise: the grid drops a track as the room goes, so a phone is one column.
+
+```tsx
+import { Footer, FooterGroup, Link } from '@deriv-com/dds-marketing'
+
+// two — a short footer, or one whose sets run long
+<Footer label="Footer" columns="2" copyright="© 2026 Deriv. All rights reserved.">
+  <FooterGroup label="Trade" onExpandedChange={(expanded) => { /* your handler */ }}>
+    <Link href="/cfds">CFDs</Link>
+    <Link href="/options">Options</Link>
+    <Link href="/specs">Trading specifications</Link>
+  </FooterGroup>
+  <FooterGroup label="Markets" onExpandedChange={(expanded) => { /* your handler */ }}>
+    <Link href="/markets/forex">Forex</Link>
+    <Link href="/markets/stocks">Stocks</Link>
+    <Link href="/markets/commodities">Commodities</Link>
+    <Link href="/markets/crypto">Cryptocurrencies</Link>
+  </FooterGroup>
+</Footer>
+
+// three — the case with a rail beside the columns
+<Footer label="Footer" columns="3" copyright="© 2026 Deriv. All rights reserved.">
+  <FooterGroup label="Trade" onExpandedChange={(expanded) => { /* your handler */ }}>
+    <Link href="/cfds">CFDs</Link>
+    <Link href="/options">Options</Link>
+    <Link href="/specs">Trading specifications</Link>
+  </FooterGroup>
+  <FooterGroup label="Markets" onExpandedChange={(expanded) => { /* your handler */ }}>
+    <Link href="/markets/forex">Forex</Link>
+    <Link href="/markets/stocks">Stocks</Link>
+    <Link href="/markets/commodities">Commodities</Link>
+    <Link href="/markets/crypto">Cryptocurrencies</Link>
+  </FooterGroup>
+  <FooterGroup label="About" onExpandedChange={(expanded) => { /* your handler */ }}>
+    <Link href="/who-we-are">Who we are</Link>
+    <Link href="/principles">Our principles</Link>
+    <Link href="/careers">Careers</Link>
+    <Link href="/newsroom">Newsroom</Link>
+  </FooterGroup>
+</Footer>
+
+// four — the default, and the widest the band goes
+<Footer label="Footer" columns="4" copyright="© 2026 Deriv. All rights reserved.">{footergroups}</Footer>
+```