Page | Anvil Design System

<Page
    header={
        <Stack alignItems="center" spacing="0">
            <Stack.Item fill>
                <Headline size="large">Page Title</Headline>
                <BodyText subdued>A short page description.</BodyText>
            </Stack.Item>
            <Button primary>Action</Button>
        </Stack>
    }
>
    Content of the page.
</Page>

<Page
    header={
        <Stack alignItems="center" spacing="0">
            <Stack.Item fill>
                <Headline size="large">Page Title</Headline>
                <BodyText subdued>A short page description.</BodyText>
            </Stack.Item>
            <Button primary>Action</Button>
        </Stack>
    }
>
    Content of the page.
</Page>

Page Width Properties

By default, pages have a max width of 1280px. This can be shrunk to 768px, or removed altogether.

<div>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">Thin Max Width, Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
        maxWidth="narrow"
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">Default Max Width, Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">No Max Width, Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
        maxWidth="wide"
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
</div>

<div>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">Thin Max Width, Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
        maxWidth="narrow"
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">Default Max Width, Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">No Max Width, Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
        maxWidth="wide"
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
</div>

Forcing a Minimum Width

By default, pages do not have a min width. A min width can be enabled on the Page's content to prevent the underlying components from being responsive, creating a horizontal scroll effect. The minimum width value is set to 1280px for default and wide Pages, and 768px for narrow Pages. This can be useful when page content is not useful to scale down, such as tables.

<div>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">Thin Max Width, Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
        maxWidth="narrow"
        minWidth
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">Default Max Width, Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
        minWidth
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">No Max Width, Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
        maxWidth="wide"
        minWidth
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
</div>

<div>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">Thin Max Width, Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
        maxWidth="narrow"
        minWidth
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">Default Max Width, Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
        minWidth
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">No Max Width, Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
        maxWidth="wide"
        minWidth
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
</div>

Page Margins

The spacing between the Page content and the rest of the UI can be removed. This is useful when designing for page background stylings (colors, separators).

<div>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">Relaxed Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>

    <br/>

    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">No Spacing Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
        spacing="none"
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
</div>

<div>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">Relaxed Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>
                <Button primary>Action</Button>
            </Stack>
        }
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
    <br/>
    <Page
        header={
            <Stack alignItems="center" spacing="0">
                <Stack.Item fill>
                    <Headline size="large">No Spacing Page Title</Headline>
                    <BodyText subdued>A short page description.</BodyText>
                </Stack.Item>