Section

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 (optionally with .fd-panel-grid) is the most common use.
• .fd-container and 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 SAP Fundamentals will remain consistent for any heading level used. <h1> should be reserved for the page title.

Section structure

Shows an example of a background color applied with a helper class.

<section class="fd-section">
    .fd-section
</section>
<section class="fd-section fd-has-background-color-accent-4 fd-has-color-action-2">
    .fd-section
</section>
<section class="fd-section">
    .fd-section
</section>

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 class="fd-section">
    <div class="fd-panel-grid">
        <div class="fd-panel fd-has-grid-column-span-2">
            .fd-panel
        </div>
        <div class="fd-panel">
            .fd-panel
        </div>
        <div class="fd-panel">
            .fd-panel
        </div>
        <div class="fd-panel">
            .fd-panel
        </div>
        <div class="fd-panel">
            .fd-panel
        </div>
    </div>
</section>

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 class="fd-section">
    <div class="fd-container">
        <div class="fd-panel">
            .fd-panel
        </div>
    </div>
</section>
<section class="fd-section">
    <div class="fd-container">
        <div class="fd-col--6">
            <div class="fd-panel">
                .fd-panel
            </div>
        </div>
        <div class="fd-col--6">
            <div class="fd-panel">
                .fd-panel
            </div>
        </div>
    </div>
</section>

Section with header

Header and title elements are available when necessary to label content groups.

<section class="fd-section">
    <div class="fd-section__header">
      <h3 class="fd-section__title">Section title</h3>
    </div>
    <div class="fd-panel">
        .fd-panel
    </div>
</section>