ImageBanner

import { ImageBanner } from '@megafon/ui-shared';

Примеры и код
Свойства и методы

Демо данные:
const content: IImageBannerProps = {
    title: 'Текст ≈40 симовлов. Короткие слова',
    description: 'Описание, которое может быть в несколько строк, максимальное количество 3 строки',
    cost: 'oт <b>0000₽</b>',
}
В свойствах title и description поддерживаются некоторые HTML-теги: "<br>, <font color>, <a href>".
Также в обоих свойствах поддерживается спецсимвол &nbsp.

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

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

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

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

Кнопка 1

Кнопка 2

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

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

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

Кнопка 1

Кнопка 2

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

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

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

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

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

Кнопка 1

Кнопка 2

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

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

Цвета фона

Зеленый

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

Кнопка 1

Кнопка 2

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

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

Фиолетовый

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

Кнопка 1

Кнопка 2

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

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

Градиент

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

Кнопка 1

Кнопка 2

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

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

Светлый

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

Кнопка 1

Кнопка 2

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

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

spbSky0

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

Кнопка 1

Кнопка 2

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

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

Кнопки

С кнопками

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

Кнопка 1

Кнопка 2

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

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

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

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

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

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

Без кнопок

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

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

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

С бейджами

Тема бейджей зависит от значения backgroundColor

Демо-данные

const badges = [
    {
        text: '≈ 30 символов с пробелами',
        iconType: 'timer',
    },
    {
        text: 'короткий текст',
        iconType: 'price',
    },
];

Светлая тема

≈ 30 символов с пробелами

короткий текст

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

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

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

Темная тема

≈ 30 символов с пробелами

короткий текст

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

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

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

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

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

≈ 30 символов с пробелами

короткий текст

#реклама

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

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

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

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

С кнопками

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

Кнопка 1

Кнопка 2

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

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

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

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

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

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

Без кнопок

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

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

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

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

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

Прямые углы

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

Кнопка 1

Кнопка 2

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

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

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

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

Кнопка 1

Кнопка 2

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

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

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

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

С кнопками

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

Кнопка 1

Кнопка 2

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

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

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

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

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

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

Без кнопок

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

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

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

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

С кнопками

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

Кнопка 1

Кнопка 2

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

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

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

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

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

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

Без кнопок

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание, которое может быть в несколько строк, максимальное количество 3 строки

oт

0000₽

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

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

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

≈ 30 символов с пробелами

Текст ≈40 символов. Короткие слова

Описание
пункт списка → ссылка
пункт списка → ссылка

oт

0000₽

<ContentArea>
  <ImageBanner
    badges={badge}
    radius="rounded"
    {...content}
    description={Description}
    {...imagesFullWidthAutoHeight}
    autoHeight
    isImageFullWidth
  />
</ContentArea>

<ContentArea>
  <ImageBanner
    badges={badge}
    radius="rounded"
    {...content}
    description={Description}
    {...imagesFullWidthAutoHeight}
    autoHeight
    isImageFullWidth
  />
</ContentArea>