scaled: true
---
<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.

scaled: true
---
<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.

scaled: true
---
<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).

scaled: true
---
<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>

Left Aligned

The content area of a page can also be left aligned.

scaled: true
---
<div>
    <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>
        }
        align="left"
    >
        <Card><Card.Section red>Content that is apart of the page.</Card.Section></Card>
    </Page>
</div>

Background Color

The background color for the page can be set either to neutral-10 (#FCFCFC, the default) or White/neutral-0 (#FFFFFF).

scaled: true
---
<Page
    header={
        <Stack alignItems="center" spacing="0">
            <Stack.Item fill>
                <Headline size="large">Page Title on a White Background</Headline>
                <BodyText subdued>A short page description.</BodyText>
            </Stack.Item>
            <Button primary>Action</Button>
        </Stack>
    }
    backgroundColor="neutral-0"
>
    Content of the page.
</Page>

Page Header

The page header is where the top content of a page is contained. It currently accepts most forms of content. For more indepth use cases, see the Page Header pattern.

Sidebar

The page can include a Sidebar on the left side with consistent sizing. See the Sidebar docs for more information on using Sidebars.

scaled: true
---
const SidebarExample = () => {
    const [isActive, setActive] = React.useState(0)
    return (
        <Frame
            style={{minHeight:500}}
            header={<div style={{ backgroundColor: 'black', height: 56 }} />}
        >
            <Page
                sidebar={
                    <Sidebar>
                        <Sidebar.Section>
                            <SideNav title="Marketing">
                                <SideNav.Item onClick={() => setActive(0)} active={isActive===0}>Dashboard</SideNav.Item>
                                <SideNav.Item onClick={() => setActive(1)} active={isActive===1}>Campaigns</SideNav.Item>
                                <SideNav.Item onClick={() => setActive(2)} active={isActive===2}>Emails</SideNav.Item>
                                <SideNav.Item onClick={() => setActive(3)} active={isActive===3}>Audiences</SideNav.Item>
                            </SideNav>
                        </Sidebar.Section>
                        <Sidebar.Section>
                            <Card>Test</Card>
                        </Sidebar.Section>
                    </Sidebar>
                }
            >
                <Layout type="2Col">
                    <Layout.Section>
                        <Card>Card 1</Card>
                    </Layout.Section>
                    <Layout.Section>
                        <Card>Card 2</Card>
                    </Layout.Section>
                </Layout>
            </Page>
        </Frame>
    )
}
render (SidebarExample)

Best Practices

  • Pages should contain at least the title of the page.

Importing

import { Page } from '@servicetitan/design-system';