Layout

Import

import { Layout } from '@contentful/f36-components';
// or
import { Layout } from '@contentful/f36-layout';

Examples

Basic layout with header, sidebar and body

Hide code
function BasicLayoutExample() {
  const [submitting, setSubmitting] = useState(false);
  const submitForm = () => {
    setSubmitting(true);
    setTimeout(() => setSubmitting(false), 1000);
  };

  return (
    <Layout
      header={
        <Layout.Header>
          <Header title="Content Types" />
        </Layout.Header>
      }
      leftSidebar={
        <Box padding="spacingS">
          <NavList>
            <NavList.Item>Your Details</NavList.Item>
          </NavList>
        </Box>
      }
    >
      <Layout.Body>
        <Box padding="spacingS">
          <Form onSubmit={submitForm}>
            <FormControl>
              <FormControl.Label isRequired>Name</FormControl.Label>
              <TextInput />
              <FormControl.HelpText>
                Please enter your first name
              </FormControl.HelpText>
            </FormControl>

            <FormControl>
              <FormControl.Label>Description</FormControl.Label>
              <Textarea />
              <FormControl.HelpText>
                Tell me about yourself
              </FormControl.HelpText>
            </FormControl>

            <Button variant="primary" type="submit" isDisabled={submitting}>
              {submitting ? 'Submitted' : 'Click me to submit'}
            </Button>
          </Form>
        </Box>
      </Layout.Body>
    </Layout>
  );
}
function BasicLayoutExample() {
  const [submitting, setSubmitting] = useState(false);
  const submitForm = () => {
    setSubmitting(true);
    setTimeout(() => setSubmitting(false), 1000);
  };

  return (
    <Layout
      header={
        <Layout.Header>
          <Header title="Content Types" />
        </Layout.Header>
      }
      leftSidebar={
        <Box padding="spacingS">
          <NavList>
            <NavList.Item>Your Details</NavList.Item>
          </NavList>
        </Box>
      }
    >
      <Layout.Body>
        <Box padding="spacingS">
          <Form onSubmit={submitForm}>
            <FormControl>
              <FormControl.Label isRequired>Name</FormControl.Label>
              <TextInput />
              <FormControl.HelpText>
                Please enter your first name
              </FormControl.HelpText>
            </FormControl>

            <FormControl>
              <FormControl.Label>Description</FormControl.Label>
              <Textarea />
              <FormControl.HelpText>
                Tell me about yourself
              </FormControl.HelpText>
            </FormControl>

            <Button variant="primary" type="submit" isDisabled={submitting}>
              {submitting ? 'Submitted' : 'Click me to submit'}
            </Button>
          </Form>
        </Box>
      </Layout.Body>
    </Layout>
  );
}
Open in Playground