Figma

ContentArea

Компонент задает содержимому страницы боковые отступы, максимальную ширину и центрирование на больших разрешениях

import { ContentArea } from '@megafon/ui-core';

Базовое использование

<ContentArea>
  Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
  Монтажник проведёт все необходимые работы под ключ.
</ContentArea>

Фоновый цвет

Для внешнего контейнера

Цвет применяется ко всему компоненту

<ContentArea outerBackgroundColor="white">
  <div style={{ color: '#333333'}}>
      (white) Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>

<ContentArea outerBackgroundColor="black">
  <div style={{ color: '#ffffff'}}>
      (black) Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>

<ContentArea outerBackgroundColor="green">
  <div style={{ color: '#ffffff'}}>
      (green) Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>

<ContentArea outerBackgroundColor="purple">
  <div style={{ color: '#ffffff'}}>
      (purple) Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>

<ContentArea outerBackgroundColor="spbSky0">
  <div style={{ color: '#333333'}}>
      (spbSky0) Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>

<ContentArea outerBackgroundColor="spbSky1">
  <div style={{ color: '#333333'}}>
      (spbSky1) Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>
<ContentArea outerBackgroundColor="spbSky2">
  <div style={{ color: '#333333'}}>
      (spbSky2) Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>

Для внутреннего контейнера

Цвет применяется к отцентрированному контейнеру с ограниченной шириной. Разница будет видна при ширине компонента больше 1440px.

<ContentArea innerBackgroundColor="purple">
  <div style={{ color: '#ffffff' }}>
      Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>

Отключение боковых отступов на всех разрешениях

Разница будет видна при изменении ширины окна

<ContentArea disableIndents="all" outerBackgroundColor="spbSky0">
  Без отключения отступов. Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям
  Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
</ContentArea>
<ContentArea disableIndents="mobile-tablet" outerBackgroundColor="spbSky0">
  Отключение боковых оступов на разрешении 0–1023px. Подключение к домашнему интернету осуществляется в удобное
  для вас время по технологиям Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
</ContentArea>
<ContentArea disableIndents="mobile" outerBackgroundColor="spbSky0">
  Отключение боковых оступов на разрешении 0–767px. Подключение к домашнему интернету осуществляется в удобное для
  вас время по технологиям Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
</ContentArea>

Уменьшение отступов для маленьких мобильных разрешений (320px-359px)

<ContentArea innerBackgroundColor="spbSky0" indents="small-mobile">
  C уменьшенными отступами. Подключение к домашнему интернету осуществляется в удобное для вас время по
  технологиям Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
</ContentArea>
<ContentArea outerBackgroundColor="spbSky0">
  C отступами по умолчанию. Подключение к домашнему интернету осуществляется в удобное для вас время по
  технологиям Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
</ContentArea>