Test Page: Row Builder

This is a page's subtitle

This is the page introduciton and should give a very brief summary or flavour of the content.

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

We can have FAQs

Question

This is an answer

Questions and Answers?!

Indeed

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

We can also optionally do multi column text such as this. This text will be displayed as a left column when there is enough room on the screen to do it.

When there's not enough room, they just display in one column.

You don't have to have text in the "Rich Text (with Entries) field above these if you don't want. Or you can have text in everything, like in this example.

NOTE: When the multi-columns are used, "left half", "right half" and "centre" placements in the Row Presentation is slightly wider than when there isn't multi-column text, so that the columns aren't too squashed to read nicely.

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.

This is a pullquote, that may or may not be handy.

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.

And yeah, that's one of the Forms set in the Formie area of the CMS, and any of those can be pulled into any "Rich Text (with Entries)" field.

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

Test Button
Link style button

Testing grouping of the same Entry include...

Information Callout

This is some simple text.

Warning Callout

This is another

This is a Text By Media block

This is the rich text field.

Test Button

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.

Test page 6

Guess what?

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

Test page 1 Test page 2 Test page 3

Just one! Stayed here for the night with my partner and had the best time, room was lovely and everyone who worked there was so welcoming and couldn't do enough for us! Breakfast was also delicious! 100% would recommend this place to anyone!! And will be back again soon!

Matt Wilcox, January 2025 from View Creative Agency

Stayed here for the night with my partner and had the best time, room was lovely and everyone who worked there was so welcoming and couldn't do enough for us! Breakfast was also delicious! 100% would recommend this place to anyone!! And will be back again soon!

Matt Wilcox, January 2025 from View Creative Agency

Stayed here for the night with my partner and had the best time, room was lovely and everyone who worked there was so welcoming and couldn't do enough for us!

Matt Wilcox, January 2025 from View Creative Agency

Our rooms.

Prev
Next

Stay in style.

Relax in comfort.

Experience charm.

Escape.

Explore our
rooms gallery.
Manually set Alt text for this specific instance of the image

Lets toss in a caption here.

Test page 2 Test page 3 Test page 4
Test page 5
Test page 7 Test page 2
Test page 5 Test page 6 Test page 7
Test page 8 Test page 2 Test page 3 Test page 4
Test page 6 Test page 7 Test page 8 Test page 1 Test page 2
Test page 5 Test page 6 Test page 7 Test page 8 Test page 1
This is a question

And here is an answer

Another one here

What do you know, an answer

Third time's a charm?

Yes.

Title of this form

Form Instructions

DEVELOPER NOTE: This is where instructions for filling out the form can be added. For example:

  • Remember to gain the consent of a parent or guardian before completing this form.

Form Errors

DEVELOPER NOTE: Normally not visible - this is a block where a summary of errors with the form can be output.

For example, individual fieldsets may be valid, but the combination of values between fieldsets may not be considered valid. That means each field, and each fieldset is OK - but the combination isn't... here is where we could relay that problem, e.g.,

  • "Guardian Details > Address" should be the same as "Child Details > Address".
Fieldset Legend

Fieldset Instructions

This is where instructions for filling out the fieldset can be added. For example:

  • When completing this field-group, remember the details should be for how old you will be when the event starts, and not how old you are today.

Fieldset Errors

This is where errors with the fieldset can be output.

For example, the individual fields may be valid, but the combination of values may not be considered valid:

  • The "Start Date" should be earlier than the "End Date".
This field has helper instructions on it
This field has helper instructions on it too
This is what an error on this field looks like
We advise you use a password manager to generate a strong password
Just an example error on this field
Non-text based form inputs
Send us a PDF no larger than 3Mb in size
Radio Group Choices

Instructions

Which of these many options would you prefer to have apply to you?

Checkbox Group Legend

Instructions

This is a hint of some sort

Errors

Dang it, there is an error

Problematic Fields

DEVELOPER NOTE: The number and date field types are technically usable, but have a11y issues, so are generally better to be avoided. Dates are a complex topic of their own, and the UK Gov has a good advice on how to do those:
https://design-system.service.gov.uk/patterns/dates/.

This is a hint of some sort
This is a hint of some sort

Google Maps examples

This is example code for modern Google Maps JS rather than the rather archaic stuff we usually use (and is constantly warning about deprecations in the Console now)

Basic Map Example

Map Example with multiple pins and infoboxes

Map Example with multiple pins and info boxes