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 within the layout. As well, special full-width sections of the block layout enable horizontal scrolling through a set of areas.

Usage

Example use cases include 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 content relationship is established. In 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.

There are four types of block layout: layout only (default), light, and accent background colors, as well as a variant for dashboard pages.

Use the block layout if:

• You want to display section-based content. Place elements next to each other to indicate a content relationship.
• You want to display KPIs in the dashboard-variant. Do not use other variants for KPIs.

Do not use the block layout if:

• You want to display properties or features of one content item. Use the object page floorplan instead. Links within a block must lead to areas outside of the block. As well, enable controls to update only their own containers and not other containers.

Layout

The block layout is divided into horizontal sections, which take on the full width of the available screen real estate. Their screen height is determined by their inner content, which prevents vertical scrolling. If needed, the width of sections can also be set to the following predefined ratios (for the sizes XL, L and M):

• 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 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 apply both to the page and block layout. However, the page layout’s breakpoints react to screen width, whereas the breakpoints of the block layout react to the width of the control itself.

Ratios of areas in different contexts

^*Blocks wrap and are displayed underneath each other

The width of the horizontal scrolling area in different device contexts

Types

There are four types of block layouts:

1. Default: This layout does not use any background colors.
2. Light: Areas use predefined colors found in the SAP Fiori 2.0 visual design language. These colors follow a specific order specified in the control. If there are more than four areas, the background colors start over from the initial color.
3. Accent: Each row contains a range of colors derived from one accent color, and these colors are used alternately. If required by the control, you can display multiple gray blocks: the different shades of gray will then be displayed alternately, beginning with the initial color.
4. Dashboard: This layout type uses spacing around the blocks. It is mainly used for applications that display charts in the blocks.

Colors

Cell Colors

Colors can be set for each individual cell. There are 10 pre-defined color sets, each with 4 different shades. To change the background of a particular cell, set the block layout’s background color set (main color) (property: backgroundColorSet) and background color shade (shade) (property: backgroundColorSet) accordingly.

The available colors are shown below.

Available Colors

Row Color Sets

For rows in the “Light” and the “Accent” variant of the block layout, you may choose between different row color sets (property:rowColorSet). These sets enable different starting colors for the row coloring, preventing color coalescence in the responsive behavior of the block layout.

Images

Images may be placed as background images within one block. The predefined paddings do not apply to blocks with images; images are displayed in the entire block.
If needed, the title control may be placed above the images.

Resources

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