Test Page: Row Builder test

Content Span: Full Screen

Content Span: Widest

Content Span: Normal

Content Span: Narrow

Content Span: Very Narrow

This is the "Row Builder" field on the Test Page, and this is a Rich Text field within that, set at "very narrow".

This Row Builder offers more control of the presentation than the old "Matrix Builder" field, because the client is able to set the presentation of each "row block" for themselves - for example, they may want a Row: Rich Text field (like this one) that spans the full width of the design, or that is constrained to the narrow part of the design (like the next one).

They're also able to set the background colour of the row, and any required padding on the row. This is more flexible and less fragile than the old Matrix Builder.

For the purposes of testing, this is a link, and it's been set to have an accent colour in the Presentation option.

Let's also throw in a Formie Form:

See, that's just done by inserting a Formie Entry in the Rich Text Field.

Let's also have a look at the various button styles we can drop into a Rich Text Field like this one:

Nice, isn't it.

This is another Rich Text field immediately after the previous one, but this time we've set the Content to span a narrow area (when there's enough space on the screen), and we've set a background colour too so we can see the block padding, and how things sit on the page.

Here's a link too, just so we can see how that looks against the chosen background. If we don't set an Accent Colour then it'll just inherit the text colour. But here we've set an Accent Colour specifically for the field, and the CSS we've written means that "a link" is considered a thing to apply the blocks' accent colour on.

Note that a pullquote is floated left or right so it's besides the main text. If you want something like it on it's own row, you want a Block Quote.

This is a Rich Text field

You can use it as you might expect from a normal word processor or other writing application. It supports numerous heading levels, bold, italics, links, and ordered and un-ordered lists.

This is a h3

So just for fun, here is a link to Google, and then there follows some lists.

• Bullet one
• Bullet two
• Bullet three

Here's another list:

1. First
2. Second
3. Third

And here's a callout, which is actually an Entry...

Testing grouping of the same Entry include...