Box

import { Text, Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Flex
      height="100%"
      width="100%"
      justifyContent="center"
      alignItems="center"
    >
      <Text>Enable your screen reader to hear the following text:</Text>
      <Box display="visuallyHidden">Hi there.</Box>
    </Flex>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { Text, Box, Flex, Heading } from 'gestalt';

export default function Example() {
  return (
    <Flex
      direction="column"
      flex="grow"
      alignItems="center"
      height="100%"
      width="100%"
    >
      <Flex height="100%" width="100%">
        <Box
          as="nav"
          title="as prop example nav"
          column={6}
          color="successBase"
          width="100%"
          padding={2}
          borderStyle="sm"
        >
          <Text color="light" weight="bold">
            Top Nav Menu: as=&quot;nav&quot;
          </Text>
        </Box>
        <Box column={6} display="inlineBlock" borderStyle="sm">
          <Box width="100%" padding={2}>
            <Text>HTML output:</Text>
            <Text>{'<nav>Menu</nav>'}</Text>
          </Box>
        </Box>
      </Flex>
      <Flex height="100%" width="100%">
        <Box
          as="article"
          column={6}
          color="successBase"
          width="100%"
          padding={2}
          borderStyle="sm"
        >
          <Heading color="light" size="500">
            Article 1
          </Heading>
          <Text color="light" weight="bold">
            Article: as=&quot;article&quot;
          </Text>
        </Box>
        <Box column={6} display="inlineBlock" borderStyle="sm">
          <Box width="100%" padding={2}>
            <Text>HTML output:</Text>
            <Text>{'<article>'}</Text>
            <Text>{'<h2>Article 1</h2>'}</Text>
            <Text>{'</article>'}</Text>
          </Box>
        </Box>
      </Flex>
    </Flex>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { Text, Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Flex alignItems="center" height="100%" width="100%">
      <Box column={12}>
        <Box role="feed" color="infoBase" width="100%" padding={2}>
          <Text color="light" weight="bold">
            Container: role=&quot;feed&quot;
          </Text>
          <Box column={8} display="inlineBlock">
            <Box
              role="article"
              title="Article 1"
              color="successBase"
              height={50}
              width="100%"
              padding={2}
            >
              <Text color="light" weight="bold">
                Content: role=&quot;article&quot;
              </Text>
            </Box>
          </Box>
          <Box column={4} display="inlineBlock">
            <Box
              role="form"
              color="warningBase"
              height={50}
              width="100%"
              padding={2}
            >
              <Text color="light" weight="bold">
                Contact Form: role=&quot;form&quot;
              </Text>
            </Box>
          </Box>
        </Box>
        <Box
          role="navigation"
          title="Site Map"
          color="successBase"
          height={50}
          width="100%"
          padding={2}
        >
          <Text color="light" weight="bold">
            Site Map: role=&quot;navigation&quot;
          </Text>
        </Box>
        <Text>{'Everything above will render as a <div>'}</Text>
      </Box>
    </Flex>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { Text, Box, Flex, Button } from 'gestalt';

function BoxWithMargins({ marginEnd = 0, marginStart = 0 }) {
  return (
    <Box
      dangerouslySetInlineStyle={{
        __style: { backgroundColor: 'rgba(110, 15, 60, 0.2)' },
      }}
    >
      <Box
        width={200}
        padding={2}
        marginEnd={marginEnd}
        marginStart={marginStart}
        dangerouslySetInlineStyle={{
          __style: { backgroundColor: 'rgba(19, 58, 94, 0.2)' },
        }}
      >
        <Text>
          {JSON.stringify(
            `marginEnd: ${marginEnd}, marginStart: ${marginStart}`
          )}
        </Text>
      </Box>
    </Box>
  );
}

export default function Example() {
  return (
    <Flex
      direction="column"
      gap={2}
      height="100%"
      alignItems="center"
      justifyContent="center"
    >
      <Button
        size="sm"
        onClick={() => {
          if (document.documentElement) {
            const isRTL = document.documentElement.dir === 'rtl';
            document.documentElement.dir = isRTL ? 'ltr' : 'rtl';
          }
        }}
        text="Toggle Page Direction"
      />

      <BoxWithMargins marginStart={8} />
      <BoxWithMargins marginEnd={8} />
      <BoxWithMargins marginStart={-8} />
      <BoxWithMargins marginEnd={-8} />
    </Flex>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { Text, Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Flex height="100%" alignItems="center">
      <Box column={12}>
        <Box
          width="25%"
          minHeight={25}
          maxHeight={100}
          overflow="hidden"
          padding={2}
          borderStyle="lg"
          color="warningBase"
        >
          <Text color="light">
            Add or remove text in the editor to see the min and max heights take
            affect.
          </Text>
        </Box>
        <Box
          width="50%"
          height={100}
          padding={2}
          borderStyle="lg"
          color="successBase"
        >
          <Text color="light">
            Width and Height can be specified with numbers for &quot;px&quot;
            values or percentages
          </Text>
        </Box>
        <Box
          width="75%"
          minWidth={100}
          maxWidth={500}
          padding={2}
          borderStyle="lg"
          color="infoBase"
        >
          <Text color="light">
            Change the screen width to see the min and max widths take affect{' '}
          </Text>
        </Box>
        <Box fit padding={2} borderStyle="lg" color="errorBase">
          <Text color="light">&quot;fit&quot; sets width to 100% </Text>
        </Box>
      </Box>
    </Flex>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { Text, Box, Flex } from 'gestalt';

export default function Example() {
  const text =
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae nisl nec turpis vehicula ultrices. Duis pretium ut ipsum nec interdum. Vestibulum arcu dolor, consectetur ac eros a, varius commodo justo. Maecenas tincidunt neque elit, eu pretium arcu dictum ac. Donec vehicula mauris ut erat dictum, eget tempus elit luctus. In volutpat felis justo, et venenatis arcu viverra in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin enim lorem, vulputate eget imperdiet nec, dapibus sed diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse rhoncus ut leo non gravida. Nulla tincidunt tellus sit amet ornare venenatis. Sed quis lorem cursus, porttitor tellus sed, commodo ex. Praesent blandit pretium faucibus. Aenean orci tellus, vulputate id sapien sit amet, porta fermentum quam. Praesent sem risus, tristique sit amet pulvinar in, scelerisque sit amet massa.';

  return (
    <Flex
      gap={4}
      wrap
      width="100%"
      height="100%"
      justifyContent="center"
      alignItems="center"
    >
      <Flex gap={{ column: 8, row: 0 }} direction="column" wrap>
        <Box>
          <Text>Overflow Hidden</Text>
          <Box
            overflow="hidden"
            width={300}
            maxHeight={100}
            padding={2}
            borderStyle="lg"
          >
            <Text>{text}</Text>
          </Box>
        </Box>
        <Box>
          <Text>Overflow Scroll</Text>
          <Box
            overflow="scroll"
            width={300}
            maxHeight={100}
            padding={2}
            borderStyle="lg"
            tabIndex={0}
          >
            <Text>{text}</Text>
          </Box>
        </Box>
        <Box marginBottom={4}>
          <Text>Overflow Visible</Text>
          <Box
            overflow="visible"
            width={300}
            maxHeight={100}
            padding={2}
            borderStyle="lg"
          >
            <Text>{text.substring(0, 180)}</Text>
          </Box>
        </Box>
        <Box>
          <Text>Overflow Auto</Text>
          <Box
            overflow="auto"
            width={300}
            maxHeight={100}
            padding={2}
            color="selected"
          >
            <Box width={350} padding={2} color="default" tabIndex={0}>
              <Text>{text}</Text>
            </Box>
          </Box>
        </Box>
        <Box>
          <Text>Overflow scrollX</Text>
          <Box
            overflow="scrollX"
            width={300}
            maxHeight={100}
            padding={2}
            color="selected"
          >
            <Box width={350} padding={2} color="default" tabIndex={0}>
              <Text>{text}</Text>
            </Box>
          </Box>
        </Box>
        <Box>
          <Text>Overflow scrollY</Text>
          <Box
            overflow="scrollY"
            width={300}
            maxHeight={100}
            padding={2}
            color="selected"
          >
            <Box width={350} padding={2} color="default" tabIndex={0}>
              <Text>{text}</Text>
            </Box>
          </Box>
        </Box>
      </Flex>
    </Flex>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Flex
      gap={{ column: 0, row: 3 }}
      height="100%"
      width="100%"
      alignItems="center"
      justifyContent="center"
    >
      <Box
        padding={0}
        smPadding={1}
        mdPadding={4}
        lgPadding={8}
        color="darkWash"
      >
        <Box width={40} height={40} color="successBase" />
      </Box>
      <Box
        paddingX={0}
        smPaddingX={1}
        mdPaddingX={4}
        lgPaddingX={8}
        color="darkWash"
      >
        <Box width={40} height={40} color="infoBase" />
      </Box>
      <Box
        paddingY={0}
        smPaddingY={1}
        mdPaddingY={4}
        lgPaddingY={8}
        color="darkWash"
      >
        <Box width={40} height={40} color="warningBase" />
      </Box>
    </Flex>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Flex justifyContent="center" height="100%" width="100%">
      <Box color="infoBase" marginStart={12} marginEnd={12} column={12}>
        <Box
          borderStyle="sm"
          color="successBase"
          margin="auto"
          column={5}
          height={100}
        />
        <Box
          borderStyle="sm"
          color="warningBase"
          marginStart="auto"
          column={3}
          height={100}
        />
      </Box>
    </Flex>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { Text, Box } from 'gestalt';

export default function Example() {
  return (
    <Box height="100%" width="100%">
      <Box position="absolute" top left padding={2} color="infoBase">
        <Text color="light">Top Left</Text>
      </Box>
      <Box position="absolute" top right padding={2} color="infoBase">
        <Text color="light">Top Right</Text>
      </Box>
      <Box position="absolute" bottom left padding={2} color="infoBase">
        <Text color="light">Bottom Left</Text>
      </Box>
      <Box position="absolute" bottom right padding={2} color="infoBase">
        <Text color="light">Bottom Right</Text>
      </Box>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { Fragment, useState, useRef } from 'react';
import { Text, Box, Flex, Button, Popover } from 'gestalt';

export default function Example() {
  const [open, setOpen] = useState(false);

  const anchorRef = useRef(null);

  return (
    <Fragment>
      <Flex
        direction="column"
        gap={6}
        height="100%"
        width="100%"
        justifyContent="center"
        alignItems="center"
      >
        <Button
          color="red"
          onClick={() => setOpen((prevVal) => !prevVal)}
          text={open ? 'Close Popover' : 'Anchor a Popover to Box'}
        />
        <Box borderStyle="sm" padding={3} ref={anchorRef} rounding={1}>
          <Text>I&apos;m a Box</Text>
        </Box>
      </Flex>
      {open && (
        <Popover
          anchor={anchorRef.current}
          idealDirection="down"
          onDismiss={() => {}}
          shouldFocus={false}
        >
          <Box padding={3}>
            <Text weight="bold">I&apos;m a Popover anchored to a Box</Text>
          </Box>
        </Popover>
      )}
    </Fragment>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { Text, Box, CompositeZIndex, FixedZIndex, Sticky } from 'gestalt';

export default function Example() {
  const HEADER_ZINDEX = new FixedZIndex(100);
  const zIndex = new CompositeZIndex([HEADER_ZINDEX]);
  return (
    <Box
      column={12}
      dangerouslySetInlineStyle={{ __style: { isolation: 'isolate' } }}
      height={150}
      overflow="scroll"
      tabIndex={0}
    >
      <Sticky top={0} zIndex={HEADER_ZINDEX}>
        <Box color="errorBase" width="80%" height={60} padding={2}>
          <Text color="light">
            This is sticky and won&apos;t move when scrolling
          </Text>
        </Box>
      </Sticky>
      <Box
        color="infoBase"
        width="50%"
        height={100}
        zIndex={zIndex}
        position="relative"
        padding={2}
      >
        <Text color="light">
          This will float above the sticky Box when scrolling
        </Text>
      </Box>
      <Box color="successBase" width="30%" height={120} padding={2}>
        <Text color="light">
          This will go behind the sticky Box when scrolling
        </Text>
      </Box>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape