#### Source

```jsx static
// index.tsx
import React, { FC } from 'react';
import { TextProps } from 'types';
import * as S from './styles';

export const Text: FC<TextProps> = ({ block, children, size }) => {
  return (
    <S.Text data-testid="text-id" as={size} block={block}>
      {children}
    </S.Text>
  );
};

Text.defaultProps = { size: 'span', underlined: false };

export default Text;
```

```jsx static
// styles.ts
import styled from 'styled-components';
import { TextProps } from 'types';

export const Text =
  styled.span<TextProps>`
  ${({ block }) => (block ? 'display: block;' : '')}
  ${({ size, underlined }) => (underlined ? textBorderHelper(size) : '')}
`;

const textBorderHelper = (size?: TextElementEnum) => {
  switch (size) {
    case 'h6':
    case 'h5':
      return `border-bottom: 1px solid #cccccc;`;
    case 'h4':
    case 'h3':
      return `border-bottom: 2px solid #cccccc;`;
    case 'h2':
    case 'h1':
      return `border-bottom: 3px solid #cccccc;`;
    case 'small':
    case 'p':
    case 'span':
    default:
      return `text-decoration: underline; text-decoration-color: #cccccc;`;
  }
};
```

#### Sizes

```jsx padded
<Text size='h1'>Some H1 Text</Text>
<Text size='h2'>Some H2 Text</Text>
<Text size='h3'>Some H3 Text</Text>
<Text size='h4'>Some H4 Text</Text>
<Text size='h5'>Some H5 Text</Text>
<Text size='h6'>Some H6 Text</Text>
<Text size='p'>Some Paragraph Text</Text>
<Text size='span' block>Some Span Text</Text>
<Text size='small' block>Some Small Text</Text>
```

#### Underlined

```jsx padded
<Text underlined size='h1'>Some Underlined H1 Text</Text>
<Text underlined size='h2'>Some Underlined H2 Text</Text>
<Text underlined size='h3'>Some Underlined H3 Text</Text>
<Text underlined size='h4'>Some Underlined H4 Text</Text>
<Text underlined size='h5'>Some Underlined H5 Text</Text>
<Text underlined size='h6'>Some Underlined H6 Text</Text>
<Text underlined size='p'>Some Underlined Paragraph Text</Text>
<Text underlined size='span' block>Some Underlined Span Text</Text>
<Text underlined size='small' block>Some Underlined Small Text</Text>
```

#### Styles

```jsx padded
<Text weight="bold" size='h1'>Some Bold H1 Text</Text>
<Text weight="bold" italic size='h1'>Some Bold Italic H1 Text</Text>
<Text weight="500" size='h2'>Some Bold H2 Text</Text>
<Text weight="500" size='h3'>Some Bold H3 Text</Text>
<Text weight="500" size='h4'>Some Bold H4 Text</Text>
<Text weight="500" size='h5'>Some Bold H5 Text</Text>
<Text weight="500" size='h6'>Some Bold H6 Text</Text>
<Text weight="500" size='p'>Some Bold Paragraph Text</Text>
<Text weight="500" italic size='span' block>Some Bold Italic Span Text</Text>
<Text weight="500" size='span' block>Some Bold Span Text</Text>
<Text weight="500" size='small' block>Some Bold Small Text</Text>
```