Scroll Area

<ScrollArea.Root>
  <ScrollArea.Viewport indicators="all" style={{ height: 180 }}>
    <Box p="2" pr="8">
      <Heading size="4" mb="2" trim="start">
        Principles of the typographic craft
      </Heading>
      <Flex direction="column" gap="4">
        <Text as="p">
          Three fundamental aspects of typography are legibility, readability,
          and aesthetics. Although in a non-technical sense “legible” and
          “readable” are often used synonymously, typographically they are
          separate but related concepts.
        </Text>

        <Text as="p">
          Legibility describes how easily individual characters can be
          distinguished from one another. It is described by Walter Tracy as
          “the quality of being decipherable and recognisable”. For instance, if
          a “b” and an “h”, or a “3” and an “8”, are difficult to distinguish at
          small sizes, this is a problem of legibility.
        </Text>

        <Text as="p">
          Typographers are concerned with legibility insofar as it is their job
          to select the correct font to use. Brush Script is an example of a
          font containing many characters that might be difficult to
          distinguish. The selection of cases influences the legibility of
          typography because using only uppercase letters (all-caps) reduces
          legibility.
        </Text>
      </Flex>
    </Box>
  </ScrollArea.Viewport>

  <ScrollArea.Scrollbar orientation="horizontal" />
  <ScrollArea.Scrollbar orientation="vertical" />
</ScrollArea.Root>

<Grid columns="2" gap="2">
  <ScrollArea.Root>
    <ScrollArea.Viewport indicators="top" style={{ height: 180 }}>
      <Box p="2" pr="8">
        <Heading size="4" mb="2" trim="start">
          Top only indicator
        </Heading>
        <Flex direction="column" gap="4">
          <Text as="p">
            Three fundamental aspects of typography are legibility, readability,
            and aesthetics. Although in a non-technical sense “legible” and
            “readable” are often used synonymously, typographically they are
            separate but related concepts.
          </Text>

          <Text as="p">
            Legibility describes how easily individual characters can be
            distinguished from one another. It is described by Walter Tracy as
            “the quality of being decipherable and recognisable”. For instance,
            if a “b” and an “h”, or a “3” and an “8”, are difficult to
            distinguish at small sizes, this is a problem of legibility.
          </Text>

          <Text as="p">
            Typographers are concerned with legibility insofar as it is their
            job to select the correct font to use. Brush Script is an example of
            a font containing many characters that might be difficult to
            distinguish. The selection of cases influences the legibility of
            typography because using only uppercase letters (all-caps) reduces
            legibility.
          </Text>
        </Flex>
      </Box>
    </ScrollArea.Viewport>

    <ScrollArea.Scrollbar orientation="horizontal" />
    <ScrollArea.Scrollbar orientation="vertical" />
  </ScrollArea.Root>

  <ScrollArea.Root>
    <ScrollArea.Viewport indicators="bottom" style={{ height: 180 }}>
      <Box p="2" pr="8">
        <Heading size="4" mb="2" trim="start">
          Bottom only indicator
        </Heading>
        <Flex direction="column" gap="4">
          <Text as="p">
            Three fundamental aspects of typography are legibility, readability,
            and aesthetics. Although in a non-technical sense “legible” and
            “readable” are often used synonymously, typographically they are
            separate but related concepts.
          </Text>

          <Text as="p">
            Legibility describes how easily individual characters can be
            distinguished from one another. It is described by Walter Tracy as
            “the quality of being decipherable and recognisable”. For instance,
            if a “b” and an “h”, or a “3” and an “8”, are difficult to
            distinguish at small sizes, this is a problem of legibility.
          </Text>

          <Text as="p">
            Typographers are concerned with legibility insofar as it is their
            job to select the correct font to use. Brush Script is an example of
            a font containing many characters that might be difficult to
            distinguish. The selection of cases influences the legibility of
            typography because using only uppercase letters (all-caps) reduces
            legibility.
          </Text>
        </Flex>
      </Box>
    </ScrollArea.Viewport>

    <ScrollArea.Scrollbar orientation="horizontal" />
    <ScrollArea.Scrollbar orientation="vertical" />
  </ScrollArea.Root>
</Grid>

<ScrollArea.Root>
  <ScrollArea.Viewport indicators="x" style={{ height: 180 }}>
    <Box p="2" pr="8">
      <Heading size="4" mb="2" trim="start">
        Principles of the typographic craft
      </Heading>
      <Box
        height="120px"
        width="100vw"
        style={{
          background: 'linear-gradient(45deg, var(--accent-9), var(--jade-9))',
        }}
      />
    </Box>
  </ScrollArea.Viewport>

  <ScrollArea.Scrollbar orientation="horizontal" />
  <ScrollArea.Scrollbar orientation="vertical" />
</ScrollArea.Root>

<ScrollArea.Root>
  <ScrollArea.Viewport indicators="all" style={{ height: 180 }}>
    <Box p="2" pr="8">
      <Heading size="4" mb="2" trim="start">
        Principles of the typographic craft
      </Heading>
      <Flex direction="column" gap="4">
        <Text as="p">
          Three fundamental aspects of typography are legibility, readability,
          and aesthetics. Although in a non-technical sense “legible” and
          “readable” are often used synonymously, typographically they are
          separate but related concepts.
        </Text>

        <Box
          height="80px"
          width="100vw"
          style={{
            background:
              'linear-gradient(45deg, var(--accent-9), var(--jade-9))',
          }}
        />

        <Text as="p">
          Legibility describes how easily individual characters can be
          distinguished from one another. It is described by Walter Tracy as
          “the quality of being decipherable and recognisable”. For instance, if
          a “b” and an “h”, or a “3” and an “8”, are difficult to distinguish at
          small sizes, this is a problem of legibility.
        </Text>

        <Text as="p">
          Typographers are concerned with legibility insofar as it is their job
          to select the correct font to use. Brush Script is an example of a
          font containing many characters that might be difficult to
          distinguish. The selection of cases influences the legibility of
          typography because using only uppercase letters (all-caps) reduces
          legibility.
        </Text>
      </Flex>
    </Box>
  </ScrollArea.Viewport>

  <ScrollArea.Scrollbar orientation="horizontal" />
  <ScrollArea.Scrollbar orientation="vertical" />
</ScrollArea.Root>

<ScrollArea.Root>
  <ScrollArea.Viewport indicators="all" style={{ height: 180 }}>
    <Box p="2" pr="8">
      <Heading size="4" mb="2" trim="start">
        Principles of the typographic craft
      </Heading>
      <Box
        height="120px"
        width="120px"
        style={{
          background: 'linear-gradient(45deg, var(--accent-9), var(--jade-9))',
        }}
      />
    </Box>
  </ScrollArea.Viewport>

  <ScrollArea.Scrollbar orientation="horizontal" />
  <ScrollArea.Scrollbar orientation="vertical" />
</ScrollArea.Root>