Set page height using viewport height unit (vh). By default, page height should equal 100vh (full screen size). If the page has a Business Manager top bar navigation, set the page height to calc(100vh-48px).
Add constraints to content width with the following props:
minWidth specifies the minimum content width.
maxWidth specifies the maximum content width. When the limit is reached, the side margins stretch and the content aligns to the center of the page.
By default, the page minimum width is 864px and the maximum width is 1248px (plus 48px padding on the sides). These values should be used across all Business Manager pages but can be changed for other use cases.
- example:
```jsx
;
```
### Side padding
- description:
Control left and right content padding with the sidePadding prop. The default value is 48px and should be used across all Business Manager pages. The default padding can be changed for other use cases.
Add a background image to the page header with backgroundImageUrl prop. Use it to showcase things like services, products or other items you want to feature.
Enable horizontal scroll with the horizontalScroll prop.
When visitors scroll, the stays fixed. Use it when the width of content exceeds the maximum page width. For example, when displaying wide tables or lists.
Pin content below the header by wrapping it into a container. Use it for content that needs to be visible at all times, for example a table header in an infinite scroll table.
- example:
```jsx
Tail that sticks to page header on scroll;
```
### Sticky areas
- description:
Wrap page sections into containers to keep a section fixed in position while visitors scroll.
Create anchor links that direct visitors to a place inside the page using references (ref) and onClick events.
- example:
```jsx
() => {
const ref = React.createRef(null);
const [downDisabled, setDownDisabled] = React.useState(false);
const [upDisabled, setUpDisabled] = React.useState(true);
const onClick = top => ref.current.scrollTo({ top, behavior: 'smooth' });
const onScroll = props => {
if (props.area.y === 'top') {
return setDownDisabled(false) & setUpDisabled(true);
}
if (props.area.y === 'bottom') {
return setDownDisabled(true) & setUpDisabled(false);
}
};
return (
onClick(10000)} disabled={downDisabled}>
Click to Scroll Down
}
/>
);
};
```
## Common Use Case Examples
### Empty state
- description:
When there's no data to display on a page, use an with a clear call to action that tells visitors what they should do next.
- example:
```jsx
}>Add Category}
/>
}
title="Add your first category"
subtitle="Organize your events with categories. You can connect any event with up to 10 categories."
theme="page"
>
}>Add Category
;
```
### Tabs
- description:
can be used to show more content with the same hierarchy level on the same page. Use to fix tabs below the page header so visitors can navigate between content.
For form page layouts, use an 8 column layout and keep 4 columns blank. This makes it easier to scan.
- example:
```jsx
() => {
const renderCard = ({ title, subtitle }) => (
);
return (
}
breadcrumbs={
{}}
/>
}
showBackButton
onBackClicked={() => {}}
title="eCommerce Settings"
/>
{renderCard({
title: 'Orders',
})}
{renderCard({
title: 'Checkout',
subtitle: 'Add the checkout fields you need customers to fill out.',
})}
{renderCard({
title: 'Returns',
subtitle:
'Include more info about your return policy.',
})}
);
};
```
### Form layout: two-thirds with a sidebar column
- description:
Use a grid to construct a ⅔ form layout that exposes primary and secondary content at the same time. To fix the sidebar's position while scrolling through the main page content, use .
- example:
```jsx
() => {
const renderCard = ({ title, subtitle, height = '300px' }) => (
);
return (
}
breadcrumbs={
{}}
/>
}
showBackButton
onBackClicked={() => {}}
title="Basic Plan"
/>
{renderCard({
title: 'Plan info',
subtitle:
'Give your plan a name and sum it up with a tagline.',
})}
{renderCard({
title: 'Connect and manage benefits',
subtitle: 'Set up how benefits work in this plan.',
})}
{renderCard({
title: 'Pricing',
subtitle: 'How much do you want to charge?',
})}
{renderCard({
title: 'Page permissions',
subtitle: 'Manage pages members can access.',
})}
{renderCard({
title: 'Advanced settings',
})}
{renderCard({
title: 'Plan preview',
subtitle: 'Preview how your plan appears online.',
height: '360px',
})}
);
};
```
### Table
- description:
Use to fix the position of the content to a specific part of the page. For example, fixing the column titles of a table so visitors can sort and filter easily.
Use a combination of different grids within the same page. This is a great way to display different types of content on one page. Use to divide content into groups.