feat: remove block header, add title

src/blocks/CardLayout/CardLayout.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {AnimateBlock, BlockHeader} from '../../components';
+import {AnimateBlock, Title} from '../../components';
 import {Col, GridColumnSizesType, Row} from '../../grid';
 import {CardLayoutBlockProps as CardLayoutBlockParams, WithChildren} from '../../models';
 import {block} from '../../utils';
@@ -24,7 +24,7 @@ const CardLayout: React.FC<CardLayoutBlockProps> = ({
     children,
 }) => (
     <AnimateBlock className={b()} animate={animated}>
-        <BlockHeader title={title} description={description} />
+        <Title title={title} subtitle={description} />
         <Row>
             {React.Children.map(children, (child, index) => (
                 <Col key={index} sizes={colSizes} className={b('item')}>

src/blocks/ExtendedFeatures/ExtendedFeatures.tsx

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 
-import {AnimateBlock, BlockHeader, HTML} from '../../components/';
+import {AnimateBlock, HTML, Title} from '../../components/';
 import Image from '../../components/Image/Image';
 import {getMediaImage} from '../../components/Media/Image/utils';
 import {ThemeValueContext} from '../../context/theme/ThemeValueContext';
@@ -30,7 +30,7 @@ export const ExtendedFeaturesBlock = ({
 
     return (
         <AnimateBlock className={b()} animate={animated}>
-            <BlockHeader title={title} description={description} className={b('header')} />
+            <Title title={title} subtitle={description} className={b('header')} />
             <div className={b('items')}>
                 <Row>
                     {items.map(

src/blocks/FilterBlock/FilterBlock.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo, useState} from 'react';
 
-import {AnimateBlock, BlockHeader} from '../../components';
+import {AnimateBlock, Title} from '../../components';
 import ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';
 import {ConstructorBlocks} from '../../containers/PageConstructor/components/ConstructorBlocks';
 import {Col, Row} from '../../grid';
@@ -58,10 +58,10 @@ const FilterBlock: React.FC<FilterBlockProps> = ({
     return (
         <AnimateBlock className={b()} animate={animated}>
             {title && (
-                <BlockHeader
+                <Title
                     className={b('title', {centered: centered})}
                     title={title}
-                    description={description}
+                    subtitle={description}
                 />
             )}
             {tabButtons.length && (

src/blocks/Icons/Icons.tsx

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 
-import {BlockHeader, Image} from '../../components';
+import {Image, Title} from '../../components';
 import {LocationContext} from '../../context/locationContext';
 import {IconsBlockProps} from '../../models';
 import {block, getLinkProps} from '../../utils';
@@ -14,7 +14,7 @@ const Icons = ({title, size = 's', items}: IconsBlockProps) => {
 
     return (
         <div className={b({size})}>
-            {title && <BlockHeader className={b('header')} title={title} colSizes={{all: 12}} />}
+            {title && <Title className={b('header')} title={title} colSizes={{all: 12}} />}
             {items.map((item) => (
                 <a
                     className={b('item')}

src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import BalancedMasonry from '../../components/BalancedMasonry/BalancedMasonry';
-import BlockHeader from '../../components/BlockHeader/BlockHeader';
 import FullWidthBackground from '../../components/FullWidthBackground/FullWidthBackground';
 import Media from '../../components/Media/Media';
+import Title from '../../components/Title/Title';
 import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import {BREAKPOINTS} from '../../constants';
 import {PromoFeaturesProps} from '../../models';
@@ -27,7 +27,7 @@ const PromoFeaturesBlock = (props: PromoFeaturesProps) => {
     return (
         <AnimateBlock className={b({[backgroundTheme]: true})} animate={animated}>
             <FullWidthBackground className={b('background', {[backgroundTheme]: true})} />
-            <BlockHeader title={title} description={description} className={b('header')} />
+            <Title title={title} subtitle={description} className={b('header')} />
             <BalancedMasonry
                 breakpointCols={breakpointColumns}
                 className={b('card-container')}

src/blocks/Slider/Slider.tsx

@@ -5,8 +5,8 @@ import SlickSlider, {Settings} from 'react-slick';
 
 import Anchor from '../../components/Anchor/Anchor';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
-import BlockHeader from '../../components/BlockHeader/BlockHeader';
 import OutsideClick from '../../components/OutsideClick/OutsideClick';
+import Title from '../../components/Title/Title';
 import {BREAKPOINTS} from '../../constants';
 import {MobileContext} from '../../context/mobileContext';
 import {SSRContext} from '../../context/ssrContext';
@@ -319,9 +319,9 @@ export const SliderBlock = (props: WithChildren<SliderProps>) => {
                 )}
             >
                 {anchorId && <Anchor id={anchorId} />}
-                <BlockHeader
+                <Title
                     title={title}
-                    description={description}
+                    subtitle={description}
                     className={b('header', {'no-description': !description})}
                 />
                 <AnimateBlock className={b('animate-slides')} animate={animated}>

src/blocks/Tabs/Tabs.tsx

@@ -1,11 +1,11 @@
 import React, {Fragment, useContext, useRef, useState} from 'react';
 
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
-import BlockHeader from '../../components/BlockHeader/BlockHeader';
 import ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';
 import FullScreenImage from '../../components/FullscreenImage/FullscreenImage';
 import {getMediaImage} from '../../components/Media/Image/utils';
 import Media from '../../components/Media/Media';
+import Title from '../../components/Title/Title';
 import {getHeight} from '../../components/VideoBlock/VideoBlock';
 import {ThemeValueContext} from '../../context/theme/ThemeValueContext';
 import {Col, GridColumnOrderClasses, Row} from '../../grid';
@@ -112,9 +112,9 @@ export const TabsBlock = ({
 
     return (
         <AnimateBlock className={b()} onScroll={() => setPlay(true)} animate={animated}>
-            <BlockHeader
+            <Title
                 title={title}
-                description={description}
+                subtitle={description}
                 className={b('block-title', {centered: centered})}
             />
             <Row>

src/components/MediaBase/MediaBase.tsx

@@ -1,10 +1,10 @@
 import React, {ReactElement, useMemo} from 'react';
 
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
-import BlockHeader from '../../components/BlockHeader/BlockHeader';
 import {Col, Grid, GridColumnSize, Row} from '../../grid';
 import {MediaBaseBlockProps, WithChildren} from '../../models';
 import {block} from '../../utils';
+import Title from '../Title/Title';
 
 import MediaContent from './MediaBaseContent';
 
@@ -49,7 +49,12 @@ export const MediaBase = (props: MediaBaseProps) => {
     return (
         <AnimateBlock className={b()} onScroll={onScroll} animate={animated}>
             {mediaOnly && (
-                <BlockHeader className={b('header')} title={title} description={description} />
+                <Title
+                    className={b('header')}
+                    title={title}
+                    subtitle={description}
+                    colSizes={{all: 12}}
+                />
             )}
             <Grid>
                 <Row

src/components/Title/README.md

@@ -1,12 +1,18 @@
 `type: "title"`
 
-`text: text` — Title text
+`title:`
 
-`textSize?: 's' | 'm' | 'l'` — Title font size
+- `text: string` - Title text
 
-`url?: string` — URL for a redirect on clicking the title, an arrow is automatically added at the end.
+- `textSize?: 's' | 'm' | 'l'` — Title font size
 
-**Margins:**
+- `url?: string` — URL for a redirect on clicking the title, an arrow is automatically added at the end.
+
+- `resetMargin?: boolean` - default `true`. Without this property `margin-top` will be proportional to `textSize` (see section _Margins_ below)
+
+`description: string` - text (with YFM support)
+
+**Margins for title without reset:**
 
 `textSize s - top: m`