Responsive Column Layout

RESPONSIVE WEB GUIDANCE

Responsive Column Layout

Responsive Column Layout

Overview

The Responsive Column Layout component allows several different AEM components on the 12-column grid, which scales responsively. It enables design teams to place components side-by-side without writing custom code.

Features

Usage Guidelines

Recommended Use

More on Layout & Grid

Documentation

This is a Global AEM Component.

Live HTML demo available.
View Demo

Features

  • Enables design teams to place components side-by-side.
  • Allows positioning of a 12-column grid in 1, 2, or 3 equal sections.
  • Offsets content by up to 8 columns.
  • On resizing, automatically updates to responsive mobile.

Usage Guidelines

Layout

Use the Responsive Column Layout to create pages using different components such as Media Embed and Rich Text Editor.

responsive-column-layout-image-01
responsive-column-layout-image-02

Column Width

You can resize the width of your component column from a minimum of 3 columns to a maximum of 12 columns.

responsive-column-layout-image-03

Offset Components

Offset the components and create space by adding empty columns to either side.

responsive-column-layout-image-04

Combinations

When placing these components in combination—and to avoid creating unusual layouts—do not offset columns or stagger components in excess.

responsive-column-layout-image-05

Key Insights Component

This component has a minimum width of 5 columns, highlights statistics, and provides pertinent information to customers.

responsive-column-layout-image-06

The following components are available in Adobe Experience Manager (AEM) code. We recommend their use with the Responsive Column Layout component. Please note this list is not exhaustive, and other components are applicable to the grid.

More on Layout & Grid

Documentation