Text

<Flex direction="column" gap={{ column: 4, row: 0 }} width={200}>
  <Text align="start">Start (default)</Text>
  <Divider />
  <Text align="end">End</Text>
  <Divider />
  <Text align="center">Center</Text>
  <Divider />
  <Text align="forceLeft">Force left</Text>
  <Divider />
  <Text align="forceRight">Force right</Text>
</Flex>

<Flex alignItems="start" direction="column" gap={{ column: 4, row: 0 }}>
  <Text>Some content in a default block element. (default)</Text>
  <Box>
    <Text inline>Inline text with the inline prop.</Text>
    {' '}
    <Text inline>More inline text.</Text>
  </Box>
</Flex>

<Flex alignItems="start" direction="column" gap={{ column: 3, row: 0 }}>
    <Box color="inverse" padding={1}>
      <Text color="inverse" size="400">Inverse</Text>
    </Box>
    <Text color="subtle" size="400">Subtle</Text>
    <Text color="default" size="400">Default</Text>
    <Text color="success" size="400">Success</Text>
    <Text color="warning" size="400">Warning</Text>
    <Text color="error" size="400">Error</Text>
    <Text color="shopping" size="400">Shopping</Text>
    <Box color="primary" padding={1}>
      <Text color="light" size="400">Light</Text>
    </Box>
    <Box color="infoWeak" padding={1}>
      <Text color="dark" size="400">Dark</Text>
    </Box>
  </Flex>

<Flex maxWidth={200} direction="column" gap={{ column: 8, row: 0 }}>
  <Flex direction="column" gap={{ column: 2, row: 0 }}>
    <Text>breakWord (default):</Text>
    <Box color="secondary" padding={2} rounding={2}>
      <Text>
        This is a long and Supercalifragilisticexpialidocious sentence.
        次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
      </Text>
    </Box>
  </Flex>

  <Flex direction="column" gap={{ column: 2, row: 0 }}>
    <Text>normal:</Text>
    <Box color="secondary" padding={2} rounding={2}>
      <Text overflow="normal">
        This is a long and Supercalifragilisticexpialidocious sentence.
        次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
      </Text>
    </Box>
  </Flex>

  <Flex direction="column" gap={{ column: 2, row: 0 }}>
  <Text>lineClamp:</Text>
    <Box color="secondary" padding={2} rounding={2}>
      <Text lineClamp={2}>
        This is a long and Supercalifragilisticexpialidocious sentence.
        次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
      </Text>
    </Box>
  </Flex>
</Flex>

<Flex alignItems="start" direction="column" gap={{ column: 2, row: 0 }}>
  <Flex alignItems="center" gap={{ row: 2, column: 0 }}>
    <Text inline size="100">Size 100</Text>
    <span lang="ja">
      <Text inline size="100">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={{ row: 2, column: 0 }}>
    <Text inline size="200">Size 200</Text>
    <span lang="ja">
      <Text inline size="200">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={{ row: 2, column: 0 }}>
    <Text inline size="300">Size 300 (default size)</Text>
    <span lang="ja">
      <Text inline size="300">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={{ row: 2, column: 0 }}>
    <Text inline size="400">Size 400</Text>
    <span lang="ja">
      <Text inline size="400">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={{ row: 2, column: 0 }}>
    <Text inline size="500">Size 500</Text>
    <span lang="ja">
      <Text inline size="500">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={{ row: 2, column: 0 }}>
    <Text inline size="600">Size 600</Text>
    <span lang="ja">
      <Text inline size="600">
        こんにちは
      </Text>
    </span>
  </Flex>
</Flex>

<Flex direction="column" gap={{ column: 2, row: 0 }}>
  <Text weight="bold">Bold</Text>
  <Text italic>Italic</Text>
  <Text underline>Underline</Text>
</Flex>

<Flex alignItems="center" direction="column" gap={{ column: 2, row: 0 }}>
  <Text size="200" weight="bold">
    Hover over the examples below for a few seconds to see the title text:
  </Text>

  <Box borderStyle="sm" maxWidth={400} padding={1}>
    <Flex direction="column" gap={{ column: 3, row: 0 }}>
      <Flex direction="column" gap={{ column: 1, row: 0 }}>
        <Text italic size="100">
          This title attribute is automatically added because lineClamp is used and children is a string.
        </Text>
        <Text lineClamp={1}>
          This is a long and Supercalifragilisticexpialidocious sentence.
          次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
        </Text>
      </Flex>

      <Flex direction="column" gap={{ column: 1, row: 0 }}>
        <Text italic size="100">
          This example uses lineClamp but has no title attribute, because children is a React.Node.
        </Text>
        <Text lineClamp={1}>
          <Link href="#">
            This is a long and Supercalifragilisticexpialidocious sentence.
            次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
          </Link>
        </Text>
      </Flex>

      <Flex direction="column" gap={{ column: 1, row: 0 }}>
        <Text italic size="100">
          This example uses lineClamp and children is a React.Node, but uses the title prop.
        </Text>
        <Text
          lineClamp={1}
          title="This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉"
        >
          <Link href="#">
            This is a long and Supercalifragilisticexpialidocious sentence.
            次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
          </Link>
        </Text>
      </Flex>
    </Flex>
  </Box>
</Flex>