Test Page: Row Builder

This is the "Row Builder" field on the Test Page. 

Jump to the form styling and markup examples.

It 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.

We can also use Formie forms, like this one:

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 have a look at the various button styles we can drop into a Rich Text Field like this one:

So there we go.

Private Bookings

Here is a tiny bit of blurb about private bookings, just to encourage the user to learn more.

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...

While we (strongly) discourage tables on modern websites - because they are almost always terrible on mobile phones - we do allow you to add tables here.

	Column Header 1	Column Header 2	Column Header 3
Row Header 1	Lorem ipsum dolor sit amet is just some pretend latin	The point of it is just to provide text for layout, and not to be read	Just so you know.
Row Header 2	Here's another row	and a cell	123
Row Header 3	More text here	and more	and more

This is a Text By Media block

This is the rich text field.

And a little more text here.

And lets make it long, so that we can see what happens with overflow etc. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Also a Text By Media block

But with some different content in it.

Guess what?

This is also a Text by Media block, with a different media type - this time a slider.