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.

Loading...

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.

Loading...

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:

EuiPageSidebar	EuiPageHeader	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"

note

Reminder: EuiPageTemplate can handle all these configurations for you.

Loading...

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 ↵

𐘂𐘂