Aldrich: Layout builder pattern

This pattern is used for carving up screen real estate and creating spaces to place widgets.

layout builder data definition in its default state

How it works

Row

Rows span the entire width of the real estate they occupy.

You can add as many rows as you need.

→ Detail: Proliferating Data Definition items

Row ID and classes

These fields are useful for identifying areas of your page when applying custom CSS or JavaScript. The Row ID field accepts only a single value, whereas the Row classes will accept multiple values separated by a space.

The Row ID field can also be used to create anchors used for linking within a page.

Row ID values must be unique within a page. There isn’t any enforcement of this in Cascade and the effects of reusing an ID value in multiple places on a page may not be immediately obvious when viewing the page, but weird things can happen if you do.

Row type

Selection	What this means	What this triggers

Selection	What this means	What this triggers
Heading	The row is utilized to display a structural content heading.	Causes the Heading Data Definition group to display.
Content	The row is utilized to display content. Selecting content here will allow you to add widgets to the row.	Causes the Widget Data Definition group to display.

Heading

Only displayed when Row type is set to ‘Heading’

The Heading group contains all the fields necessary to display a content heading on your page.

Heading type

Selection	What this means	What this triggers

Selection	What this means	What this triggers
Default	The heading will be displayed normally on the page.	N/A
Hidden	The heading will be included on the page structurally, but not displayed visually.	N/A

Heading level

Selection	What this means	What this triggers

Selection	What this means	What this triggers
Section heading	The heading identifies a high-level section of the page (<h2>).	N/A
Subheading	The heading identifies a lower-level subsection of the page (<h3>).	N/A

Text

This is how the heading will read.

Widget

The Widget group contains all the fields necessary to assign a widget to a row.

Widget ID and classes

Same idea here as with rows.

Width

This field sets the width of the widget on a scale from 1 (smallest) to 24 (widest). Selecting ‘Not set’ will cause the widget to fill remaining width in the row.

Widget block

Use the asset chooser to select the widget you want to use.

→ Details: Widgets