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.
| Info |
|---|
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.
| Note |
|---|
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 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
| Note |
|---|
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 |
|---|---|---|
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 |
| Info |
|---|
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
| Note |
|---|
Only displayed when Row type is set to ‘Content’ |
...
The Widget group contains all the fields necessary to assign a widget to a row.
| Info |
|---|
You can add as many widgets as you need. → Detail: Proliferating Data Definition items |
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.
| Info |
|---|
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.
→ Details: Widgets