@gravity-ui/page-constructor 8.15.0 → 8.17.0

package/build/docs/sub-blocks/BannerCard.md

@@ -0,0 +1,57 @@
+# BannerCard
+
+A compact banner card with a title, optional subtitle, a single call-to-action button, and a decorative background image. Designed to draw attention inside a card layout.
+
+## Sub-block type
+
+`type: 'banner-card'`
+
+> The schema for this sub-block is defined in `src/blocks/Banner/schema.ts` (`BannerCardProps`) and shared with the standalone `banner-block`.
+
+## Used in
+
+Accepted as a child of: `card-layout-block`, `slider-block`, `slider-old-block`.
+
+## Example
+
+```json
+{
+  "type": "banner-card",
+  "title": "Try the new release",
+  "subtitle": "Faster builds, simpler APIs, and improved theming.",
+  "image": {
+    "light": "/story-assets/banner_light.png",
+    "dark": "/story-assets/banner_dark.png"
+  },
+  "color": "#0275d8",
+  "theme": "light",
+  "mediaView": "full",
+  "button": {
+    "text": "Get started",
+    "url": "https://example.com",
+    "target": "_blank",
+    "theme": "raised"
+  }
+}
+```
+
+## Properties
+
+| Property            | Type                      | Default   | Description                                                                                                                                       |
+| ------------------- | ------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` _required_   | `'banner-card'`           | —         | Sub-block discriminator.                                                                                                                          |
+| `when`              | `string`                  | —         | Conditional rendering expression.                                                                                                                 |
+| `animated`          | `boolean`                 | —         | Enables entrance animation.                                                                                                                       |
+| `title` _required_  | `string`                  | —         | Banner heading (rendered as `<h2>`, plain text).                                                                                                  |
+| `subtitle`          | `string`                  | —         | Secondary text (YFM supported).                                                                                                                   |
+| `image`             | `string \| {light, dark}` | —         | Decorative background image URL (themed).                                                                                                         |
+| `mediaView`         | `'fit' \| 'full'`         | `'full'`  | How the background media fills the banner.                                                                                                        |
+| `disableCompress`   | `boolean`                 | —         | Disables image compression for `image`.                                                                                                           |
+| `color`             | `string \| {light, dark}` | —         | Background color (CSS value, themed). Applied to the content layer.                                                                               |
+| `theme`             | `'light' \| 'dark'`       | `'light'` | Text color theme.                                                                                                                                 |
+| `width`             | `'s' \| 'm' \| 'l'`       | —         | Banner width.                                                                                                                                     |
+| `button` _required_ | `ButtonProps`             | —         | Single call-to-action button. Uses only `text`, `url`, `target`, `theme` (`'raised'` by default). |
+
+## Themed values
+
+`image` and `color` each accept either a plain value or a `{light, dark}` object resolved against the active runtime theme.

package/build/docs/sub-blocks/BasicCard.md

@@ -0,0 +1,60 @@
+# BasicCard
+
+A general-purpose card with an optional icon (image or Gravity UI icon) and text content (title, text, links, buttons, or a content list). The simplest and most versatile card.
+
+## Sub-block type
+
+`type: 'basic-card'`
+
+## Used in
+
+Accepted as a child of: `card-layout-block`, `slider-block`, `slider-old-block`.
+
+## Example
+
+```json
+{
+  "type": "basic-card",
+  "title": "Tell a story",
+  "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco.",
+  "icon": {
+    "light": "/story-assets/icon_1_light.svg",
+    "dark": "/story-assets/icon_1_dark.svg"
+  },
+  "iconPosition": "top",
+  "url": "https://example.com",
+  "urlTitle": "Opens in a new tab",
+  "buttons": [{"text": "Read more", "theme": "action", "url": "https://example.com"}]
+}
+```
+
+## Properties
+
+| Property               | Type                                         | Default     | Description                                                                                              |
+| ---------------------- | -------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------- |
+| `type` _required_      | `'basic-card'`                               | —           | Sub-block discriminator.                                                                                 |
+| `when`                 | `string`                                     | —           | Conditional rendering expression.                                                                        |
+| `title`                | `string \| TitleProps`                       | —           | Card title (plain string or Title options).   |
+| `text`                 | `string`                                     | —           | Body text (YFM supported).                                                                               |
+| `additionalInfo`       | `string`                                     | —           | Secondary gray text (YFM supported).                                                                     |
+| `size`                 | `'s' \| 'm' \| 'l' \| 'xl'`                  | `'s'`       | Content size; controls font sizes.                                                                       |
+| `links`                | `LinkProps[]`                                | —           | Array of links.                                            |
+| `buttons`              | `ButtonProps[]`                              | —           | Array of buttons.                                        |
+| `list`                 | `ContentItem[]`                              | —           | Array of icon-content items (each requires `icon` or `gravityIcon`).                                     |
+| `border`               | `'line' \| 'shadow' \| 'none'`               | —           | Card border style.                                                                                       |
+| `controlPosition`      | `'content' \| 'footer'`                      | `'content'` | Position of buttons/links inside the card.                                                               |
+| `url`                  | `string`                                     | —           | Wraps the whole card in a link.                                                                          |
+| `urlTitle`             | `string`                                     | —           | `title` attribute for the card link.                                                                     |
+| `target`               | `'_blank' \| '_parent' \| '_top' \| '_self'` | —           | Link target.                                                                                             |
+| `icon`                 | `ImageProps`                                 | —           | Leading icon image (URL string, object, or device-aware object).                                         |
+| `gravityIcon`          | `GravityIconProps`                           | —           | Leading Gravity UI icon (`string` name, or `{name, color?}` where `color` is `'brand' \| 'text-color'`). |
+| `iconPosition`         | `'top' \| 'left'`                            | `'top'`     | Position of the icon relative to the content.                                                            |
+| `hoverBackgroundColor` | `string`                                     | —           | _Deprecated._ Background color/gradient applied on hover.                                                |
+
+## Themed values
+
+`icon` and `gravityIcon` accept either a plain value or a `{light, dark}` object resolved against the active runtime theme.
+
+## Storybook
+
+[BasicCard](https://preview.gravity-ui.com/page-constructor/?path=/docs/components-cards-basiccard--docs)

package/build/docs/sub-blocks/Content.md

@@ -0,0 +1,58 @@
+# Content
+
+A text content block rendering a title, body text, additional info, links, buttons, and/or an icon content list. Used on its own as the textual portion of a content layout.
+
+## Sub-block type
+
+`type: 'content'`
+
+## Used in
+
+Accepted as `textContent` of: `content-layout-block`.
+
+## Example
+
+```json
+{
+  "type": "content",
+  "title": "Lorem ipsum",
+  "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris.",
+  "additionalInfo": "Duis aute irure dolor in reprehenderit.",
+  "size": "l",
+  "centered": false,
+  "links": [{"url": "#", "text": "Link", "theme": "normal", "arrow": true}],
+  "buttons": [{"text": "Button", "theme": "action", "url": "https://example.com"}],
+  "list": [
+    {
+      "icon": {"light": "/story-assets/icon_1_light.svg", "dark": "/story-assets/icon_1_dark.svg"},
+      "title": "Lorem ipsum",
+      "text": "Ut enim ad minim veniam quis nostrud exercitation."
+    }
+  ]
+}
+```
+
+## Properties
+
+| Property          | Type                                              | Default            | Description                                                                                         |
+| ----------------- | ------------------------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------- |
+| `type` _required_ | `'content'`                                       | —                  | Sub-block discriminator.                                                                            |
+| `title`           | `string \| TitleProps`                            | —                  | Heading (plain string or Title options). |
+| `text`            | `string`                                          | —                  | Body text (YFM supported).                                                                          |
+| `additionalInfo`  | `string`                                          | —                  | Secondary gray text (YFM supported).                                                                |
+| `size`            | `'s' \| 'm' \| 'l' \| 'xl'`                       | `'l'`              | Content size; controls font sizes.                                                                  |
+| `centered`        | `boolean`                                         | `false`            | Centers all content horizontally.                                                                   |
+| `theme`           | `'default' \| 'dark' \| 'light'`                  | —                  | Content theme.                                                                                      |
+| `links`           | `LinkProps[]`                                     | —                  | Array of links.                                       |
+| `buttons`         | `ButtonProps[]`                                   | —                  | Array of buttons.                                   |
+| `list`            | `ContentItem[]`                                   | —                  | Array of icon-content items (each requires `icon` or `gravityIcon`).                                |
+| `controlPosition` | `'default' \| 'bottom'`                           | `'default'`        | Position of buttons/links.                                                                          |
+| `colSizes`        | `{all?, sm?, md?, lg?, xl?}` (each `number` 1–12) | `{all: 12, sm: 8}` | Column width per breakpoint.                                                                        |
+
+## Themed values
+
+`icon`/`gravityIcon` inside `list` items accept either a plain value or a `{light, dark}` object resolved against the active runtime theme.
+
+## Storybook
+
+[Content](https://preview.gravity-ui.com/page-constructor/?path=/docs/components-content--docs)

package/build/docs/sub-blocks/Divider.md

@@ -0,0 +1,47 @@
+# Divider
+
+A spacing/separator element that adds vertical space between sibling items, optionally drawing a horizontal line. Useful for tuning rhythm inside a layout.
+
+## Sub-block type
+
+`type: 'divider'`
+
+## Used in
+
+Registered both as a sub-block and as a standalone block; appears in the page `blocks` array.
+
+## Example
+
+```json
+{
+  "type": "divider",
+  "size": "m"
+}
+```
+
+With a horizontal line:
+
+```json
+{
+  "type": "divider",
+  "size": "l",
+  "border": true
+}
+```
+
+## Properties
+
+| Property          | Type                                                                   | Default | Description                                                       |
+| ----------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------- |
+| `type` _required_ | `'divider'`                                                            | —       | Sub-block discriminator.                                          |
+| `when`            | `string`                                                               | —       | Conditional rendering expression.                                 |
+| `size`            | `'0' \| 'xxs' \| 'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl' \| 'xxxl'` | `'m'`   | Vertical height of the divider. `'0'` collapses spacing entirely. |
+| `border`          | `boolean`                                                              | —       | When `true`, draws a horizontal line across the full width.       |
+
+## Themed values
+
+None — `Divider` has no themed properties.
+
+## Storybook
+
+[Divider](https://preview.gravity-ui.com/page-constructor/?path=/docs/components-divider--docs)

package/build/docs/sub-blocks/HubspotForm.md

@@ -0,0 +1,47 @@
+# HubspotForm
+
+Embeds a HubSpot form inside a page. Loads the HubSpot scripts on demand and renders the form into a container; emits analytics events on submit and supports default field values and form event handlers.
+
+## Sub-block type
+
+`type: 'hubspot-form'`
+
+## Used in
+
+Accepted as `children` by `CardLayout`, `Slider`, `SliderOld`; also usable inside any block that renders sub-blocks (e.g. `FilterBlock` items).
+
+## Example
+
+```json
+{
+  "type": "hubspot-form",
+  "region": "eu1",
+  "portalId": "25764979",
+  "formId": "a3eb06a6-e8ce-45d4-81bd-7fadb7dab313"
+}
+```
+
+## Properties
+
+| Property              | Type             | Default | Description                                                                      |
+| --------------------- | ---------------- | ------- | -------------------------------------------------------------------------------- |
+| `type` _required_     | `'hubspot-form'` | —       | Sub-block discriminator.                                                         |
+| `when`                | `string`         | —       | Conditional rendering expression.                                                |
+| `portalId` _required_ | `string`         | —       | HubSpot portal ID.                                                               |
+| `formId` _required_   | `string`         | —       | HubSpot form ID.                                                                 |
+| `region`              | `string`         | —       | HubSpot region (e.g. `'eu1'`, `'na1'`).                                          |
+| `formInstanceId`      | `string`         | —       | Unique instance ID, required to render the same form multiple times on one page. |
+
+Additional runtime-only props (`className`, `theme`, `isMobile`, `formClassName`, `createDOMElement`, `defaultValues`, `onBeforeLoad` / `onBeforeSubmit` / `onSubmit` / `onLoad` / `hubspotEvents`) are available on the React component but are not part of the JSON schema.
+
+## Setup notes
+
+HubSpot forms require the `formsContext` to be configured on `PageConstructorProvider`. The context wires form event handling and any HubSpot-specific runtime configuration; without it, submit analytics and the `onSubmit` / `onBeforeSubmit` / `onLoad` handlers wired through `useHandleHubspotEvents` will not fire. When the form is rendered inside an iframe, set up the `useLoopBackHubspotEvents` hook on the top-level frame so events propagate.
+
+## Themed values
+
+No themed media fields; theme is taken from the active theme context (or the `theme` runtime prop).
+
+## Storybook
+
+[HubspotForm](https://preview.gravity-ui.com/page-constructor/?path=/docs/components-hubspotform--docs)

package/build/docs/sub-blocks/ImageCard.md

@@ -0,0 +1,59 @@
+# ImageCard
+
+A card pairing a foreground image with text content (title, text, links, buttons, or a content list). The image and content can be ordered in either direction.
+
+## Sub-block type
+
+`type: 'image-card'`
+
+## Used in
+
+Accepted as a child of: `card-layout-block`, `slider-block`, `slider-old-block`.
+
+## Example
+
+```json
+{
+  "type": "image-card",
+  "title": "Tell a story and build a narrative",
+  "text": "We are all storytellers. Stories are a powerful way to communicate ideas.",
+  "image": {
+    "dark": "/story-assets/img_8-12_dark.png",
+    "light": "/story-assets/img_8-12_light.png"
+  },
+  "direction": "direct",
+  "border": "shadow"
+}
+```
+
+## Properties
+
+| Property           | Type                                 | Default     | Description                                                                                            |
+| ------------------ | ------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------ |
+| `type` _required_  | `'image-card'`                       | —           | Sub-block discriminator.                                                                               |
+| `when`             | `string`                             | —           | Conditional rendering expression.                                                                      |
+| `image` _required_ | `ImageProps`                         | —           | Foreground image (URL string, object, or device-aware object).                                         |
+| `title`            | `string \| TitleProps`               | —           | Card title (plain string or Title options). |
+| `text`             | `string`                             | —           | Body text (YFM supported).                                                                             |
+| `additionalInfo`   | `string`                             | —           | Secondary gray text (YFM supported).                                                                   |
+| `size`             | `'s' \| 'm' \| 'l' \| 'xl'`          | `'s'`       | Content size; controls font sizes.                                                                     |
+| `theme`            | `'default' \| 'dark' \| 'light'`     | `'default'` | Content theme.                                                                                         |
+| `links`            | `LinkProps[]`                        | —           | Array of links.                                          |
+| `buttons`          | `ButtonProps[]`                      | —           | Array of buttons.                                      |
+| `list`             | `ContentItem[]`                      | —           | Array of icon-content items (each requires `icon` or `gravityIcon`).                                   |
+| `border`           | `'line' \| 'shadow' \| 'none'`       | `'shadow'`  | Card border style.                                                                                     |
+| `controlPosition`  | `'content' \| 'footer'`              | `'content'` | Position of buttons/links inside the card.                                                             |
+| `direction`        | `'direct' \| 'reverse'`              | `'direct'`  | Image/content order: `direct` = image first, `reverse` = content first.                                |
+| `margins`          | `'s' \| 'm'`                         | —           | Internal margins around the image.                                                                     |
+| `backgroundColor`  | `string`                             | —           | Solid background color (CSS value).                                                                    |
+| `url`              | `string`                             | —           | Wraps the whole card in a link.                                                                        |
+| `urlTitle`         | `string`                             | —           | `title` attribute for the card link.                                                                   |
+| `analyticsEvents`  | `AnalyticsEvent \| AnalyticsEvent[]` | —           | Analytics events fired on card interaction.                                                            |
+
+## Themed values
+
+`image` accepts either a plain value or a `{light, dark}` object resolved against the active runtime theme.
+
+## Storybook
+
+[ImageCard](https://preview.gravity-ui.com/page-constructor/?path=/docs/components-cards-imagecard--docs)

package/build/docs/sub-blocks/LayoutItem.md

@@ -0,0 +1,75 @@
+# LayoutItem
+
+Renders a two-part card: a media area (image, video, YouTube, etc.) stacked above a text content area with optional title, body, buttons, links, list, and meta info. Used as the primary content unit inside card-grid blocks.
+
+## Sub-block type
+
+`type: 'layout-item'`
+
+## Used in
+
+Accepted as `children` by `CardLayout`, `Slider`, `SliderOld`; also used as the card payload in `FilterBlock` items.
+
+## Example
+
+```json
+{
+  "type": "layout-item",
+  "content": {
+    "title": "Lorem ipsum",
+    "text": "Dolor sit *amet*",
+    "buttons": [
+      {"text": "Button 1", "theme": "action", "url": "#test1"},
+      {"text": "Button 2", "theme": "outlined", "url": "#test2"}
+    ]
+  },
+  "media": {
+    "light": {"image": "/assets/light.png"},
+    "dark": {"image": "/assets/dark.png"}
+  },
+  "url": "https://example.com",
+  "target": "_blank"
+}
+```
+
+## Properties
+
+| Property             | Type                                         | Default     | Description                                                                                   |
+| -------------------- | -------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------- |
+| `type` _required_    | `'layout-item'`                              | —           | Sub-block discriminator.                                                                      |
+| `when`               | `string`                                     | —           | Conditional rendering expression.                                                             |
+| `content` _required_ | `object`                                     | —           | Text content area. See below.                                                                 |
+| `media` _required_   | `MediaProps \| {light, dark}`                | —           | Media area (image / video / youtube / iframe / dataLens). Themed: `T \| {light: T, dark: T}`. |
+| `contentMargin`      | `'m' \| 'l'`                                 | `'m'`       | Spacing between the media and the content.                                                    |
+| `metaInfo`           | `string[]`                                   | —           | List of meta strings rendered under the media (YFM supported).                                |
+| `border`             | `boolean`                                    | —           | Adds a border to the media.                                                                   |
+| `fullscreen`         | `boolean`                                    | —           | Enables fullscreen-expandable media (icon + overlay).                                         |
+| `controlPosition`    | `'content' \| 'footer'`                      | `'content'` | Where buttons/links render: inline in the content or at the card footer.                      |
+| `url`                | `string`                                     | —           | Makes the entire card a link. Linked cards animate their image on hover.                      |
+| `urlTitle`           | `string`                                     | —           | Native `title` attribute for the card link.                                                   |
+| `target`             | `'_blank' \| '_parent' \| '_top' \| '_self'` | —           | Link target.                                                                                  |
+| `analyticsEvents`    | `AnalyticsEvent \| AnalyticsEvent[]`         | —           | Analytics events fired on media interaction.                                                  |
+
+### `content` object
+
+Inherits the `Content` schema (without `colSizes` / `centered`):
+
+| Property          | Type                             | Default | Description                                                           |
+| ----------------- | -------------------------------- | ------- | --------------------------------------------------------------------- |
+| `title`           | `string \| TitleProps`           | —       | Card title (plain text or a title options object).                    |
+| `text`            | `string` (YFM)                   | —       | Body text in YFM Markdown.                                            |
+| `additionalInfo`  | `string` (YFM)                   | —       | Secondary text block below the body.                                  |
+| `size`            | `'s' \| 'm' \| 'l' \| 'xl'`      | `'s'`   | Text/content scale.                                                   |
+| `theme`           | `'default' \| 'dark' \| 'light'` | —       | Content color theme.                                                  |
+| `links`           | `LinkProps[]`                    | —       | Inline links (each requires `text` + `url`).                          |
+| `buttons`         | `ButtonProps[]`                  | —       | Inline buttons (each requires `text` + `url`).                        |
+| `list`            | `ContentItem[]`                  | —       | Icon + title + text list. Each item requires `icon` or `gravityIcon`. |
+| `controlPosition` | `'default' \| 'bottom'`          | —       | Inline positioning of buttons/links within the content.               |
+
+## Themed values
+
+`media` (and the deprecated `icon`) accept `T | {light: T, dark: T}` and are resolved at runtime via the active theme.
+
+## Storybook
+
+[LayoutItem](https://preview.gravity-ui.com/page-constructor/?path=/docs/components-cards-layoutitem--docs)

package/build/docs/sub-blocks/MediaCard.md

@@ -0,0 +1,66 @@
+# MediaCard
+
+Wraps a single media element (image, image slider, video, YouTube, iframe, or DataLens) inside a card with an optional border. Pure media card — no text content.
+
+## Sub-block type
+
+`type: 'media-card'`
+
+## Used in
+
+Accepted as `children` by `CardLayout`, `Slider`, `SliderOld`; also usable as a card payload in `FilterBlock` items.
+
+## Example
+
+```json
+{
+  "type": "media-card",
+  "image": {
+    "src": "/assets/img_6-12_white.png",
+    "alt": "Picture",
+    "disableCompress": true
+  }
+}
+```
+
+Array of images creates a slider:
+
+```json
+{
+  "type": "media-card",
+  "image": ["/assets/img1.png", "/assets/img2.png", "/assets/img3.png"]
+}
+```
+
+## Properties
+
+| Property                          | Type                                    | Default | Description                                                 |
+| --------------------------------- | --------------------------------------- | ------- | ----------------------------------------------------------- |
+| `type` _required_                 | `'media-card'`                          | —       | Sub-block discriminator.                                    |
+| `when`                            | `string`                                | —       | Conditional rendering expression.                           |
+| `border`                          | `'line' \| 'shadow' \| 'none'`          | —       | Card border style.                                          |
+| `animated`                        | `boolean`                               | —       | Enables scroll-triggered entrance animation.                |
+| `color`                           | `string`                                | —       | Background color.                                           |
+| `image`                           | `ImageProps \| ImageProps[]`            | —       | Single image or array of images (array becomes a slider).   |
+| `disableImageSliderForArrayInput` | `boolean`                               | —       | Render an image array as a static grid instead of a slider. |
+| `video`                           | `VideoProps`                            | —       | Hosted video (`src` array required).                        |
+| `youtube`                         | `string`                                | —       | YouTube video URL or ID.                                    |
+| `videoIframe`                     | `string`                                | —       | Embeddable video iframe URL.                                |
+| `autoplay`                        | `boolean`                               | —       | Autoplay video media.                                       |
+| `parallax`                        | `boolean`                               | —       | Parallax scroll effect on the media.                        |
+| `height`                          | `number`                                | —       | Fixed media height in pixels.                               |
+| `previewImg`                      | `string`                                | —       | Poster image shown before video playback.                   |
+| `dataLens`                        | `string \| {id, theme}`                 | —       | Embedded DataLens chart/object.                             |
+| `fullscreen`                      | `boolean`                               | —       | Enables fullscreen-expandable media.                        |
+| `ratio`                           | `number \| 'auto'`                      | —       | Aspect ratio of the media.                                  |
+| `iframe`                          | `{src, name?, title?, height?, width?}` | —       | Generic iframe embed (`src` required).                      |
+| `margins`                         | `boolean`                               | —       | Adds inner media margins.                                   |
+| `analyticsEvents`                 | `AnalyticsEvent \| AnalyticsEvent[]`    | —       | Analytics events fired on media interaction.                |
+
+## Themed values
+
+`color`, `image`, and other media fields resolve themed values (`T | {light: T, dark: T}`) at runtime via the active theme.
+
+## Storybook
+
+[MediaCard](https://preview.gravity-ui.com/page-constructor/?path=/docs/components-cards-mediacard--docs)

package/build/docs/sub-blocks/PriceCard.md

@@ -0,0 +1,60 @@
+# PriceCard
+
+Renders a pricing card: a title, a price (with optional period and details), a description, a checklist of features, and optional buttons and links. Typically placed in a grid to compare plans.
+
+## Sub-block type
+
+`type: 'price-card'`
+
+## Used in
+
+Accepted as `children` by `CardLayout`, `Slider`, `SliderOld`; also usable as a card payload in `FilterBlock` items.
+
+## Example
+
+```json
+{
+  "type": "price-card",
+  "title": "Lorem ipsum",
+  "price": "299.99 $",
+  "pricePeriod": "month",
+  "priceDetails": "plan details",
+  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  "list": [
+    "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation.",
+    "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation."
+  ],
+  "buttons": [
+    {"text": "Choose plan", "url": "https://example.com", "width": "max", "theme": "action"}
+  ],
+  "theme": "light",
+  "backgroundColor": "#CCDAFF"
+}
+```
+
+## Properties
+
+| Property           | Type                             | Default | Description                                                                  |
+| ------------------ | -------------------------------- | ------- | ---------------------------------------------------------------------------- |
+| `type` _required_  | `'price-card'`                   | —       | Sub-block discriminator.                                                     |
+| `when`             | `string`                         | —       | Conditional rendering expression.                                            |
+| `border`           | `'line' \| 'shadow' \| 'none'`   | —       | Card border style.                                                           |
+| `theme`            | `'default' \| 'dark' \| 'light'` | —       | Content color theme.                                                         |
+| `title` _required_ | `string` (YFM)                   | —       | Plan name rendered as YFM.                                                   |
+| `price` _required_ | `string`                         | —       | Price value (e.g. `"299.99 $"`).                                             |
+| `pricePeriod`      | `string`                         | —       | Billing period shown after the price (e.g. `"month"`).                       |
+| `priceDetails`     | `string`                         | —       | Small print under the price.                                                 |
+| `description`      | `string`                         | —       | Short plan description.                                                      |
+| `list`             | `string[]`                       | —       | Feature list; each item rendered with a check icon (YFM/Markdown supported). |
+| `buttons`          | `ButtonProps[]`                  | —       | CTA buttons (each requires `text` + `url`).                                  |
+| `links`            | `LinkProps[]`                    | —       | Secondary links (each requires `text` + `url`).                              |
+| `backgroundColor`  | `string`                         | —       | Custom card background color.                                                |
+| `controlPosition`  | `'content' \| 'footer'`          | —       | Where buttons/links render within the card.                                  |
+
+## Themed values
+
+`backgroundColor` and color-bearing fields resolve themed values (`T | {light: T, dark: T}`) at runtime via the active theme.
+
+## Storybook
+
+[PriceCard](https://preview.gravity-ui.com/page-constructor/?path=/docs/components-cards-pricecard--docs)

package/build/docs/sub-blocks/PriceDetailed.md

@@ -0,0 +1,74 @@
+# PriceDetailed
+
+> ⚠️ **Deprecated.** This sub-block is deprecated and will be removed in a future major release. Prefer [`PriceCard`](./PriceCard.md) for pricing cards.
+
+Renders a detailed pricing comparison table: each item has a title, a per-unit description, an optional label, and a list of details (either a marked list or a settings list). Supports combined or separate layout, foldable details, and per-color default label text.
+
+## Sub-block type
+
+`type: 'price-detailed'`
+
+## Used in
+
+Accepted as `children` by `CardLayout`, `Slider`, `SliderOld`.
+
+## Example
+
+```json
+{
+  "type": "price-detailed",
+  "priceType": "settings",
+  "description": {"titleSize": "l", "descriptionSize": "m", "titleColor": "cornflower"},
+  "details": {"titleSize": "s", "descriptionSize": "m"},
+  "items": [
+    {
+      "title": "Free",
+      "detailedTitle": "",
+      "description": "For use by individuals and small teams",
+      "label": {"color": "blue", "text": "Free", "size": "s"},
+      "items": [{"title": "up to 5 users", "description": "up to 5 users"}]
+    }
+  ]
+}
+```
+
+## Properties
+
+| Property                      | Type                                      | Default        | Description                                                                   |
+| ----------------------------- | ----------------------------------------- | -------------- | ----------------------------------------------------------------------------- |
+| `type` _required_             | `'price-detailed'`                        | —              | Sub-block discriminator.                                                      |
+| `when`                        | `string`                                  | —              | Conditional rendering expression.                                             |
+| `animated`                    | `boolean`                                 | —              | Enables scroll-triggered entrance animation.                                  |
+| `items` _required_            | `PriceItem[]`                             | —              | Pricing columns/rows. See below.                                              |
+| `description`                 | `object`                                  | —              | Sizing/color overrides for the description block.                             |
+| `description.titleSize`       | `'xs' \| 's' \| 'sm' \| 'm' \| 'l'`       | `'l'`          | Description title size.                                                       |
+| `description.descriptionSize` | `'xs' \| 's' \| 'sm' \| 'm' \| 'l'`       | `'m'`          | Description body size.                                                        |
+| `description.titleColor`      | `'cornflower' \| 'black'`                 | `'cornflower'` | Description title color.                                                      |
+| `details`                     | `object`                                  | —              | Sizing overrides for the details block.                                       |
+| `details.titleSize`           | `'xs' \| 's' \| 'sm' \| 'm' \| 'l'`       | `'s'`          | Details title size.                                                           |
+| `details.descriptionSize`     | `'xs' \| 's' \| 'sm' \| 'm' \| 'l'`       | `'m'`          | Details body size.                                                            |
+| `priceType`                   | `'marked-list' \| 'settings'`             | `'settings'`   | Layout of each item's `items` list.                                           |
+| `numberGroupItems`            | `3 \| 4 \| 5`                             | —              | Items per row in the combined layout.                                         |
+| `isCombined`                  | `boolean`                                 | `false`        | Use the combined grid layout instead of separate columns.                     |
+| `useMixedView`                | `boolean`                                 | `false`        | Mix list item views (extended details on desktop, collapse on tablet/mobile). |
+| `foldable`                    | `{title*required, size?, titleColor?}`    | —              | Makes the details section collapsible with a toggle.                          |
+| `labelsDefaultText`           | `{blue?, green?, yellow?, purple?, red?}` | —              | Default text used for each label color when an item label has no `text`.      |
+
+### `PriceItem` object
+
+| Property                 | Type                                           | Default | Description                                                                                                                      |
+| ------------------------ | ---------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `title` _required_       | `string`                                       | —       | Plan title (e.g. `"Free"`, `"100$"`).                                                                                            |
+| `description` _required_ | `string` (YFM)                                 | —       | Plan description.                                                                                                                |
+| `detailedTitle`          | `string`                                       | —       | Suffix/qualifier shown next to the title (e.g. `"/ month*"`).                                                                    |
+| `label`                  | `{color*required, text?, size?}`               | —       | Colored label badge. `color`: `'blue' \| 'green' \| 'yellow' \| 'purple' \| 'red'`. `size`: `'xs' \| 's' \| 'sm' \| 'm' \| 'l'`. |
+| `items`                  | `PriceDetailsList[] \| PriceDetailsSettings[]` | —       | Detail list. With `priceType: 'marked-list'` each item requires `text`; with `'settings'` each requires `title` + `description`. |
+| `analyticsEvents`        | `AnalyticsEvent \| AnalyticsEvent[]`           | —       | Analytics events.                                                                                                                |
+
+## Themed values
+
+This sub-block does not consume themed media; sizing/color controls above are explicit.
+
+## Storybook
+
+[PriceDetailed](https://preview.gravity-ui.com/page-constructor/?path=/docs/components-cards-pricedetailed-deprecated--docs)