@gravity-ui/page-constructor 8.15.0 → 8.17.0

package/build/docs/blocks/FoldableList.md

@@ -0,0 +1,78 @@
+# FoldableList
+
+Renders a two-column block: a content panel on the left (title, text, links, buttons) and a list of collapsible items on the right, each with its own title, YFM text, and optional link. Use it for FAQ-style or specification pages where each row expands to reveal more detail.
+
+## Block type
+
+`type: 'foldable-list-block'`
+
+## When to use
+
+- FAQs, glossaries, or specification lists where each entry should expand/collapse.
+- When you need a sticky intro panel (title, description, CTA) next to a long list.
+- When individual answers may contain a bulleted list (`dash` or `disk` markers).
+
+## Example
+
+```json
+{
+  "type": "foldable-list-block",
+  "title": "Lorem ipsum",
+  "text": "Dolor sit amet, consectetur adipiscing elit [sed do eiusmod](https://example.com) tempor incididunt ut labore et dolore magna aliqua.",
+  "additionalInfo": "Dolor sit amet [consectetur adipiscing](https://example.com) Duis aute irure dolor in reprehenderit.",
+  "links": [{"url": "/security", "text": "Learn more", "theme": "normal", "arrow": true}],
+  "buttons": [{"text": "Button", "theme": "action", "url": "https://example.com"}],
+  "items": [
+    {
+      "title": "Lorem ipsum dolor sit amet 0",
+      "text": "Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "link": {"url": "#", "text": "Documentation", "theme": "normal", "arrow": true}
+    },
+    {
+      "title": "Ut enim ad minim veniam, quis nostrud exercitation ullamco? 1",
+      "text": "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+      "link": {"url": "#", "text": "Documentation", "theme": "normal", "arrow": true}
+    },
+    {
+      "title": "Some title with a list",
+      "text": "Lorem ipsum dolor sit amet:\n\n- Lorem ipsum\n- Lorem ipsum\n- Lorem ipsum",
+      "link": {"url": "#", "text": "Documentation", "theme": "normal", "arrow": true},
+      "listStyle": "disk"
+    }
+  ]
+}
+```
+
+## Properties
+
+| Property           | Type                    | Default | Description                                                                                              |
+| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| `title` _required_ | `string \| TitleProps`  | —       | Left-panel heading (string or Title options). |
+| `text`             | `string`                | —       | YFM body text in the left panel.                                                                         |
+| `additionalInfo`   | `string`                | —       | YFM supplementary text in the left panel.                                                                |
+| `links`            | `LinkProps[]`           | —       | Array of links rendered in the left panel.                                                               |
+| `buttons`          | `ButtonBlock[]`         | —       | Array of buttons rendered in the left panel.                                                             |
+| `list`             | `ContentItem[]`         | —       | Icon + title + text list rendered in the left panel. Each item requires an `icon` or `gravityIcon`.      |
+| `controlPosition`  | `'default' \| 'bottom'` | —       | Position of the link/button controls in the left panel.                                                  |
+| `items` _required_ | `FoldableListItem[]`    | —       | Collapsible rows on the right (see below).                                                               |
+
+### `FoldableListItem`
+
+| Property           | Type               | Default  | Description                                      |
+| ------------------ | ------------------ | -------- | ------------------------------------------------ |
+| `title` _required_ | `string`           | —        | Row title (always visible).                      |
+| `text` _required_  | `string`           | —        | YFM body text revealed when the row is expanded. |
+| `link`             | `LinkProps`        | —        | Link rendered below the text.                    |
+| `listStyle`        | `'dash' \| 'disk'` | `'dash'` | Marker style for lists inside the text.          |
+
+### Common properties
+
+Inherits common block properties: `anchor`, `visible`, `indent` (`{top?, bottom?}`), `qa`, `className`, `animated`, `theme` (`'light' | 'dark'`), `when`, `context`. See the root README for details.
+
+## Themed values
+
+No dedicated themed props; the block follows the runtime `theme` for text/background coloring.
+
+## Storybook
+
+[FoldableList](https://preview.gravity-ui.com/page-constructor/?path=/docs/blocks-foldablelist--docs)

package/build/docs/blocks/Footer.md

@@ -0,0 +1,110 @@
+# Footer
+
+A configurable page footer assembled from optional floors: navigation columns, contacts (social icons), disclaimer, copyright (legal links, language switcher, logo), and an attribution strip.
+
+## Block type
+
+`type: 'footer-block'`
+
+## When to use
+
+- You need a site-wide footer with link columns and/or a logo.
+- You need social/contact icon links and/or a legal disclaimer.
+- You need a copyright floor with legal links, language switcher, or a logo.
+
+## Example
+
+```json
+{
+  "type": "footer-block",
+  "indentTop": "l",
+  "backgroundColor": {"light": "#ffffff", "dark": "#111111"},
+  "navigation": {
+    "logo": {
+      "image": {"src": "story-assets/icon_1-with-text_light.svg"},
+      "url": "/"
+    },
+    "columns": [
+      {
+        "title": "Product",
+        "links": [
+          {"text": "Overview", "url": "#overview"},
+          {"text": "Docs", "url": "#docs"}
+        ]
+      }
+    ]
+  },
+  "contacts": {
+    "title": "Join us",
+    "links": [
+      {
+        "icon": {"src": "story-assets/icons-github_light.svg"},
+        "url": "https://example.com",
+        "urlTitle": "GitHub"
+      }
+    ]
+  },
+  "disclaimer": {"text": "Legal disclaimer text.", "align": "left"},
+  "copyright": {
+    "links": [
+      {"text": "Privacy Policy", "url": "#privacy"},
+      {"text": "Terms", "url": "#terms"}
+    ],
+    "copyrightText": "© 2026 Company"
+  },
+  "attribution": true
+}
+```
+
+## Properties
+
+| Property          | Type                                                      | Default | Description                                                                             |
+| ----------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------- |
+| `navigation`      | `FooterNavigation`                                        | —       | Navigation floor: logo and required link columns. Rendered when `columns` is non-empty. |
+| `contacts`        | `FooterContacts`                                          | —       | Contacts floor: title + icon links. Rendered when `links` is non-empty.                 |
+| `disclaimer`      | `{text *required*, align *required*: 'left' \| 'center'}` | —       | Disclaimer floor rendered as YFM.                                                       |
+| `copyright`       | `FooterCopyright`                                         | —       | Copyright floor with optional legal links, language switcher, logo, and copyright text. |
+| `attribution`     | `boolean`                                                 | —       | Shows the branded "Created with ..." attribution strip.                                 |
+| `backgroundColor` | `string \| {light, dark}`                                 | —       | Theme-aware footer background color.                                                    |
+| `indentTop`       | `'0' \| 'xs' \| 's' \| 'm' \| 'l' \| 'xl'`                | —       | Top indent of the footer.                                                               |
+
+### `navigation` (FooterNavigation)
+
+| Property             | Type                                                                                       | Default                         | Description                                             |
+| -------------------- | ------------------------------------------------------------------------------------------ | ------------------------------- | ------------------------------------------------------- |
+| `columns` _required_ | `Array<{title *required*, links *required*: LinkProps[]}>`                                 | —                               | Link columns.                                           |
+| `logo`               | `{image *required*: ImageProps \| {light, dark}, url?, alt?, placement?: 'left' \| 'top'}` | —                               | Optional footer logo. `placement` defaults to `'left'`. |
+| `colSizes`           | `{sm?, md?, lg?, xl?, all?}`                                                               | `{all: 6, sm: 4, md: 3, lg: 3}` | Grid sizes per column.                                  |
+| `columnsPerRow`      | `number` (1–12)                                                                            | —                               | Switches to a fixed percentage-width-per-column layout. |
+
+### `contacts` (FooterContacts)
+
+| Property        | Type                                                                               | Default  | Description                                   |
+| --------------- | ---------------------------------------------------------------------------------- | -------- | --------------------------------------------- |
+| `title`         | `string`                                                                           | —        | Contacts floor heading.                       |
+| `links`         | `Array<{icon *required*: ImageProps \| {light, dark}, url *required*, urlTitle?}>` | —        | Social/contact icon links. Open in a new tab. |
+| `iconsSize`     | `'m' \| 'l'`                                                                       | `'l'`    | Icon size.                                    |
+| `linksPosition` | `'left' \| 'center'`                                                               | `'left'` | Horizontal alignment of icons.                |
+| `titlePosition` | `'top' \| 'near'`                                                                  | `'top'`  | Title placement relative to icons.            |
+
+### `copyright` (FooterCopyright)
+
+| Property                | Type                                                                                                              | Default      | Description                                       |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------- |
+| `links`                 | `LinkProps[]`                                                                                                     | —            | Legal or service links.                           |
+| `linksOverflowStrategy` | `'dropdown' \| 'line-wrap'`                                                                                       | `'dropdown'` | Overflow behavior for links.                      |
+| `languageSwitcher`      | `{items *required*: Array<{text *required*, href *required*}>, buttonText?, image?: ImageProps \| {light, dark}}` | —            | Dropdown language switcher rendered on the right. |
+| `logo`                  | `{image *required*: ImageProps \| {light, dark}, url?, alt?}`                                                     | —            | Optional logo for the copyright floor.            |
+| `copyrightText`         | `string`                                                                                                          | —            | Copyright text rendered on the right.             |
+
+### Common properties
+
+Inherits: `anchor`, `visible`, `indent`, `qa`, `className`, `animated`, `theme`, `when`, `context`. See root README.
+
+## Themed values
+
+`backgroundColor`, `navigation.logo.image`, `contacts.links[].icon`, `copyright.languageSwitcher.image`, and `copyright.logo.image` accept either a plain value or `{light, dark}`.
+
+## Storybook
+
+[Footer](https://preview.gravity-ui.com/page-constructor/?path=/docs/blocks-footer--docs)

package/build/docs/blocks/Form.md

@@ -0,0 +1,89 @@
+# Form
+
+A two-column block that renders a third-party form (Yandex Forms or HubSpot) alongside optional YFM text content, with a configurable layout direction and background.
+
+## Block type
+
+`type: 'form-block'`
+
+## When to use
+
+- You need to embed a Yandex Form or HubSpot form into a page assembled from JSON.
+- You want to place marketing copy, title, and links next to a lead-generation form.
+- You need a themed background (color or image) behind the form.
+
+## Example
+
+```json
+{
+  "type": "form-block",
+  "title": "Hubspot form",
+  "direction": "center",
+  "textContent": {
+    "title": "Lorem ipsum dolor sit amet",
+    "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+  },
+  "formData": {
+    "hubspot": {
+      "region": "eu1",
+      "portalId": "25764979",
+      "formId": "a3eb06a6-e8ce-45d4-81bd-7fadb7dab313"
+    }
+  }
+}
+```
+
+A Yandex form variant:
+
+```json
+{
+  "type": "form-block",
+  "formData": {
+    "yandex": {
+      "id": "5f3c4d2b1e2a4c0001a2b3c4"
+    }
+  }
+}
+```
+
+## Properties
+
+| Property              | Type                                                                                       | Default    | Description                                                                              |
+| --------------------- | ------------------------------------------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------- |
+| `formData` _required_ | `{yandex?: YandexFormProps \| {light, dark}, hubspot?: HubspotFormProps \| {light, dark}}` | —          | The form to embed. Exactly one of `yandex` or `hubspot` is expected.                     |
+| `title`               | `string`                                                                                   | —          | Block title rendered above the form.                                                     |
+| `textContent`         | `ContentBase` (without `size`, `centered`, `colSizes`)                                     | —          | Title, text (YFM), links, buttons, list items for the content column.                    |
+| `direction`           | `'content-form' \| 'form-content' \| 'center'`                                             | `'center'` | Layout direction of the content column relative to the form.                             |
+| `background`          | `ImageProps`                                                                               | —          | Background image or CSS style; `style` supports `{desktop, mobile}` breakpoints. Themed. |
+
+### `formData.yandex` (YandexFormProps)
+
+| Property        | Type     | Default | Description                                      |
+| --------------- | -------- | ------- | ------------------------------------------------ |
+| `id` _required_ | `string` | —       | Yandex Forms form id.                            |
+| `containerId`   | `string` | —       | Optional DOM container id for the embedded form. |
+
+### `formData.hubspot` (HubspotFormProps)
+
+| Property              | Type     | Default | Description                        |
+| --------------------- | -------- | ------- | ---------------------------------- |
+| `portalId` _required_ | `string` | —       | HubSpot portal id.                 |
+| `formId` _required_   | `string` | —       | HubSpot form id.                   |
+| `region`              | `string` | —       | HubSpot region (e.g. `'eu1'`).     |
+| `formInstanceId`      | `string` | —       | Optional HubSpot form instance id. |
+
+### Common properties
+
+Inherits: `anchor`, `visible`, `indent`, `qa`, `className`, `animated`, `theme`, `when`, `context`. See root README.
+
+## Setup notes
+
+HubSpot forms are loaded through the HubSpot embed script automatically; no extra provider configuration is required. Yandex Forms are loaded via the Yandex Forms script. If you use a custom React node instead of `formData`, pass it via the `customFormNode` / `additionalContentNode` props when mounting the block from code (not available from JSON).
+
+## Themed values
+
+`background`, `formData.yandex`, and `formData.hubspot` accept either a plain value or `{light, dark}`.
+
+## Storybook
+
+[Form](https://preview.gravity-ui.com/page-constructor/?path=/docs/blocks-form--docs)

package/build/docs/blocks/Header.md

@@ -0,0 +1,70 @@
+# Header
+
+Renders a full-width page header with a title, optional overtitle/description, call-to-action buttons, breadcrumbs, and an optional media asset (image, video, or video iframe) positioned to the right or centered. Use it as the primary hero/landing block at the top of a page.
+
+## Block type
+
+`type: 'header-block'`
+
+## When to use
+
+- As the first block of a page to introduce the product, section, or campaign.
+- When you need a large headline paired with CTA buttons and an illustration or background media.
+- When you want breadcrumbs, status pills, or additional info alongside the title.
+
+## Example
+
+```json
+{
+  "type": "header-block",
+  "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+  "description": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+  "additionalInfo": "**Ut enim ad minim veniam** ut aliquip ex ea commodo consequat.",
+  "buttons": [
+    {"text": "Primary", "theme": "action", "url": "https://example.com"},
+    {"text": "Secondary", "theme": "outlined", "url": "https://example.com"}
+  ],
+  "background": {
+    "light": {"image": "/images/header-bg-light.png", "color": "#EFF2F8"},
+    "dark": {"image": "/images/header-bg-dark.png", "color": "#262626"}
+  }
+}
+```
+
+## Properties
+
+| Property           | Type                                                      | Default                | Description                                                                 |
+| ------------------ | --------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------- |
+| `title` _required_ | `string`                                                  | —                      | Main heading text (YFM-supported). Rendered as `<h1>`.                      |
+| `overtitle`        | `string`                                                  | —                      | Small label rendered above the title. Accepts YFM or a React node.          |
+| `description`      | `string`                                                  | —                      | YFM body text shown below the title.                                        |
+| `additionalInfo`   | `string`                                                  | —                      | YFM supplementary text shown below the description.                         |
+| `width`            | `'s' \| 'm' \| 'l'`                                       | `'m'`                  | Maximum text width; also drives the title size.                             |
+| `buttons`          | `ButtonBlock[]`                                           | —                      | Call-to-action buttons rendered under the text.                             |
+| `offset`           | `'default' \| 'large'`                                    | `'default'`            | Horizontal indent of the content column.                                    |
+| `image`            | `ImageProps \| {light, dark}`                             | —                      | Inline media image placed on the right side.                                |
+| `video`            | `VideoProps \| {light, dark}`                             | —                      | Inline media video placed on the right side.                                |
+| `videoIframe`      | `{src, autoplay?, previewImg?, height?} \| {light, dark}` | —                      | External iframe video (e.g. video hosting) placed on the right side.        |
+| `mediaView`        | `'fit' \| 'full'`                                         | `'full'`               | `fit` constrains the media height; `full` lets it fill the available space. |
+| `backLink`         | `{url, title}`                                            | —                      | "Back" navigation link rendered above the title.                            |
+| `imageSize`        | `'s' \| 'm'`                                              | derived from `width`   | Overrides the inline media column size.                                     |
+| `verticalOffset`   | `'0' \| 's' \| 'm' \| 'l' \| 'xl'`                        | `'m'`                  | Vertical spacing around the content.                                        |
+| `background`       | `HeaderBackgroundProps \| {light, dark}`                  | —                      | Full-bleed background media/color behind the content.                       |
+| `theme`            | `'default' \| 'dark'`                                     | `'light'` (text theme) | Text/background color scheme for the content area.                          |
+| `breadcrumbs`      | `{items: {url, text}[], theme?}`                          | —                      | Breadcrumb navigation rendered above the content.                           |
+| `status`           | `string`                                                  | —                      | Status text/React node rendered next to the title.                          |
+| `centered`         | `boolean`                                                 | `false`                | Centers the content and hides the right-side media.                         |
+
+`HeaderBackgroundProps` extends `MediaProps` with `fullWidth?: boolean` and `fullWidthMedia?: boolean`.
+
+### Common properties
+
+Inherits common block properties: `anchor`, `visible`, `indent` (`{top?, bottom?}`), `qa`, `className`, `animated`, `theme` (`'light' | 'dark'`), `when`, `context`. See the root README for details.
+
+## Themed values
+
+`image`, `video`, `videoIframe`, and `background` each accept either a plain value or a `{light, dark}` object resolved against the active runtime theme.
+
+## Storybook
+
+[Header](https://preview.gravity-ui.com/page-constructor/?path=/docs/blocks-header--docs)

package/build/docs/blocks/HeaderSlider.md

@@ -0,0 +1,70 @@
+# HeaderSlider
+
+Renders a carousel of full-bleed `header-block` slides — each slide carries its own title, description, buttons, and background media. Use it when the top of the page needs to rotate multiple equally important campaigns or announcements instead of a single hero.
+
+## Block type
+
+`type: 'header-slider-block'`
+
+## When to use
+
+- Top-of-page hero carousel with two or more featured items.
+- When each slide needs the full Header feature set (buttons, background image/video, breadcrumbs, theme).
+- When you want autoplay, dots, or arrows to navigate between slides.
+
+## Example
+
+```json
+{
+  "type": "header-slider-block",
+  "dots": true,
+  "arrows": true,
+  "autoplay": 3000,
+  "items": [
+    {
+      "title": "Lorem ipsum dolor sit amet",
+      "description": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
+      "background": {
+        "light": {"image": "/images/header-bg-light.png", "color": "#EFF2F8", "fullWidth": true},
+        "dark": {"image": "/images/header-bg-dark.png", "color": "#262626", "fullWidth": true}
+      },
+      "buttons": [{"text": "Primary", "theme": "action", "url": "https://example.com"}]
+    },
+    {
+      "title": "Second campaign headline",
+      "description": "Duis aute irure dolor in reprehenderit in voluptate velit esse.",
+      "background": {"color": "#262626", "fullWidth": true},
+      "theme": "dark",
+      "buttons": [{"text": "Learn more", "theme": "normal-contrast", "url": "https://example.com"}]
+    }
+  ]
+}
+```
+
+## Properties
+
+| Property           | Type                                               | Default | Description                                                                                                   |
+| ------------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------- |
+| `items` _required_ | `HeaderItem[]`                                     | —       | Array of slides. Each item follows the Header schema (`title` required) and renders as a full `header-block`. |
+| `dots`             | `boolean`                                          | —       | Shows pagination dots under the slider.                                                                       |
+| `arrows`           | `boolean`                                          | —       | Shows navigation arrows (hidden automatically on mobile).                                                     |
+| `randomOrder`      | `boolean`                                          | —       | Shuffles slide order on load.                                                                                 |
+| `autoplay`         | `number`                                           | —       | Slide interval in milliseconds; omit to disable autoplay.                                                     |
+| `adaptive`         | `boolean`                                          | —       | Lets the slider height adapt to the tallest slide.                                                            |
+| `arrowSize`        | `number`                                           | `20`    | Pixel size of the navigation arrows.                                                                          |
+| `slidesToShow`     | `{sm?, md?, lg?, xl?, all?}`                       | —       | Responsive count of slides visible (HeaderSlider forces a single slide).                                      |
+| `disclaimer`       | `{text: string, size?: 'xs'\|'s'\|'sm'\|'m'\|'l'}` | —       | Small legal/disclaimer text rendered near the slider.                                                         |
+
+Each `HeaderItem` supports every property of the [Header](./Header.md) block (`title`, `description`, `buttons`, `background`, `breadcrumbs`, `theme`, etc.).
+
+### Common properties
+
+Inherits common block properties: `anchor`, `visible`, `indent` (`{top?, bottom?}`), `qa`, `className`, `animated`, `theme` (`'light' | 'dark'`), `when`, `context`. See the root README for details.
+
+## Themed values
+
+Theming is delegated to the individual slide `items`, which support `{light, dark}` values per the Header block.
+
+## Storybook
+
+[HeaderSlider](https://preview.gravity-ui.com/page-constructor/?path=/docs/blocks-headerslider--docs)

package/build/docs/blocks/Hero.md

@@ -0,0 +1,67 @@
+# Hero
+
+Renders a modern, content-driven hero block: an overtitle, a rich content column (title, body text, list, links, buttons) and a media column (image/video/iframe) that adapts to its intrinsic aspect ratio. Use it as the primary landing block when you want more layout flexibility than the classic Header provides.
+
+## Block type
+
+`type: 'hero-block'`
+
+## When to use
+
+- Top-of-page hero with a richer content column (lists, additional info, links).
+- When media should intelligently switch between horizontal and vertical orientation based on its aspect ratio.
+- When you need a colored or media background that can be full-width or contained.
+
+## Example
+
+```json
+{
+  "type": "hero-block",
+  "overtitle": "Overtitle",
+  "title": "Lorem ipsum dolor",
+  "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+  "additionalInfo": "Duis aute irure dolor in reprehenderit in voluptate velit esse.",
+  "buttons": [
+    {"text": "Primary", "theme": "action", "url": "https://example.com"},
+    {"text": "Secondary", "theme": "outlined", "url": "https://example.com"}
+  ],
+  "media": {
+    "light": {"image": "/images/hero-light.png"},
+    "dark": {"image": "/images/hero-dark.png"}
+  }
+}
+```
+
+## Properties
+
+| Property           | Type                                                     | Default     | Description                                                                                                 |
+| ------------------ | -------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------- |
+| `title` _required_ | `string \| TitleProps`                                   | —           | Main heading. A string or a `TitleProps` object (`text`, `textSize`, `url`, `urlTitle`, `analyticsEvents`). |
+| `text`             | `string`                                                 | —           | YFM body content rendered below the title.                                                                  |
+| `additionalInfo`   | `string`                                                 | —           | YFM supplementary text under the body.                                                                      |
+| `links`            | `LinkProps[]`                                            | —           | Inline text links rendered below the content.                                                               |
+| `list`             | `ContentItem[]`                                          | —           | Bullet-style list; each item has `title`, `text`, and an `icon`/`gravityIcon`.                              |
+| `theme`            | `'default' \| 'light' \| 'dark'`                         | `'default'` | Color theme; `default` follows the runtime theme, `light`/`dark` force a monochrome scheme.                 |
+| `overtitle`        | `string`                                                 | —           | Small label rendered above the title.                                                                       |
+| `buttons`          | `HeroButton[] \| {light, dark}[]`                        | —           | CTA buttons. Each requires `text` + `url` and supports `theme`, `primary`, `size`, `extraProps`.            |
+| `media`            | `MediaProps & {roundCorners?: boolean} \| {light, dark}` | —           | Media column (image/video/youtube/iframe/dataLens). `roundCorners` defaults to `true`.                      |
+| `fullWidth`        | `boolean`                                                | `false`     | Extends the background to the full viewport width.                                                          |
+| `verticalOffset`   | `'s' \| 'm' \| 'l' \| 'xl'`                              | `'m'`       | Vertical spacing around the content.                                                                        |
+| `background`       | `HeroBackground \| {light, dark}`                        | —           | Background color and/or media behind the block.                                                             |
+| `breadcrumbs`      | `{items: {url, text}[], theme?}`                         | —           | Breadcrumb navigation rendered above the content.                                                           |
+
+`HeroBackground` accepts `image`, `video`, `parallax`, `height`, `ratio`, `previewImg` (from `MediaProps`) plus `color`.
+
+`ContentItem` requires either `icon` or `gravityIcon` and supports `title`/`text`.
+
+### Common properties
+
+Inherits common block properties: `anchor`, `visible`, `indent` (`{top?, bottom?}`), `qa`, `className`, `animated`, `theme` (`'light' | 'dark'`), `when`, `context`. See the root README for details.
+
+## Themed values
+
+`buttons`, `media`, and `background` each accept either a plain value or a `{light, dark}` object resolved against the active runtime theme.
+
+## Storybook
+
+[Hero](https://preview.gravity-ui.com/page-constructor/?path=/docs/blocks-hero--docs)

package/build/docs/blocks/Icons.md

@@ -0,0 +1,61 @@
+# Icons
+
+Renders a responsive grid of small icon items, each consisting of an image and a caption. Items can optionally be wrapped in links, turning the grid into a navigable set of icon links.
+
+## Block type
+
+`type: 'icons-block'`
+
+## When to use
+
+- Compact grids of icon + label pairs (e.g. feature highlights, category links, value props).
+- Quick-link hubs where each entry is a small graphic and a short caption.
+- Sections that need a plain title/description header followed by an icon row.
+
+## Example
+
+```json
+{
+  "type": "icons-block",
+  "title": "Icons block title",
+  "description": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation.",
+  "size": "s",
+  "items": [
+    {"src": "/images/icon-1.svg", "text": "Lorem ipsum dolor sit amet", "url": "#"},
+    {"src": "/images/icon-2.svg", "text": "Lorem ipsum dolor sit amet", "url": "#"},
+    {"src": "/images/icon-3.svg", "text": "Lorem ipsum dolor sit amet", "url": "#"}
+  ]
+}
+```
+
+## Properties
+
+| Property           | Type                         | Default     | Description                                            |
+| ------------------ | ---------------------------- | ----------- | ------------------------------------------------------ |
+| `items` _required_ | `IconsBlockItem[]`           | —           | Array of icon items. See below.                        |
+| `size` _required_  | `'s' \| 'm' \| 'l'`          | `'s'`       | Controls the rendered item/grid scale.                 |
+| `title`            | `string`                     | —           | Optional section heading (plain text).                 |
+| `description`      | `string`                     | —           | Optional plain-text subtitle rendered under the title. |
+| `colSizes`         | `{sm?, md?, lg?, xl?, all?}` | `{all: 12}` | Grid column sizes for the optional header.             |
+| `animated`         | `boolean`                    | —           | Enables an entrance animation.                         |
+
+### `items[]`
+
+| Property          | Type                                 | Default | Description                                                                  |
+| ----------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------- |
+| `url` _required_  | `string`                             | —       | If present, the item is rendered as a link wrapping the icon and text.       |
+| `text` _required_ | `string`                             | —       | Caption rendered under the icon; also used as the link `aria-label`/`title`. |
+| `src` _required_  | `string \| {light, dark}`            | —       | Icon image URL.                                                              |
+| `analyticsEvents` | `AnalyticsEvent \| AnalyticsEvent[]` | —       | Analytics events fired when the item link is clicked.                        |
+
+### Common properties
+
+Inherits: `anchor`, `visible`, `indent` (`{top?, bottom?}`), `qa`, `className`, `animated`, `when`, `context`. See the root README for details.
+
+## Themed values
+
+Each item's `src` accepts either a plain URL string or a `{light, dark}` object resolved against the active runtime theme.
+
+## Storybook
+
+[Icons](https://preview.gravity-ui.com/page-constructor/?path=/docs/blocks-icons--docs)

package/build/docs/blocks/Info.md

@@ -0,0 +1,73 @@
+# Info
+
+Renders a two-column information section: a left content column and a right content column, each with its own title, text, lists, buttons, and links, placed inside an optional themed background container.
+
+## Block type
+
+`type: 'info-block'`
+
+## When to use
+
+- Side-by-side information panels that share a background but present distinct content (e.g. summary vs. details).
+- Sections needing a colored/themed container wrapping two `Content`-style columns.
+- When you want independent buttons, links, and bullet lists per column.
+
+## Example
+
+```json
+{
+  "type": "info-block",
+  "theme": "dark",
+  "backgroundColor": {"light": "#eef3fe", "dark": "#000000"},
+  "leftContent": {
+    "title": "Lorem ipsum dolor sit amet",
+    "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation.",
+    "buttons": [
+      {"text": "Button", "theme": "raised", "url": "#"},
+      {"text": "Button", "theme": "outlined-contrast", "url": "#"}
+    ]
+  },
+  "rightContent": {
+    "title": "Lorem ipsum dolor sit amet",
+    "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation.",
+    "links": [{"url": "#", "text": "Link", "theme": "normal", "arrow": true}]
+  }
+}
+```
+
+## Properties
+
+| Property                     | Type                      | Default  | Description                                                                                       |
+| ---------------------------- | ------------------------- | -------- | ------------------------------------------------------------------------------------------------- |
+| `leftContent`                | `ContentProps`            | —        | Left column content. See below.                                                                   |
+| `rightContent`               | `ContentProps`            | —        | Right column content. See below.                                                                  |
+| `backgroundColor`            | `string \| {light, dark}` | —        | Background color of the container.                                                                |
+| `theme`                      | `'light' \| 'dark'`       | `'dark'` | Text/content theme used inside the columns.                                                       |
+| `title` _deprecated_         | `string`                  | —        | Legacy left-column title; prefer `leftContent.title`.                                             |
+| `sectionsTitle` _deprecated_ | `string`                  | —        | Legacy right-column title; prefer `rightContent.title`.                                           |
+| `buttons` _deprecated_       | `ButtonBlock[]`           | `[]`     | Legacy buttons appended to the left column; prefer `leftContent.buttons`.                         |
+| `links` _deprecated_         | `LinkProps[]`             | `[]`     | Legacy links appended to the right column (rendered as arrow links); prefer `rightContent.links`. |
+
+### `leftContent` / `rightContent` (`ContentProps`)
+
+| Property          | Type                    | Default | Description                                                                                    |
+| ----------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------- |
+| `title`           | `string \| TitleProps`  | —       | Column heading.                                                                                |
+| `text`            | `string`                | —       | YFM body text.                                                                                 |
+| `additionalInfo`  | `string`                | —       | YFM supplementary text below the body.                                                         |
+| `links`           | `LinkProps[]`           | —       | Inline text links.                                                                             |
+| `buttons`         | `ButtonBlock[]`         | —       | CTA buttons.                                                                                   |
+| `list`            | `ContentItem[]`         | —       | Bullet-style list with optional icons per item (`icon` or `gravityIcon`, plus `title`/`text`). |
+| `controlPosition` | `'default' \| 'bottom'` | —       | Vertical placement of buttons/links.                                                           |
+
+### Common properties
+
+Inherits: `when`. See the root README for details. (This block does not expose `anchor`, `visible`, `indent`, `animated`, or `context`.)
+
+## Themed values
+
+`backgroundColor` accepts either a plain color string or a `{light, dark}` object resolved against the active runtime theme.
+
+## Storybook
+
+[Info](https://preview.gravity-ui.com/page-constructor/?path=/docs/blocks-info--docs)