This pattern is used for carving up screen real estate and creating spaces to place widgets.
How it works
Row
Rows span the entire width of the real estate they occupy.
You can create as many rows as you need you achieve your content and design objectives.
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 |
|---|---|---|
Heading | The row is utilized to display a structural content heading. | Causes the Heading content 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 content group to display. |
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 |
|---|---|---|
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 |
Providing headings in your content is super helpful for accessibility, even if they are hidden visually, because they give a document structure and enable easier navigation within the content.
Heading level
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.
You can add as many widgets as you need.
Widget ID and classes
Same idea here as with rows.
Width
This field set 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.
If the sum of width values for all widgets in a row exceeds 24, the widgets will wrap onto a new line, effectively creating multiple visual rows within a single structural row.
Widget block
Use the asset chooser to select the widget you want to use.