Content Flow

Content Hierarchy refers to the hierarchical breakdown and styling of content. This is used within an entire page or section.

Content Segments

Content areas are areas within a page or container where specific components can be placed to maintain content hierarchy. For example, the title component can be placed in the header and body areas but the typography styling will reflect the ideal hierarchy (specified in next section). These segments can be applied to an entire page or smaller container like a panel or modal.

Example of the segments on a page. See Page Template for more information

Example of the segments on a panel. See Panel for more information.

Hero

The hero segment is used to showcase related visualization, media, image, status  or display text. This segment is used in the tile component when an item needs to highlight a visual content like an image, video, pill, display text or data visualization.

Header

The header segment can include breadcrumbs, title component, tabs. Its used to provide high level context to the following content.

Body

The body is unique in that it can have header, body, footer and aside segments within a container. Since the body will house the bulk of the page’s content, the following components can be used: content standard read elements, form elements, tables,  lists, tiles, actions titles, pagination, thumbnails etc.

Footer

The footer segment will contain actions and text summarizing the body or relating  to the footer actions.

Aside

Similar to the body segment, the aside can have all the above mentioned segments within a panel component. The aside refers to a space on the page that is reserved for the panel for supplementary content.

Typography Structure

The typography style used throughout a page layout will be influenced by the general structure and hierarchy of the page.
‍
For info on formatted text, please see the Typography page.

Hierarchy

Content is broken down in to three levels that are signified by the styling of the heading. H1 can be used only once on a page and is considered the top most level of that gives context to the rest of content on the page. Any content below an H1 that needs a heading will use an H2, then below that, an H3. H2s can be used whenever there is a significant section break.

Supplementary Content

Example of how a side panel and overlay utilized the content flow structure.

Sections

Sections can be used to group content within the body segment. The following rules can also be utilized within a panel or modal. More info regarding sections can be found on the Detail Page layout.

If there is a data table or data list within the card it will align with the section heading. The table controls will be placed within the section content, not the section title.

Collapsible Sections

Sections and subsections can be collapsable. The background card will resize depending on the visible content. If the title pattern is used and the section title has  a button, the button can hid or remain shown when collapsed.