Page

Stacks a page’s content with consistent spacing (semantic.dimension.space.gap.large, 24px). It renders a div, not a landmark.

import {Card, Heading, Page, Text} from '@earendil-works/elanor-react';

export default function PageDemo() {
  return (
    <Page>
      <Heading level={2} size={1}>
        Workspace overview
      </Heading>
      <Text>Review your team's projects and recent activity.</Text>
      <Card label="Active projects" value="12" description="Across three teams" />
    </Page>
  );
}

import {Container, Layout, Page} from '@earendil-works/elanor-react';

<Layout.Main>
  <Container>
    <Page>{/* Page header, sections, and content */}</Page>
  </Container>
</Layout.Main>;

Layout.Main provides the main landmark and Container the width; Page only spaces its children. Give the page title level={1}; the demo uses level={2} because this page already has an H1.

Renders <div>. Accepts its HTML attributes and ref.