import Hr from '../Hr'
import Span from '../typography/Span'
import Content from '../Content'
import { Sandbox } from '@startupjs/docs'

# Hr (горизонтальная линия)

То же самое, что и html тег `hr`, используемый в качестве тематического разрыва между абзацами.

```jsx
import { Hr } from '@startupjs/ui'
```

## Пример

```jsx example
return (
  <Content padding style={{ backgroundColor: 'white' }}>
    <Span size='xl' description>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </Span>
    <Hr />
    <Span size='xl' description>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </Span>
  </Content>
)
```

## Размеры

Размер `Hr` может быть изменен с помощью свойства `size`. Размер по умолчанию - `m`.

```jsx example
return (
  <Content padding style={{ backgroundColor: 'white' }}>
    <Span size='xl' description>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </Span>
    <Hr size='l' />
    <Span size='xl' description>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </Span>
    <Hr size='xl'/>
    <Span size='xl' description>
      Leo duis ut diam quam nulla porttitor massa id. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Sed blandit libero volutpat sed. Elit duis tristique sollicitudin nibh sit amet commodo. Euismod nisi porta lorem mollis aliquam ut. Ultrices vitae auctor eu augue
    </Span>
  </Content>
)
```

## Sandbox

<Sandbox Component={Hr} />