@deriv-com/dds-marketing 1.1.1 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (256) hide show
  1. package/.llm/components/accordion.md +4 -0
  2. package/.llm/components/accordionitem.md +4 -0
  3. package/.llm/components/aspectratio.md +4 -0
  4. package/.llm/components/awards.md +4 -0
  5. package/.llm/components/background.md +4 -0
  6. package/.llm/components/badge.md +7 -3
  7. package/.llm/components/bottomsheet.md +7 -3
  8. package/.llm/components/breadcrumb.md +4 -0
  9. package/.llm/components/breadcrumbitem.md +4 -0
  10. package/.llm/components/button.md +4 -0
  11. package/.llm/components/buttonicon.md +10 -6
  12. package/.llm/components/card.md +5 -1
  13. package/.llm/components/cardbody.md +5 -1
  14. package/.llm/components/cardbutton.md +4 -0
  15. package/.llm/components/checkbox.md +1 -1
  16. package/.llm/components/comparisoncards.md +4 -0
  17. package/.llm/components/comparisontable.md +4 -0
  18. package/.llm/components/ctabanner.md +4 -0
  19. package/.llm/components/ctabannerslider.md +4 -0
  20. package/.llm/components/datatable.md +4 -0
  21. package/.llm/components/divider.md +4 -0
  22. package/.llm/components/downloadbanner.md +4 -0
  23. package/.llm/components/dropdownmenu.md +9 -5
  24. package/.llm/components/estimator.md +336 -0
  25. package/.llm/components/faqaccordion.md +4 -0
  26. package/.llm/components/featurebullets.md +4 -0
  27. package/.llm/components/featurecards.md +5 -1
  28. package/.llm/components/featurecardscarousel.md +4 -0
  29. package/.llm/components/featurescroll.md +5 -1
  30. package/.llm/components/featuresplit.md +4 -0
  31. package/.llm/components/featurestack.md +4 -0
  32. package/.llm/components/filterchip.md +5 -1
  33. package/.llm/components/footer.md +4 -0
  34. package/.llm/components/footergroup.md +4 -0
  35. package/.llm/components/grid.md +4 -0
  36. package/.llm/components/icon.md +9 -5
  37. package/.llm/components/illustrationcard.md +4 -0
  38. package/.llm/components/illustrationscene.md +4 -0
  39. package/.llm/components/imagebanner.md +6 -2
  40. package/.llm/components/landinghero.md +4 -0
  41. package/.llm/components/link.md +5 -1
  42. package/.llm/components/logocolumns.md +4 -0
  43. package/.llm/components/logorows.md +4 -0
  44. package/.llm/components/menuitem.md +6 -2
  45. package/.llm/components/navbar.md +5 -1
  46. package/.llm/components/navbaritem.md +4 -0
  47. package/.llm/components/navbarmenu.md +4 -0
  48. package/.llm/components/navbarmenugroup.md +4 -0
  49. package/.llm/components/navbarpanel.md +4 -0
  50. package/.llm/components/navbarswitcher.md +10 -6
  51. package/.llm/components/navbarswitcheroption.md +4 -0
  52. package/.llm/components/option.md +5 -1
  53. package/.llm/components/pageheader.md +4 -0
  54. package/.llm/components/pagination.md +4 -0
  55. package/.llm/components/paginationdots.md +4 -0
  56. package/.llm/components/producthero.md +4 -0
  57. package/.llm/components/removablechip.md +5 -1
  58. package/.llm/components/resourcebanner.md +4 -0
  59. package/.llm/components/row.md +4 -0
  60. package/.llm/components/scenescroll.md +4 -0
  61. package/.llm/components/scroller.md +4 -0
  62. package/.llm/components/searchinput.md +4 -0
  63. package/.llm/components/segmentedcontrol.md +5 -1
  64. package/.llm/components/segmentedcontrolitem.md +6 -2
  65. package/.llm/components/select.md +4 -0
  66. package/.llm/components/selectchip.md +4 -0
  67. package/.llm/components/spinner.md +4 -0
  68. package/.llm/components/stack.md +4 -0
  69. package/.llm/components/stats.md +4 -0
  70. package/.llm/components/statusdot.md +4 -0
  71. package/.llm/components/steps.md +18 -6
  72. package/.llm/components/stickycards.md +4 -0
  73. package/.llm/components/subdomainnavbar.md +5 -1
  74. package/.llm/components/tab.md +6 -2
  75. package/.llm/components/table.md +4 -0
  76. package/.llm/components/tablebody.md +4 -0
  77. package/.llm/components/tablecell.md +4 -0
  78. package/.llm/components/tablehead.md +4 -0
  79. package/.llm/components/tableheadercell.md +4 -0
  80. package/.llm/components/tablerow.md +4 -0
  81. package/.llm/components/tablist.md +4 -0
  82. package/.llm/components/teamgrid.md +4 -0
  83. package/.llm/components/testimonialrow.md +4 -0
  84. package/.llm/components/testimonialslider.md +4 -0
  85. package/.llm/components/textarea.md +4 -0
  86. package/.llm/components/textinput.md +5 -1
  87. package/.llm/components/textscroll.md +4 -0
  88. package/.llm/components/tiers.md +4 -0
  89. package/.llm/components/typography.md +4 -0
  90. package/.llm/digest/accordion.md +1 -1
  91. package/.llm/digest/accordionitem.md +1 -1
  92. package/.llm/digest/aspectratio.md +1 -1
  93. package/.llm/digest/awards.md +1 -1
  94. package/.llm/digest/background.md +1 -1
  95. package/.llm/digest/badge.md +1 -1
  96. package/.llm/digest/bottomsheet.md +1 -1
  97. package/.llm/digest/breadcrumb.md +1 -1
  98. package/.llm/digest/breadcrumbitem.md +1 -1
  99. package/.llm/digest/button.md +1 -1
  100. package/.llm/digest/buttonicon.md +1 -1
  101. package/.llm/digest/card.md +1 -1
  102. package/.llm/digest/cardbody.md +1 -1
  103. package/.llm/digest/cardbutton.md +1 -1
  104. package/.llm/digest/checkbox.md +1 -1
  105. package/.llm/digest/comparisoncards.md +1 -1
  106. package/.llm/digest/comparisontable.md +1 -1
  107. package/.llm/digest/ctabanner.md +1 -1
  108. package/.llm/digest/ctabannerslider.md +1 -1
  109. package/.llm/digest/datatable.md +1 -1
  110. package/.llm/digest/divider.md +1 -1
  111. package/.llm/digest/downloadbanner.md +1 -1
  112. package/.llm/digest/dropdownmenu.md +1 -1
  113. package/.llm/digest/estimator.md +66 -0
  114. package/.llm/digest/faqaccordion.md +1 -1
  115. package/.llm/digest/featurebullets.md +1 -1
  116. package/.llm/digest/featurecards.md +1 -1
  117. package/.llm/digest/featurecardscarousel.md +1 -1
  118. package/.llm/digest/featurescroll.md +1 -1
  119. package/.llm/digest/featuresplit.md +1 -1
  120. package/.llm/digest/featurestack.md +1 -1
  121. package/.llm/digest/filterchip.md +1 -1
  122. package/.llm/digest/footer.md +1 -1
  123. package/.llm/digest/footergroup.md +1 -1
  124. package/.llm/digest/grid.md +1 -1
  125. package/.llm/digest/icon.md +1 -1
  126. package/.llm/digest/illustrationcard.md +1 -1
  127. package/.llm/digest/illustrationscene.md +1 -1
  128. package/.llm/digest/imagebanner.md +2 -2
  129. package/.llm/digest/landinghero.md +1 -1
  130. package/.llm/digest/link.md +1 -1
  131. package/.llm/digest/logocolumns.md +1 -1
  132. package/.llm/digest/logorows.md +1 -1
  133. package/.llm/digest/menuitem.md +1 -1
  134. package/.llm/digest/navbar.md +1 -1
  135. package/.llm/digest/navbaritem.md +1 -1
  136. package/.llm/digest/navbarmenu.md +1 -1
  137. package/.llm/digest/navbarmenugroup.md +1 -1
  138. package/.llm/digest/navbarpanel.md +1 -1
  139. package/.llm/digest/navbarswitcher.md +1 -1
  140. package/.llm/digest/navbarswitcheroption.md +1 -1
  141. package/.llm/digest/option.md +1 -1
  142. package/.llm/digest/pageheader.md +1 -1
  143. package/.llm/digest/pagination.md +1 -1
  144. package/.llm/digest/paginationdots.md +1 -1
  145. package/.llm/digest/producthero.md +1 -1
  146. package/.llm/digest/removablechip.md +1 -1
  147. package/.llm/digest/resourcebanner.md +1 -1
  148. package/.llm/digest/row.md +1 -1
  149. package/.llm/digest/scenescroll.md +1 -1
  150. package/.llm/digest/scroller.md +1 -1
  151. package/.llm/digest/searchinput.md +1 -1
  152. package/.llm/digest/segmentedcontrol.md +1 -1
  153. package/.llm/digest/segmentedcontrolitem.md +2 -2
  154. package/.llm/digest/select.md +1 -1
  155. package/.llm/digest/selectchip.md +1 -1
  156. package/.llm/digest/spinner.md +1 -1
  157. package/.llm/digest/stack.md +1 -1
  158. package/.llm/digest/stats.md +1 -1
  159. package/.llm/digest/statusdot.md +1 -1
  160. package/.llm/digest/steps.md +3 -3
  161. package/.llm/digest/stickycards.md +1 -1
  162. package/.llm/digest/subdomainnavbar.md +1 -1
  163. package/.llm/digest/tab.md +1 -1
  164. package/.llm/digest/table.md +1 -1
  165. package/.llm/digest/tablebody.md +1 -1
  166. package/.llm/digest/tablecell.md +1 -1
  167. package/.llm/digest/tablehead.md +1 -1
  168. package/.llm/digest/tableheadercell.md +1 -1
  169. package/.llm/digest/tablerow.md +1 -1
  170. package/.llm/digest/tablist.md +1 -1
  171. package/.llm/digest/teamgrid.md +1 -1
  172. package/.llm/digest/testimonialrow.md +1 -1
  173. package/.llm/digest/testimonialslider.md +1 -1
  174. package/.llm/digest/textarea.md +1 -1
  175. package/.llm/digest/textinput.md +1 -1
  176. package/.llm/digest/textscroll.md +1 -1
  177. package/.llm/digest/tiers.md +1 -1
  178. package/.llm/digest/typography.md +1 -1
  179. package/.llm/index.md +2 -1
  180. package/.llm/tokens.md +5 -0
  181. package/AGENTS.md +1 -0
  182. package/README.md +28 -3
  183. package/dist/components/blocks/block-parallax.css +62 -0
  184. package/dist/components/blocks/comparison-cards/comparison-cards-impl.css +0 -12
  185. package/dist/components/blocks/download-banner/DownloadBanner.d.ts +1 -0
  186. package/dist/components/blocks/download-banner/DownloadBanner.js +2 -1
  187. package/dist/components/blocks/estimator/Estimator.css +206 -0
  188. package/dist/components/blocks/estimator/Estimator.d.ts +27 -0
  189. package/dist/components/blocks/estimator/Estimator.js +61 -0
  190. package/dist/components/blocks/estimator/Estimator.types.d.ts +63 -0
  191. package/dist/components/blocks/estimator/Estimator.types.js +25 -0
  192. package/dist/components/blocks/estimator/estimator-impl.css +159 -0
  193. package/dist/components/blocks/feature-bullets/FeatureBullets.d.ts +1 -0
  194. package/dist/components/blocks/feature-bullets/FeatureBullets.js +2 -1
  195. package/dist/components/blocks/feature-cards/FeatureCards.d.ts +1 -0
  196. package/dist/components/blocks/feature-cards/FeatureCards.js +1 -0
  197. package/dist/components/blocks/feature-scroll/FeatureScroll.js +9 -3
  198. package/dist/components/blocks/feature-scroll/feature-scroll-impl.css +63 -40
  199. package/dist/components/blocks/feature-split/FeatureSplit.d.ts +1 -0
  200. package/dist/components/blocks/feature-split/FeatureSplit.js +2 -1
  201. package/dist/components/blocks/feature-stack/FeatureStack.d.ts +1 -0
  202. package/dist/components/blocks/feature-stack/FeatureStack.js +2 -1
  203. package/dist/components/blocks/image-banner/ImageBanner.d.ts +1 -0
  204. package/dist/components/blocks/image-banner/ImageBanner.js +2 -1
  205. package/dist/components/blocks/image-banner/ImageBanner.types.d.ts +2 -2
  206. package/dist/components/blocks/image-banner/ImageBanner.types.js +1 -1
  207. package/dist/components/blocks/image-banner/image-banner-impl.css +7 -51
  208. package/dist/components/blocks/landing-hero/LandingHero.css +1 -1
  209. package/dist/components/blocks/landing-hero/LandingHero.d.ts +1 -0
  210. package/dist/components/blocks/landing-hero/LandingHero.js +2 -1
  211. package/dist/components/blocks/product-hero/ProductHero.css +1 -1
  212. package/dist/components/blocks/product-hero/ProductHero.d.ts +1 -0
  213. package/dist/components/blocks/product-hero/ProductHero.js +2 -1
  214. package/dist/components/blocks/steps/Steps.css +2 -2
  215. package/dist/components/blocks/steps/Steps.d.ts +1 -0
  216. package/dist/components/blocks/steps/Steps.js +3 -2
  217. package/dist/components/blocks/steps/Steps.types.d.ts +1 -1
  218. package/dist/components/blocks/steps/steps-impl.css +76 -4
  219. package/dist/components/blocks/steps/use-turn.d.ts +8 -8
  220. package/dist/components/blocks/steps/use-turn.js +19 -16
  221. package/dist/components/blocks/team-grid/TeamGrid.d.ts +1 -0
  222. package/dist/components/blocks/team-grid/TeamGrid.js +2 -1
  223. package/dist/components/core/card/Card.css +1 -1
  224. package/dist/components/core/segmented-control-item/SegmentedControlItem.types.d.ts +1 -1
  225. package/dist/components/core/select/Select.css +2 -0
  226. package/dist/components/core/select/select-impl.css +58 -0
  227. package/dist/components/core/text-area/TextArea.css +2 -0
  228. package/dist/components/core/text-area/text-area-impl.css +54 -0
  229. package/dist/components/core/text-input/TextInput.css +2 -0
  230. package/dist/components/core/text-input/text-input-impl.css +63 -0
  231. package/dist/components/estimator-data.d.ts +29 -0
  232. package/dist/components/estimator-data.js +12 -0
  233. package/dist/components/index.d.ts +3 -0
  234. package/dist/components/index.js +2 -0
  235. package/dist/icons/accounts.d.ts +1 -0
  236. package/dist/icons/accounts.js +1 -0
  237. package/dist/icons/app-stores.d.ts +1 -0
  238. package/dist/icons/app-stores.js +1 -0
  239. package/dist/icons/currency.d.ts +1 -0
  240. package/dist/icons/currency.js +1 -0
  241. package/dist/icons/flag.d.ts +1 -0
  242. package/dist/icons/flag.js +1 -0
  243. package/dist/icons/illustrative.d.ts +1 -0
  244. package/dist/icons/illustrative.js +1 -0
  245. package/dist/icons/index.d.ts +1 -0
  246. package/dist/icons/index.js +4 -0
  247. package/dist/icons/markets.d.ts +1 -0
  248. package/dist/icons/markets.js +1 -0
  249. package/dist/icons/social.d.ts +1 -0
  250. package/dist/icons/social.js +1 -0
  251. package/dist/icons/system.d.ts +1 -0
  252. package/dist/icons/system.js +1 -0
  253. package/dist/icons/trade.d.ts +1 -0
  254. package/dist/icons/trade.js +1 -0
  255. package/dist/marketing.css +10 -0
  256. package/package.json +44 -2
@@ -2,7 +2,7 @@
2
2
 
3
3
  # FilterChip
4
4
 
5
- A token the reader turns on and off in place, standing for one narrowing of the set shown beside it. …
5
+ Turns one filter on or off, in place
6
6
 
7
7
  `import { FilterChip } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Footer
4
4
 
5
- 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. …
5
+ The band that closes every marketing page: brand, links, legal text
6
6
 
7
7
  `import { Footer } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # FooterGroup
4
4
 
5
- A named handful of destinations in the footer: a word over a short list. It is the footer's repeating unit and the only thing inside it that repeats — everything else in a footer appears once. …
5
+ A titled list of links in the footer
6
6
 
7
7
  `import { FooterGroup } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Grid
4
4
 
5
- A field of equal tracks, and one measure between them. …
5
+ Lays items out in equal columns with consistent spacing
6
6
 
7
7
  `import { Grid } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Icon
4
4
 
5
- Renders a Quill system glyph at a token size, taking its colour from the text around it. The glyph is imported from @deriv-com/quill-icons-web and passed as the only child. …
5
+ Renders a Quill glyph at a token size, in the colour of the text around it
6
6
 
7
7
  `import { Icon } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # IllustrationCard
4
4
 
5
- A pane of glass holding a piece of product information — a market's price, a balance, a status — in one of three shapes, used as a picture: laid over a photograph or a piece of art, or standing on its own as the image a section shows beside its words. …
5
+ A glass card showing product information, used as an illustration
6
6
 
7
7
  `import { IllustrationCard } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # IllustrationScene
4
4
 
5
- A photograph with an IllustrationCard laid over it — the product shown in the hands of the people who use it: a trade ticket over a trader on the move, a balance over someone at a desk. …
5
+ A photograph with an IllustrationCard laid over it
6
6
 
7
7
  `import { IllustrationScene } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # ImageBanner
4
4
 
5
- A dark card in the middle of a page, pairing a headline and a line under it with a photograph — beside it or behind it, with one action. …
5
+ A dark card pairing a headline and one action with a photograph
6
6
 
7
7
  `import { ImageBanner } from '@deriv-com/dds-marketing'`
8
8
 
@@ -51,7 +51,7 @@ A dark card in the middle of a page, pairing a headline and a line under it with
51
51
  - never: A second action. The card asks for one thing
52
52
  - **media** `node` · required — 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
53
53
  - never: Artwork with words in it. The cover photograph sits under a scrim and the text, and the split crops to fill
54
- - **parallax** `boolean` · default false — 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. …
54
+ - **parallax** `boolean` · default true — The photograph drifts against the scroll as the card passes through the view, the drift every block's picture shares — drawn at motion.scale.parallax and moved from motion.translate.parallax-from to motion.translate.parallax-to over the whole pass — so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. …
55
55
  - never: Holding still for a reader who asked for less motion — it already holds still for them, and in a browser that cannot drive it from the scroll
56
56
 
57
57
  ## Inside it
@@ -2,7 +2,7 @@
2
2
 
3
3
  # LandingHero
4
4
 
5
- The band that opens a main landing page: the one thing the page is about, said once, at the top, over a ground dark enough that nothing above it competes. One of three opening bands, and the widest. …
5
+ Opens a main landing page with its headline over a dark background
6
6
 
7
7
  `import { LandingHero } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Link
4
4
 
5
- A destination named inside a sentence, or standing on its own under one. …
5
+ Takes the visitor to another page, inline or on its own
6
6
 
7
7
  `import { Link } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # LogoColumns
4
4
 
5
- A section that backs one claim with the names behind it: a heading, a line, an optional disclaimer and a way onward, beside a wall of logo tiles in two columns that run in opposite directions as the reader scrolls past — one rising, one falling — fading out at the wall's top and bottom edge so the set reads as longer than the space it is shown in. …
5
+ Backs a claim with two columns of logos that scroll in opposite directions
6
6
 
7
7
  `import { LogoColumns } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # LogoRows
4
4
 
5
- A section that backs one claim with the names behind it, stacked: a heading, a line and a way onward, centred, over two rows of logo tiles across the band's full width that slide sideways in opposite directions as the reader scrolls past — fading out at both of their ends, so the set reads as longer than the band. …
5
+ Backs a claim with two rows of logos that slide in opposite directions
6
6
 
7
7
  `import { LogoRows } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # MenuItem
4
4
 
5
- One command in a menu. Pressing it does something and the menu shuts — it holds no value and carries no mark, so there is nothing about it to find on reopening. …
5
+ One item in a DropdownMenu
6
6
 
7
7
  `import { MenuItem } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Navbar
4
4
 
5
- The bar across the top of a marketing page, and three regions: the mark that says whose site this is, the places the site has, and the things a reader reaches for rather than navigates to — the language, the theme, and what the site wants them to do. …
5
+ The bar across the top of a marketing page: logo, links and actions
6
6
 
7
7
  `import { Navbar } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # NavbarItem
4
4
 
5
- One place the site has, in the bar across the top of it. An anchor with a target around it, a mark for the section the reader is currently in, and nothing else. …
5
+ One link in the Navbar
6
6
 
7
7
  `import { NavbarItem } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # NavbarMenu
4
4
 
5
- A destination in the bar that opens rather than goes: a named trigger, and a wide panel beneath it holding the section's own destinations in columns, usually with something promotional beside them. …
5
+ A Navbar item that opens a wide panel of links
6
6
 
7
7
  `import { NavbarMenu } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # NavbarMenuGroup
4
4
 
5
- A named handful of destinations inside a section's panel: a word over a short list, so a reader scanning a panel of twenty links is reading four sets of five rather than twenty of anything. …
5
+ A titled list of links inside a NavbarMenu panel
6
6
 
7
7
  `import { NavbarMenuGroup } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # NavbarPanel
4
4
 
5
- The whole of a site's navigation at a width the bar cannot hold it: the mark and a way out across the top, the destinations down the middle, whatever the site wants across the foot. …
5
+ The full site navigation for screens too narrow for the Navbar
6
6
 
7
7
  `import { NavbarPanel } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # NavbarSwitcher
4
4
 
5
- Something a reader sets rather than somewhere they go: the language the page is read in, the region its prices are in, the theme it is drawn in. …
5
+ Sets a site preference from the Navbar, such as language or theme
6
6
 
7
7
  `import { NavbarSwitcher } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # NavbarSwitcherOption
4
4
 
5
- One choice inside a NavbarSwitcher: a language, a region, a theme. …
5
+ One choice in a NavbarSwitcher, such as a language or theme
6
6
 
7
7
  `import { NavbarSwitcherOption } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Option
4
4
 
5
- One answer on offer inside a control that opens a list. …
5
+ One choice in a list that opens from a control
6
6
 
7
7
  `import { Option } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # PageHeader
4
4
 
5
- The band that opens a company or a legal page: the page's name, a line saying what it is, and nothing else. The third of three opening bands and the only one that is not a hero. …
5
+ Opens a company or legal page with its title and one line of context
6
6
 
7
7
  `import { PageHeader } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Pagination
4
4
 
5
- The control that moves a reader through a set too large to show at once. …
5
+ Moves the reader through a set too large to show at once
6
6
 
7
7
  `import { Pagination } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # PaginationDots
4
4
 
5
- A row of marks, one per position in a short sequence — the slides of a slider, the steps of a walkthrough — with the one the reader is on drawn as a longer, solid pill and the rest as small translucent dots. …
5
+ Shows which item of a short sequence is in view
6
6
 
7
7
  `import { PaginationDots } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # ProductHero
4
4
 
5
- The band that opens a product or a market page: the one thing the page is about, centred, over a ground dark enough that nothing above it competes. The second of three opening bands. …
5
+ Opens a product or market page with a centred headline over a dark background
6
6
 
7
7
  `import { ProductHero } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # RemovableChip
4
4
 
5
- A token standing for one thing that is already in play — a topic the reader has filtered by, a tag on an article, a market they have picked out — which they can take back out. …
5
+ Shows one applied item, such as a filter or tag, that can be removed
6
6
 
7
7
  `import { RemovableChip } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # ResourceBanner
4
4
 
5
- A dark panel at the end of an informational section that points readers at related guides, policies or reference pages — the "here's where to read more" block. …
5
+ A dark panel that points readers to related guides and reference pages
6
6
 
7
7
  `import { ResourceBanner } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Row
4
4
 
5
- A line, and one measure between the things on it. It draws nothing — no ground, no edge, no padding — and owns one decision: how far apart the things beside one another sit. …
5
+ Lays items out in a line with consistent spacing
6
6
 
7
7
  `import { Row } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # SceneScroll
4
4
 
5
- A full-screen section of two scenes — each a photograph filling the band with a heading and a line over it — that change over as the reader scrolls: the screen holds still while the second photograph dissolves in over the first and the first scene's words give way to the second's. …
5
+ Two full-screen photo scenes that cross-fade as the reader scrolls
6
6
 
7
7
  `import { SceneScroll } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Scroller
4
4
 
5
- A rail, and one measure between the things on it. …
5
+ Lays items out in a horizontally scrolling rail
6
6
 
7
7
  `import { Scroller } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # SearchInput
4
4
 
5
- A query a visitor types to find something the page did not put in front of them — a help centre, a blog or docs index, a directory of markets. …
5
+ A field for searching a help centre, blog or directory
6
6
 
7
7
  `import { SearchInput } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # SegmentedControl
4
4
 
5
- A row of joined segments from which exactly one is chosen, drawn from a short set of alternatives that exclude each other. …
5
+ Picks exactly one option from a short set of joined segments
6
6
 
7
7
  `import { SegmentedControl } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # SegmentedControlItem
4
4
 
5
- One option in a segmented control, and nothing on its own — a segment says it is the chosen one of a set, and a set of one has nothing to be chosen from. …
5
+ One option in a SegmentedControl
6
6
 
7
7
  `import { SegmentedControlItem } from '@deriv-com/dds-marketing'`
8
8
 
@@ -38,7 +38,7 @@ One option in a segmented control, and nothing on its own — a segment says it
38
38
  - never: The words the reader sees. That is label — a value is an identifier the page matches on, and one doubling as copy breaks the moment the copy is reworded
39
39
  - **label** `string` · required — Always — it is the segment's accessible name as well as its words, and a radio with no name is announced as a control with nothing in it. …
40
40
  - never: A sentence, or a value with its unit spelled out. 'Yearly' rather than 'Billed once a year' — the explanation belongs beside the control, where a reader who is not choosing still sees it
41
- - **icon** `node` · optional — The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/quill-icons-web and pass the element
41
+ - **icon** `node` · optional — The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/dds-marketing/icons and pass the element
42
42
  - never: Decoration. A row of segments is scanned, and a mark that says nothing the label does not is one more thing to look past on every one of them
43
43
  - **onSelect** `callback` · optional — This segment reports its own presses — logging which plan a visitor looked at, say. It is called with this segment's value, and SegmentedControl chains its own handler after it rather than replacing it
44
44
  - never: Holding which segment is current. That is the group's onChange, which fires once for the row; a page wiring up one handler per segment has written the group's job out by hand
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Select
4
4
 
5
- A control for choosing one answer from a set the reader scans. …
5
+ Chooses one option from a list
6
6
 
7
7
  `import { Select } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # SelectChip
4
4
 
5
- A chip that opens a list of answers and keeps the one chosen, so a filter row shows the current narrowing rather than the name of a filter. …
5
+ A chip that opens a list and shows the option chosen
6
6
 
7
7
  `import { SelectChip } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Spinner
4
4
 
5
- A turning ring that says a wait is real and the page has not stalled. …
5
+ Shows that something is loading
6
6
 
7
7
  `import { Spinner } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Stack
4
4
 
5
- A column, and one measure between its rows. It draws nothing — no ground, no edge, no padding — and owns one decision: how far apart the things stacked in it sit. …
5
+ Lays items out in a column with consistent spacing
6
6
 
7
7
  `import { Stack } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Stats
4
4
 
5
- A trust and credibility section of key numbers: a heading, a line under it where the heading needs one, and the figures — each a number and the few words that say what it counts. …
5
+ A heading over a few key figures, each with a short label
6
6
 
7
7
  `import { Stats } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # StatusDot
4
4
 
5
- A small coloured circle that marks one thing in a list of otherwise equal things — either because it is worth noticing, or because it is in a state the others are not. …
5
+ A small dot marking an item as notable or in a different state
6
6
 
7
7
  `import { StatusDot } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Steps
4
4
 
5
- A two-column how-it-works section pairing a supporting picture with a numbered, ordered list of steps, each a title and a line describing it. …
5
+ A numbered list of steps beside a supporting picture
6
6
 
7
7
  `import { Steps } from '@deriv-com/dds-marketing'`
8
8
 
@@ -36,8 +36,8 @@ A two-column how-it-works section pairing a supporting picture with a numbered,
36
36
  - `start` — The default, and the reference design's: the picture first, then the steps it introduces
37
37
  - `end` — The steps first, for a section sitting under a split whose picture is already at the start
38
38
  - never: Moving the picture on a phone. There is one column there and the picture leads it
39
- - **autoplay** `boolean` · default false — Whether the steps take their turn on their own: one step is current, its rule fills over motion.duration.dwell, then the next takes over, and back to the first after the last. …
40
- - never: Steps whose descriptions take longer to read than motion.duration.dwell — leave it off rather than cut the copy to the timer. And a list with no picture per step, where the only thing that moves is a rule: the turn is worth it when the picture changes with it
39
+ - **autoplay** `boolean` · default false — Whether the steps take their turn on their own: one step is current, its rule fills over motion.duration.step, then the next takes over, and back to the first after the last. …
40
+ - never: Steps whose descriptions take longer to read than motion.duration.step — leave it off rather than cut the copy to the timer. And a list with no picture per step, where the only thing that moves is a rule: the turn is worth it when the picture changes with it
41
41
  - **title** `string` · required — Always. What the steps get a reader to, in the fewest words that say it — 'Get started in 3 steps'
42
42
  - never: A sentence. The steps underneath are the argument; this only has to name where they lead
43
43
  - **steps** `data` · required — Always. The steps, in the order a reader takes them — three or four is right, six the most. Each is a short imperative and a sentence under about two hundred characters. …
@@ -2,7 +2,7 @@
2
2
 
3
3
  # StickyCards
4
4
 
5
- A section whose cards pile up as the page scrolls: a heading, and under it a set of cards that each stop near the top of the window while the next one slides up over them, so the cards are read one at a time and the edges of the ones already read stay showing above the one being read. …
5
+ A heading over cards that stack on top of each other as the page scrolls
6
6
 
7
7
  `import { StickyCards } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # SubdomainNavbar
4
4
 
5
- The bar across the top of a subdomain — a documentation site, a playground, a product surface that lives beside the marketing site rather than inside it. …
5
+ The top bar for a subdomain such as docs or a product surface
6
6
 
7
7
  `import { SubdomainNavbar } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Tab
4
4
 
5
- One item in a strip, naming a version of what the page is already about. It cannot stand on its own: selected means selected against something, and a tab with no siblings is a heading that highlights. …
5
+ One option in a TabList
6
6
 
7
7
  `import { Tab } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Table
4
4
 
5
- Structured data in rows and columns, where every row has the same shape. …
5
+ Shows structured data in rows and columns
6
6
 
7
7
  `import { Table } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TableBody
4
4
 
5
- The rows of data, under the header. …
5
+ The data rows of a Table
6
6
 
7
7
  `import { TableBody } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TableCell
4
4
 
5
- One value in a row, under the column that names it. It is a slot: what goes in is the page's to compose, which is what lets a cell hold a badge, a link or a control rather than only text. …
5
+ One value in a table row
6
6
 
7
7
  `import { TableCell } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TableHead
4
4
 
5
- The column names, above the data, and the filter row where there is one. …
5
+ The header rows of a Table
6
6
 
7
7
  `import { TableHead } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TableHeaderCell
4
4
 
5
- The name of a column, announced before every value under it. …
5
+ The name of one table column
6
6
 
7
7
  `import { TableHeaderCell } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TableRow
4
4
 
5
- One row of a table: the cells that answer the same questions in the same order as every other row. It owns the rule under it and whether it reads as picked, and nothing about what any cell holds. …
5
+ One row of a Table
6
6
 
7
7
  `import { TableRow } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TabList
4
4
 
5
- A strip of comparable versions of one thing, one of them showing at a time. …
5
+ Switches between views of the same content
6
6
 
7
7
  `import { TabList } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TeamGrid
4
4
 
5
- A section that sets out the people behind a company: a heading, and a grid of people under it — each a square photograph, their name, what they do and, where they have one, a link to a profile of theirs elsewhere. …
5
+ A grid of the people behind a company, with photo, name and role
6
6
 
7
7
  `import { TeamGrid } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TestimonialRow
4
4
 
5
- A section that lets a review service's numbers back the page: a heading with the overall rating under it — and a way to where the reviews were collected — over a row of rated reviews the reader moves along, each a short review under its star rating with the reviewer's name, and two arrows under the row that step it a card at a time. …
5
+ An overall rating over a scrollable row of customer reviews
6
6
 
7
7
  `import { TestimonialRow } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TestimonialSlider
4
4
 
5
- A section that lets the people who use the product say what it did for them: a heading over one quote at a time, in a card, with the name of who said it. …
5
+ Customer quotes shown one at a time, each with who said it
6
6
 
7
7
  `import { TestimonialSlider } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TextArea
4
4
 
5
- A field for what a visitor wants to say in their own words — the message on a contact form, the 'tell us about your project' on an enquiry, the reason someone is applying to partner. …
5
+ A field for a longer message, such as on a contact form
6
6
 
7
7
  `import { TextArea } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TextInput
4
4
 
5
- One line of text a visitor types before they are a customer. …
5
+ A single-line text field
6
6
 
7
7
  `import { TextInput } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TextScroll
4
4
 
5
- A full-width section holding one large statement — a mission, a brand message — whose words brighten one after another as the reader scrolls past, from dimmed to full strength, so the sentence is read at the pace the page is moved. …
5
+ One large statement whose words brighten as the reader scrolls
6
6
 
7
7
  `import { TextScroll } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Tiers
4
4
 
5
- A partnership-tier section: a centred heading over an ordered row of tiers, each a medal, a name and the stage it stands for, a card stating what the tier gives, and the bar a partner clears to reach it — with an optional way on under the row. …
5
+ A row of partnership tiers, each with what it offers and how to reach it
6
6
 
7
7
  `import { Tiers } from '@deriv-com/dds-marketing'`
8
8