frame: true
noPadding: true
---
<Frame
    style={{minHeight:400}}
    header={<div style={{ backgroundColor: 'black', height: 56 }} />}
>
    Page Content
</Frame>

Example with Page & Sidebar

scaled: true
---
const ExampleWithPageAndSideBar = () => {
    const [isActive, setActive] = React.useState(0)
    return (
        <Frame
            style={{minHeight:500}}
            header={<div style={{ backgroundColor: 'black', height: 56 }} />}
        >
            <Page
                sidebar={
                    <Sidebar>
                        <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>
                            <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 (<ExampleWithPageAndSideBar />)

Best practices

For the best experience when creating an application frame, use the following components: