import { CodeBlock } from "@src/helpers/DocBlocks";
import Text from "./Text";

# Text Variations

> Text Components which adheres to the Haptik Design System.

## Display

<CodeBlock>
  <Text variant="display-1.bold">
    Display 1 - Bold - Lorem ipsum dolor sit amet.
  </Text>
</CodeBlock>

<CodeBlock>
  <Text variant="display-1.semi-bold">
    Display 1 - Semi Bold - Lorem ipsum dolor sit amet.
  </Text>
</CodeBlock>

## Heading

<CodeBlock>
  <Text variant="h1.bold">h1 - Bold - Lorem ipsum dolor sit amet.</Text>
</CodeBlock>

<CodeBlock>
  <Text variant="h1.semi-bold">
    h1 - Semi Bold - Lorem ipsum dolor sit amet.
  </Text>
</CodeBlock>

<CodeBlock>
  <Text variant="h2.bold">h2 - Bold - Lorem ipsum dolor sit amet.</Text>
</CodeBlock>

<CodeBlock>
  <Text variant="h2.semi-bold">
    h2 - Semi Bold - Lorem ipsum dolor sit amet.
  </Text>
</CodeBlock>

<CodeBlock>
  <Text variant="h3.bold">h3 - Bold - Lorem ipsum dolor sit amet.</Text>
</CodeBlock>

<CodeBlock>
  <Text variant="h3.semi-bold">
    h3 - Semi Bold - Lorem ipsum dolor sit amet.
  </Text>
</CodeBlock>

<CodeBlock>
  <Text variant="h4.bold">h4 - Bold - Lorem ipsum dolor sit amet.</Text>
</CodeBlock>

<CodeBlock>
  <Text variant="h4.semi-bold">
    h4 - Semi Bold - Lorem ipsum dolor sit amet.
  </Text>
</CodeBlock>

<CodeBlock>
  <Text variant="h5.bold">h5 - Bold - Lorem ipsum dolor sit amet.</Text>
</CodeBlock>

<CodeBlock>
  <Text variant="h5.semi-bold">
    h5 - Semi Bold - Lorem ipsum dolor sit amet.
  </Text>
</CodeBlock>

## Body

<CodeBlock>
  <Text variant="body.lg">Body - lg - Lorem ipsum dolor sit amet.</Text>
</CodeBlock>
<CodeBlock>
  <Text variant="body.md">Body - md - Lorem ipsum dolor sit amet.</Text>
</CodeBlock>
<CodeBlock>
  <Text variant="body.sm">Body - sm - Lorem ipsum dolor sit amet.</Text>
</CodeBlock>
<CodeBlock>
  <Text variant="body.xs">Body - xs - Lorem ipsum dolor sit amet.</Text>
</CodeBlock>