Figma

ImageBanner

import { ImageBanner } from '@megafon/ui-shared';
Демо данные:


const content: IImageBannerProps = {
    title: 'Заголовок ≤ 30 символов',
    description: 'Здесь будет располагаться подзаголовок. Пишите кратко, не более 100 символов',
    cost: 'oт <b>0000₽</b>',
}


В свойствах title и description поддерживаются некоторые HTML-теги: "<br>, <font color>, <a href>".


Также в обоих свойствах поддерживается спецсимвол &nbsp.

Размер баннера фиксированный

Изображение растягивается на весь баннер

Изображение прижимается к правому краю, растягивается на максимальную высоту, слева изображение обрезается, если оно шире баннера.

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...imagesFullWidth}
          isImageFullWidth
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

<ContentArea>
      <ImageBanner
          badges={badgeDark}
          backgroundColor="gradient"
          radius="rounded"
          {...content}
          {...imagesFullWidthGradient}
          isImageFullWidth
      >
          {greenButtons}
      </ImageBanner>
  </ContentArea>

Картинка в фиксированном фрейме

На разрешении 1024+ изображение ограничивается по высоте и ширине размером фрейма. На разрешении 768- изображение ограничивается шириной баннера и высотой 150px. На разрешении 768 - 1024 изображение ограничивается шириной баннера и высотой 230px. Если изображение больше фрейма, то оно скейлится и вписывается во фрейм по типу contain. При этом выравнивается по центру фрейма по вертикали и горизонтали. Если изображение должно прижиматься к нижнему или верхнему краю, то необходимо поменять вертикальное выравнивание.

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

Цвета фона

Зеленый

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

Фиолетовый

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="purple"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

Градиент

<ContentArea>
      <ImageBanner badges={badgeDark} backgroundColor="gradient" radius="rounded" {...content} {...imagesGradient}>
          {greenButtons}
      </ImageBanner>
  </ContentArea>

Светлый

<ContentArea>
      <ImageBanner badges={badgeDark} backgroundColor="light" radius="rounded" {...content} {...imagesGradient}>
          {greenButtons}
      </ImageBanner>
  </ContentArea>

spbSky0

<ContentArea>
      <ImageBanner badges={badgeDark} backgroundColor="spbSky0" radius="rounded" {...content} {...imagesGradient}>
          {greenButtons}
      </ImageBanner>
  </ContentArea>

Уровень заголовка

H1

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

H2

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          headerLevelMobile="h2"
          headerLevel="h2"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

H2 только на мобильном экране

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          headerLevelMobile="h2"
          headerLevel="h1"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

Кнопки

С кнопками

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

С кнопками стора

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {storeButton}
      </ImageBanner>
  </ContentArea>

Без кнопок

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      />
  </ContentArea>

С бейджами

Светлая тема

<ContentArea>
      <ImageBanner
          badges={badgesLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {storeButton}
      </ImageBanner>
  </ContentArea>

Темная тема

<ContentArea>
      <ImageBanner badges={badgesDark} backgroundColor="gradient" radius="rounded" {...content} {...imagesGradient}>
          {storeButton}
      </ImageBanner>
  </ContentArea>

С TimerBadge

<ContentArea>
      <ImageBanner badges={timerBadge} backgroundColor="gradient" radius="rounded" {...content} {...imagesGradient}>
          {storeButton}
      </ImageBanner>
  </ContentArea>

Без бейджей

<ContentArea>
      <ImageBanner backgroundColor="green" radius="rounded" {...content} {...images} imageVerticalAlign="bottom">
          {storeButton}
      </ImageBanner>
  </ContentArea>

С блоком рекламы

В баннер можно вставить внешний компонент блока рекламы, он будет отображен в верхнем правом углу баннера

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
          adBlock={AdBlock}
      >
          {storeButton}
      </ImageBanner>
  </ContentArea>

Реклама без бейджей

<ContentArea>
      <ImageBanner
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
          adBlock={AdBlock}
      >
          {storeButton}
      </ImageBanner>
  </ContentArea>

Серая плашка рекламы

<ContentArea>
      <ImageBanner
          badges={badgeDark}
          backgroundColor="spbSky0"
          radius="rounded"
          {...content}
          autoHeight
          adBlock={AdBlockGray}
      >
          {greenButtons}
      </ImageBanner>
  </ContentArea>

Без изображения

С кнопками

<ContentArea>
      <ImageBanner badges={badgeLight} backgroundColor="green" radius="rounded" {...content}>
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

С кнопками стора

<ContentArea>
      <ImageBanner badges={badgeLight} {...content} backgroundColor="green" radius="rounded">
          {storeButtons}
      </ImageBanner>
  </ContentArea>

Без кнопок

<ContentArea>
      <ImageBanner badges={badgeLight} backgroundColor="green" radius="rounded" {...content} />
  </ContentArea>

Радиус баннера

По умолчанию углы прямые, это необходимо при использовании внутри компонента Banner, если используем ImageBanner отдельно, то выставляем закругленные углы.

Прямые углы

<ContentArea>
      <ImageBanner badges={badgeLight} backgroundColor="green" {...content} radius="corners">
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

Закругленные углы

<ContentArea>
      <ImageBanner badges={badgeLight} backgroundColor="green" radius="rounded" {...content} radius="rounded">
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

Высота баннера зависит от контента

Без изображения

С кнопками

<ContentArea>
      <ImageBanner badges={badgeDark} backgroundColor="spbSky0" radius="rounded" {...content} autoHeight>
          {greenButtons}
      </ImageBanner>
  </ContentArea>

С кнопками стора

<ContentArea>
      <ImageBanner badges={badgeDark} backgroundColor="spbSky0" radius="rounded" {...content} autoHeight>
          {storeButton}
      </ImageBanner>
  </ContentArea>

Без кнопок

<ContentArea>
      <ImageBanner badges={badgeDark} backgroundColor="spbSky0" radius="rounded" {...content} autoHeight />
  </ContentArea>

Изображение растягивается на всю ширину

С кнопками

<ContentArea>
      <ImageBanner
          badges={badgeDark}
          backgroundColor="spbSky0"
          radius="rounded"
          {...content}
          {...imagesFullWidthAutoHeight}
          autoHeight
          isImageFullWidth
      >
          {greenButtons}
      </ImageBanner>
  </ContentArea>

С кнопками стора

<ContentArea>
      <ImageBanner
          badges={badgeDark}
          backgroundColor="spbSky0"
          radius="rounded"
          {...content}
          {...imagesFullWidthAutoHeight}
          autoHeight
          isImageFullWidth
      >
          {storeButton}
      </ImageBanner>
  </ContentArea>

Без кнопок

<ContentArea>
      <ImageBanner
          badges={badgeDark}
          backgroundColor="spbSky0"
          radius="rounded"
          {...content}
          {...imagesFullWidthAutoHeight}
          autoHeight
          isImageFullWidth
      />
  </ContentArea>

Поддержка тэгов внутри описания

 <ContentArea>
      <ImageBanner
          classes={{
              imageSource: 'image-source-test',
              children: 'children-test',
          }}
          badges={badgeDark}
          backgroundColor="spbSky0"
          radius="rounded"
          {...content}
          description={Description}
          {...imagesFullWidthAutoHeight}
          autoHeight
          isImageFullWidth
      />
  </ContentArea>