Layout

import React from "react";
import { Layout } from "@nimbus-ds/patterns";
import { Box, Text } from "@nimbus-ds/components";

const Example: React.FC = () => {
  const exampleBox = (
    <Box
      display="flex"
      alignItems="center"
      justifyContent="center"
      backgroundColor="primary-surface"
      borderColor="primary-interactive"
      borderStyle="dashed"
      borderWidth="1"
      borderRadius="2"
      width="100%"
      padding="4"
      boxSizing="border-box"
    >
      <Text fontSize="caption" textAlign="center" color="primary-interactive">
        Content
      </Text>
    </Box>
  );

  return (
    <Layout columns="1">
      <Layout.Section>{exampleBox}</Layout.Section>
      <Layout.Section>{exampleBox}</Layout.Section>
      <Layout.Section>{exampleBox}</Layout.Section>
    </Layout>
  );
};

export default Example;