Intro

The block layout is used to display content in a section-based manner. It features horizontal and vertical subdivisions and full-width banners seen frequently in contemporary Web design. Background colors are attached directly to these “areas” of the layout. Special full-width sections of the block layout allow horizontal scrolling through a set of areas.

Usage

Example use cases are – amongst others – landing pages and catalog-like pages. In landing pages, the block layout may serve as a banner-like presentation of illustrative icons with associated text. By placing pictorial and textual elements side by side in different areas, a relation of content is established. Catalog-like layouts, the block layout serves as a flexible container for diverging content, such as headings, explanatory texts, code snippets, remarks, and examples.

It is also possible to have clickable blocks with their own hover- and pressed- states.

The block layout comes in five types: layout only (default), light, mixed, and accent background colors, as well as a variant that serves well for dashboard-pages.

Use the block layout if:

• You want to display section-based content. By placing elements next to each other, a relation of content between these can be established.
• You want to display KPIs in the dashboard-variant. Do not use any of the other variants for KPIs.

Do not use the block layout if:

• You want to display properties or features of one content item. In that case, use the object page instead. Also do not navigate inside the block layout or allow controls to update areas except their own block container.

Layout

The block layout is subdivided vertically into sections. These sections take on the full width of the available screen real estate and a height derived from the content placed inside them (thus avoiding vertical scrolling). Sections can be further subdivided horizontally into areas with predefined ratios.

Possible widths of areas (in device context XL, L and M) are:

• 1 block: 100%
• 2 blocks: 75% and 25% / 25% and 75%
• 2 blocks: 50% and 50%
• 3 blocks: 2 × 25% and 50% / 50% and 2 × 25% / 25% and 50% and 25%
• 3 blocks: 3 × 33%
• 4 blocks: 4 × 25%

Horizontal scrolling sections always have a width of 100%.

Responsiveness

The block layout offers a responsive behavior. There are three breakpoints, which results in four supported sizes: XL, L, M, and S. As with the responsive grid (another generic layout control), these breakpoints can be the break points of the page or of the block layout. In contrast to the page’s breakpoints, which react to the screen width, the breakpoints of the block layout react to the width of the control itself.

Ratios of areas in different device contexts:

^*Blocks wrap and display underneath each other

The width of the horizontal scrolling area in different device contexts:

Types

There are five types of block layouts:

1. Default: This layout does not use any background colors.
2. Light: In this type, areas have a set of predefined colors stemming from the SAP Fiori 2.0 visual design language. These colors are used successively in the layout. In case there are more than four areas, the background colors start over from the first color.
3. Mixed: In this type, areas of 25% (on desktop) can have a dark background color. Per section one area can be dark. Two colors are derived from the dark base color of the SAP Fiori 2.0 visual design language and are used alternately.
4. Accent: In this type, each row can contain two colors which are derived from one accent color, which are used alternately. Every section can contain multiple gray blocks, which are used alternately, beginning with the bright one.
5. Dashboard: This layout type is for applications that make use charts in the blocks, for example. This layout type uses spacing around the blocks.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.