Page components

Page layouts are modular and fit together in a precise manner, though certain parts can also be added or removed as needed. EUI provides both the individual page components and an over-arching template for easily creating some pre-defined layouts.

The following examples showcase the individual components only.

If you're looking for full page layout examples, we recommend using the EuiPageTemplate and use this page to modify the props of each part of the template.

Page, body, and sidebar

EuiPage is simply a flex wrapper that will automatically grow to fill the height of a flex container. You can also control the flex direction and the maximum width usingrestrictWidth which centers the page when it reaches the provided value (or 1200px if set to true).

EuiPageSidebar doesn't contain many configurations itself, but it does dictate how the rest of the page contents should be displayed. Typically you'll want to wrap all your page contents in EuiPageBody and set panelled={true} when you have a side bar.

Page sections

EuiPageSection is a stackable component that is essentially an EuiPanel with props for quickly creating common usages. It is meant to be a direct descendent of EuiPageBody You'll need to set grow={false} to any content that you don't want to stretch within the page.

To create dividers between contents, use the bottomBorder prop. The 'extended' version ensures the border touches the sides of the parent. It also supports restrictWidth and alignment to align with common usages.

Page configurations

When piecing all of the different page components together, the state of your application will dictate how best to configure each component. Ideally, your main content should always live within a 'plain' colored body or section.

When using EuiEmptyPrompt to replace the main contents of your page you will want to use a panel color opposite that of the section color. For example:

EuiPageBody	EuiPageSection	EuiEmptyPrompt settings
`color="plain"`	`color="plain"` `bottomBorder={true}`	`color="subdued"`
`color="transparent"`	`color="plain"` `bottomBorder="extended"`	`color="subdued"`
`color="transparent"`	`color="plain"` `bottomBorder="extended"`	`color="plain"`

tip

Reminder: EuiPageTemplate can handle all these configurations for you.

Props

EuiPage

Extends HTMLAttributes


Prop	Description and type	Default value
Prop paddingSize#	Description and type Adjust the padding. When using this setting it's best to be consistent throughout all similar usages Type: `"xs" \| "s" \| "m" \| "l" \| "xl" \| "none"`	Default value `none`
Prop grow#	Description and type Adds `flex-grow: 1` to the whole page for stretching to fit vertically. Must be wrapped inside a flexbox, preferrably with `min-height: 100vh` Type: `boolean`	Default value `true`
Prop direction#	Description and type Changes the `flex-direction` property. Flip to `column` when not including a sidebar. Type: `"column" \| "row"`	Default value `row`
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop restrictWidth#	Description and type Sets the max-width of the page, set to `true` to use the default size of `1200px`, set to `false` to not restrict the width, set to a number for a custom width in px, set to a string for a custom width in custom measurement. Type: `string \| number \| boolean`	Default value `false`

EuiPageBody

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop restrictWidth#	Description and type Sets the max-width of the page, set to `true` to use the default size of `1200px`, set to `false` to not restrict the width, set to a number for a custom width in px, set to a string for a custom width in custom measurement. Type: `string \| number \| boolean`	Default value `false`
Prop component#	Description and type Sets the HTML element for `EuiPageBody`. Type: `ComponentTypes`	Default value
Prop panelled#	Description and type Uses an EuiPanel as the main component instead of a plain div Type: `boolean`	Default value
Prop panelProps#	Description and type Extends any extra EuiPanel props if `panelled=true` Type: `Omit<(DisambiguateSet<_EuiPanelButtonlike, _EuiPanelDivlike> & _EuiPanelDivlike) \| (DisambiguateSet<_EuiPanelDivlike, _EuiPanelButtonlike> & _EuiPanelButtonlike), "paddingSize">`	Default value
Prop paddingSize#	Description and type Adjusts the padding Type: `"xs" \| "s" \| "m" \| "l" \| "xl" \| "none"`	Default value `none`

EuiPageSidebar

Extends HTMLAttributes


Prop	Description and type	Default value
Prop paddingSize#	Description and type Adjust the padding. When using this setting it's best to be consistent throughout all similar usages. Type: `"xs" \| "s" \| "m" \| "l" \| "xl" \| "none"`	Default value `none`
Prop hasEmbellish#	Description and type Renders a fancy little visual in the top left corner of the side bar Type: `boolean`	Default value `false`
Prop sticky#	Description and type Adds `position: sticky` and affords for any fixed position headers. Type: `boolean \| { offset?: number; }`	Default value `false`
Prop minWidth#	Description and type A minimum width is necessary to maintain size. Be sure to take `paddingSize` into account. Type: `Width<string \| number>`	Default value `248`
Prop responsive#	Description and type Sets the `minWidth` to 100% when within these breakpoints. Type: `string[]`	Default value `['xs', 's']`
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value