Page

Semantic responsive container for page-level layouts.

import { Flex } from 'ui-lab-components/flex';
 
<Page maxWidth="100%" padding="md" gap="md" collapseAt={320}>
  <Page.Header>
    <Flex gap={4} h={7} align-center justify-between>
      <Skeleton w={112} h={12} />
      <Flex gap={2} w="auto">
        <Skeleton w={40} h={20} />
        <Skeleton w={52} h={20} />
      </Flex>
    </Flex>
  </Page.Header>
 
  <Page.Content className="block">
    <section className="grid gap-2.5">
      <Skeleton h={112} className="w-full" />
      <div className="grid grid-cols-3 gap-2.5">
        <Skeleton h={120} className="w-full" />
        <Skeleton h={120} className="w-full" />
        <Skeleton h={120} className="w-full" />
      </div>
    </section>
  </Page.Content>
 
  <Page.Footer>
    <Flex gap={3} h={3} align-center justify-between>
      <Skeleton w={64} h={8} />
      <Skeleton w={40} h={8} />
    </Flex>
  </Page.Footer>
</Page>
UI Lab