Available since 1.0.0
The section is a page-level structure container used to divide a page into stacked sections with appropriate padding applied. These should be used to separate large groups of content on a page.
You will generally use a section inside a page container which will give you the appropriate side margins. Since a section is full-width by default it can be used as a well with background colors or images.
Can hold two child types:
.fd-panel-grid) is the most common use.
fd-col--[num]can be used to organize panels or content when a grid layout is not desired.
Although the following examples use the
<h3>tag for the title element, the styling provided by Fiori Fundamentals will remain consistent for any heading level used.
<h1>should be reserved for the page title.
Shows an example of a background color applied with a helper class.
Section with panel grid
Shows an example with the grid span helper class. This is most appropriate when displaying a collection of content in a linear order.
Section with panels
Shows an alternate layout option using columns. This may be more appropriate depending on the need to maintain source order and structure.
Section with header
Header and title elements are available when necessary to label content groups.