# Scaffolding

Scaffolding are full-page layouts to ensure consistency across the app and full
responsive behavior for free.

Legacy Page

```tsx
<Page
    title="Page"
    subtitle="Subtitle goes here"
    primaryAction={{ label: "Action 1" }}
    secondaryAction={{ label: "Action 2" }}
    moreActionsMenu={[
      {
        actions: [
          {
            label: "Action 1",
            onClick: () => {
              console.log("Action 1");
            },
          },
          {
            label: "Action 2",
            onClick: () => {
              console.log("Action 2");
            },
          },
        ],
      },
    ]}
  >
    <Text>Children Go Here</Text>
  </Page>
```

Composed Page With New Layout Components

```tsx
<ContentBlock align="left" maxWidth="1285px">
    <Box padding="base">
      <Stack gap="larger">
        <SideKick contentMinWidth="40%" sideWidth="20ch" collapseBelow="1285px">
          <Stack>
            <Heading level={1}>Page</Heading>
            <Text size="large" variation="subdued">
              <Emphasis variation="bold">Subtitle goes here</Emphasis>
            </Text>
          </Stack>
          <Cluster justify="end" gap="small" collapseBelow="1285px">
            <Button label="Action 1" />
            <Button label="Action 2" type="secondary" />
            <Menu
              items={[
                {
                  actions: [{ label: "Action 1" }, { label: "Action 2" }],
                  label: "Action 3",
                },
              ]}
            />
          </Cluster>
        </SideKick>
        <Text>Children Go Here</Text>
      </Stack>
    </Box>
  </ContentBlock>
```

Composed Page With New Layout Components + Container Query

```tsx
<Container name="container-items">
    <Box padding="base">
      <ContentBlock align="left" maxWidth="1285px">
        <Stack gap="larger">
          <SideKick
            collapseBelow="1285px"
            contentMinWidth="30%"
            sideWidth="20ch"
          >
            <Stack>
              <Heading level={1}>Page</Heading>
              <Text size="large" variation="subdued">
                <Emphasis variation="bold">Subtitle goes here</Emphasis>
              </Text>
            </Stack>
            <Box>
              <Container.Apply className={styles.actions}>
                <Cluster justify="end" gap="small">
                  <Button label="Action 1" />
                  <Button label="Action 2" type="secondary" />
                  <Menu
                    items={[
                      {
                        actions: [{ label: "Action 1" }, { label: "Action 2" }],
                        label: "Action 3",
                      },
                    ]}
                  />
                </Cluster>
              </Container.Apply>
            </Box>
          </SideKick>
          <Text>Children Go Here</Text>
        </Stack>
      </ContentBlock>
    </Box>
  </Container>
```