export default function Example() {
  const items = new Array(10).fill(" ");
  return (
    <Box
      css={{
        paddingInline: "$100",
        width: "100vw",
      }}
    >
      <Carousel.Root>
        <Carousel.Header>
          <Carousel.HeaderContent>
            <Carousel.Title css={{ fontFamily: "$meta" }}>
              Carousel Title
            </Carousel.Title>
          </Carousel.HeaderContent>
          <Carousel.HeaderActions>
            <Carousel.PreviousButton />
            <Carousel.NextButton />
          </Carousel.HeaderActions>
        </Carousel.Header>
        <Carousel.Content>
          {items.map((item, i) => (
            <Carousel.Item key={item}>
              <Card
                key={"item" + i}
                css={{
                  width: "300px",
                  marginBlockEnd: "$025",
                  marginInlineEnd: "$100",
                  padding: "$100",
                  boxShadow: "$200",
                }}
              >
                <Box
                  css={{
                    backgroundImage:
                      "url('/img/components/carousel/video-story-card.png')",
                    display: "flex",
                    alignItems: "flex-end",
                    height: "151px",
                    marginBlockEnd: "$050",
                    padding: "$100",
                  }}
                >
                  <Button variant="primary">
                    <Icon size="100">
                      <Play />
                    </Icon>
                    Play video <Box
                      as="span"
                      css={{ fontSize: "$087", fontWeight: "normal" }}
                    >
                      1:23
                    </Box>
                  </Button>
                </Box>
                <Box
                  as="p"
                  css={{
                    fontWeight: "bold",
                    fontSize: "$075",
                    marginBlockStart: 0,
                    marginBlockEnd: "$025",
                  }}
                >
                  Kicker
                </Box>
                <Box
                  as="h2"
                  css={{
                    fontSize: "$150",
                    fontFamily: "$headline",
                    marginBlockStart: 0,
                    marginBlockEnd: "$050",
                  }}
                >
                  Key takeaways from Biden's 2024 budget plan
                </Box>
                <Box
                  as="a"
                  href="#"
                  css={{
                    color: "$accessible",
                    fontSize: "$087",
                    textDecoration: "none",
                  }}
                >
                  By The Washington Post
                </Box>
              </Card>
            </Carousel.Item>
          ))}
        </Carousel.Content>
        <Carousel.Footer>
          <Carousel.Dots />
        </Carousel.Footer>
      </Carousel.Root>
    </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