1<Flex gap="medium" align="center">
2  <Text variant="primary">primary</Text>
3  <Text variant="secondary">secondary</Text>
4  <Text variant="tertiary">tertiary</Text>
5  <div
6    style={{
7      backgroundColor: "var(--rs-color-background-neutral-tertiary)",
8      padding: "var(--rs-space-3)",
9    }}
10  >
11    <Text variant="emphasis">emphasis</Text>
12  </div>
13  <Text variant="accent">accent</Text>
14  <Text variant="attention">attention</Text>
15  <Text variant="danger">danger</Text>
16  <Text variant="success">success</Text>
17</Flex>

1<Flex gap="large" align="center">
2  <Text size="micro">This is a text</Text>
3  <Text size="mini">This is a text</Text>
4  <Text size="small">This is a text</Text>
5  <Text size="regular">This is a text</Text>
6  <Text size="large">This is a text</Text>
7</Flex>

1<Flex gap="large" align="center">
2  <Text weight="regular">This is a text</Text>
3  <Text weight="medium">This is a text</Text>
4</Flex>

1<Flex gap="large" align="center">
2  <Text transform="capitalize">This is a text</Text>
3  <Text transform="uppercase">This is a text</Text>
4  <Text transform="lowercase">This is a text</Text>
5</Flex>

1<Flex gap="medium" align="center" direction="column">
2  <Text lineClamp={1}>
3    Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat
4    mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor
5    labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur
6    fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud
7    eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor
8    magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim
9    sit consectetur enim.
10  </Text>
11  <Text lineClamp={2}>
12    Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat
13    mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor
14    labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur
15    fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud
16    eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor
17    magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim
18    sit consectetur enim.
19  </Text>
20</Flex>

1<Flex
2  gap="medium"
3  align="center"
4  direction="column"
5  style={{ width: "100%", maxWidth: 400, alignItems: "stretch" }}
6>
7  <Text align="start">This is a text</Text>
8  <Text align="center">This is a text</Text>
9  <Text align="end">This is a text</Text>
10  <Text align="justify">This is a text</Text>
11</Flex>

1<Flex gap="large" align="center">
2  <Text italic>This is a text</Text>
3  <Text strikeThrough>This is a text</Text>
4  <Text underline>This is a text</Text>
5  <Text italic strikeThrough underline>
6    This is a text
7  </Text>
8</Flex>