Figma

Header

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

Код tableRowStyle
export const tableRowStyle = {
    border: '1px solid #EDEDED',
    display: 'flex',
    alignItems: 'center',
    minHeight: '50px',
    padding: '15px',
};

Размеры

<div style={tableRowStyle}>
  <Header as="h1">H1. MegaFon</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h2">H2. MegaFon</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h3">H3. MegaFon</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h5">H5. MegaFon</Header>
</div>

Цвета

<div style={tableRowStyle}>
  <Header color="default" as="h2">MegaFon default</Header>
</div>
<div style={{...tableRowStyle, background: 'var(--stcWhite)'}}>
  <Header color="black" as="h2">MegaFon black</Header>
</div>
<div style={{...tableRowStyle, background: 'var(--stcBlack)'}}>
  <Header color="white" as="h2">MegaFon white</Header>
</div>
<div style={tableRowStyle}>
  <Header color="green" as="h2">MegaFon green</Header>
</div>
<div style={tableRowStyle}>
  <Header color="purple" as="h2">MegaFon purple</Header>
</div>
<div style={tableRowStyle}>
  <Header color="blue" as="h2">MegaFon blue</Header>
</div>

Внешние отступы

(сверху/снизу)

<div style={tableRowStyle}>
  <Header as="h1" margin>H1. MegaFon (0/32)</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h2" margin>H2. MegaFon (56/24)</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h3" margin>H3. MegaFon (32/24)</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h5" margin>H5. MegaFon (24/16)</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h2">Без отступов</Header>
</div>

Дополнительный компонент

<div style={tableRowStyle}>
  <Header as="h2" addition={
      <Header as="h3">Additional component</Header>
  }>MegaFon</Header>
</div>

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

<Header align="left">
  MegaFon
</Header>
<Header align="center">
  MegaFon
</Header>
<Header align="right">
  MegaFon
</Header>

Межстрочные отступы

<Header as="h5">
  Стандартное значение
</Header>

<div style={{ width: '5em', marginTop: '18px' }}>
  <Header space="tight" as="h5">
      В узком контейнере
  </Header>
</div>