Caption

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

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

<Caption>
  При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

<div style={{ width: '10em' }}>
  <Caption space="tight">
      Кэпшн в узком контейнере
  </Caption>
</div>

Без отступа снизу

<Caption hasMargin={false}>
  При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>
<Caption hasMargin={false}>
  При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

Выравнивание

По левому краю

<Caption align="left">
  При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

По центру

<Caption align="center">
  При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

По правому краю

<Caption align="right">
  При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

Цвета

<Caption color="default">
  'content' - При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

<Caption color="gray">
  'gray' - При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

<DemoBackgroundWrapper>
  <Caption color="white">
      'white' - При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
  </Caption>
</DemoBackgroundWrapper>

<Caption color="green">
  'green' - При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

<Caption color="purple">
  'purple' - При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

<Caption color="inherit">
  'inherit' - При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>
Код DemoBackgroundWrapper
export const DemoBackgroundWrapper: React.FC = ({ children }) => (
<div style={{ background: '#00B956' }}>
{children}
</div>
);