Get Started

Layout

Use named regions for structured content. Fill layouts need a bounded container; auto layouts grow with content. Side panels keep their supplied widths and do not automatically stack.

This is a LongLink-specific component.

longlink docs --component "Layout"

Email draft

Write your message here.
Draft saved
function Example() {
  return (
    <Layout
      height="auto"
      defaultHasDividers
      header={<LayoutHeader><Heading level={3}>Email draft</Heading></LayoutHeader>}
      end={
        <LayoutPanel width={280} hasDivider role="complementary" label="About">
          <Stack gap={2}>
            <Heading level={4}>About</Heading>
            <Text>Research and contact information</Text>
          </Stack>
        </LayoutPanel>
      }
      footer={<LayoutFooter><Text color="secondary">Draft saved</Text></LayoutFooter>}
    >
      <LayoutContent>
        <Text>Write your message here.</Text>
      </LayoutContent>
    </Layout>
  );
}