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.
Components
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.
Usage
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 |
|---|---|---|---|---|
EuiPageSidebar | EuiPageHeader | EuiPageBody color="plain" | EuiPageSection color="plain" bottomBorder | EuiEmptyPrompt settings color="subdued" |
EuiPageSidebar | EuiPageHeader | EuiPageBody color="transparent" | EuiPageSection color="plain" bottomBorder="extended" | EuiEmptyPrompt settings color="subdued" |
EuiPageSidebar | EuiPageHeader | EuiPageBody color="transparent" | EuiPageSection color="plain" bottomBorder="extended" | EuiEmptyPrompt settings color="plain" |
Configuration example
Reminder: EuiPageTemplate can handle all these configurations for you.
Props
EuiPage
Prop | Description and type | Default value |
|---|---|---|
Prop paddingSize# | Description and type Adjust the padding. "none" | "xs" | "s" | "m" | "l" | "xl" | Default value none |
Prop grow# | Description and type Adds boolean | Default value true |
Prop direction# | Description and type Changes the "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, string | number | boolean | Default value false |
EuiPageBody
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, string | number | boolean | Default value false |
Prop component# | Description and type Sets the HTML element for ComponentTypes | Default value |
Prop panelled# | Description and type Uses an EuiPanel as the main component instead of a plain div boolean | Default value |
Prop panelProps# | Description and type Extends any extra EuiPanel props if Omit<(DisambiguateSet<_EuiPanelButtonlike, _EuiPanelDivlike> & _EuiPanelDivlike) | (DisambiguateSet<_EuiPanelDivlike, _EuiPanelButtonlike> & _EuiPanelButtonlike), "paddingSize"> | Default value |
Prop paddingSize# | Description and type Adjusts the padding "none" | "xs" | "s" | "m" | "l" | "xl" | Default value none |
EuiPageSidebar
Prop | Description and type | Default value |
|---|---|---|
Prop paddingSize# | Description and type Adjust the padding. "none" | "xs" | "s" | "m" | "l" | "xl" | Default value none |
Prop hasEmbellish# | Description and type Renders a fancy little visual in the top left corner of the side bar boolean | Default value false |
Prop sticky# | Description and type Adds boolean | { offset?: number; } | Default value false |
Prop minWidth# | Description and type A minimum width is necessary to maintain size. Width<string | number> | Default value 248 |
Prop responsive# | Description and type Sets the 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 |