Best Practices

Page should:

• Be used as the top level container for most pages.
• Use Page Sections to create sidebar layouts within a page.

Page Section should not:

• Be used anywhere except as an immediate descendant of EzPage.
• Be used to put more than one sidebar section on the same page. This is unsupported and will render incorrectly if you put two sidebars one after the other.

Examples

Basic Page Content

Pages provide consistent spacing of their children.

Using Headings

Pages provide appropriate margin on Headings to indicate that a heading is related to the subsequent page content.

Background color

Pages have gray backgrounds by default. Alternatively, you can give them a white background by passing in the optional backgroundColor prop with the value white. At this time, only gray and white are permitted as values for the backgroundColor prop.

Page Sections

Page sections can be used on larger screens to create layouts that have a left or right sidebar. On small screens, page sections will stack content vertically.

• Use EzPageSection[use="aside"] to create a sidebar
• Use EzPageSection[use="main"] to create the associated main content section

Right sidebar

Section content is displayed in the order in which it is provided. To change the order of the layout, flip the order of the aside and main sections. The below example demonstrates a "right sidebar" layout.

Horizontal sections

Page section content may be laid out horizontally on larger screens, instead of vertically, to more clearly communicate how content may be related to other content within the section. For example, feature sections may be laid out horizontally so that features can be compared to one another. On small screens, page sections will stack content vertically.

• Use EzPageSection[use="horizontal"] to create a page section that is laid out horizontally.

Centered Header and Page Content

The page may be paired with a page header to provide a consistent page width within an application layout.

Related components

• Card