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

Usage

Use the block layout if:

• You want to display section-based content. Place elements next to each other to indicate a content relationship.

Do not use the block layout if:

• You want to display properties or features of one content item. Use the object page floorplan instead.
• You want to display KPIs in the dashboard-variant. Use the overview page or a layout using cards instead.

Block layout case examples 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.

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:
  • 50% and 50% or
  • 75% and 25% or
  • 25% and 75%
• 3 blocks:
  • 3 × 33% or
  • 2 × 25% and 50% or
  • 50% and 2 × 25% or
  • 25% and 50% and 25%
• 4 blocks: 4 × 25%

Block layouts can also contain sections that allow horizontal scrolling. These sections always have a width of 100%.

Components

1 – Section

1a – Section Title

2 – Block

2a – Block Title – can be text or a link.

2b – Block Body – can contain text or other controls.

Types

There are four types of block layouts:

1. Default: This layout does not use any background colors.
2. Dashboard: This layout type uses white blocks with spacing around them, making each block look like a card.
3. Light: Areas use predefined colors found in the SAP Fiori 3 Quartz Light theme. These colors follow a specific order that is defined in the control. If there are more than six areas, the background colors start over beginning with the initial color.
4. 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.

Light Color Set

Accent Color Sets

Row (Section) Color Sets

For the Accent variant of the block layout, you can use a different color set for each row (sap.ui.layout.BlockLayoutRow, property:rowColorSet). This enables different starting colors for the row coloring, and prevents color coalescence in the responsive behavior of the block layout.

Cell (Block) Colors

There are 10 predefined color sets that you can use as accent variants, each with 6 different shades.

To change the background of a particular block, set the desired color set (sap.ui.layout.BlockLayoutCell, property: backgroundColorSet) and color shade (sap.ui.layout.BlockLayoutCell, property: backgroundColorShade) accordingly.

Images

Images may be placed as background images within one block. The predefined paddings do not apply to blocks with images; images fill out the entire block.
If needed, the title control may be placed on top of the images.

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

Sections with Horizontal Scrolling

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

Resources

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