Stepper component and Stepper option assembly

A Stepper component is a great way to tailor the content appearing on a page to the user's needs or interests. It presents the user with a series of options and, depending on which they choose, new content will appear below the original box. This can be an answer or another question for another step in the chain.

It is most often used in our housing advice and legal content.

Note: The structure of a Stepper build can be confusing. Usually, an assembly houses a component. But in this case, the Assembly – Stepper Option is housed within a single Stepper component as well as being the house for another set of Stepper components. It exists in Contentful as follows:

A page's assembly section > Component – Stepper > Assembly – Stepper Option > Component – Stepper > and the chain can continue.

If you need to see how a page build for the stepper fits together, have a look at the Tenancy checker.

Building a Component – Stepper and its Assembly – Stepper Options

You can add a Stepper component to a page's Assembly section by clicking Add content. You can then add an existing Stepper component or build a new one. You can also build one outside of a page by clicking Add entry in the top right of the main content section of Contentful. You will need to fill in the following fields:
Internal Title – this is the system name seen in Contentful
Title – the header copy for the component (optional)
Body text – the body copy, if more explanation is needed
Options – where you add Stepper Option assemblies. These are the radio button options that will appear in this Stepper Component. Select Add Content.

To Build the Assembly - Stepper Option:

6. Internal Title – this is the system name seen in Contentful

7. Option Text – the copy that appears next to the radio button

8. Step – create another (different) Stepper component here. This is the section of content that will appear if the user selects this Stepper Option. It can be another question or an answer. Select Add Content.

To Build the next Component – Stepper:

9. If this is the end of the Stepper chain (the answer): fill in the Internal Title, the Title and the Body Text. The Body Text will contain the answer copy. This can include hyperlinks to relevant pages. If this is another question, repeat the instructions (points 1-8) above.

10. Review and Publish each of the components and assemblies you've created.

Any questions? Email Lindsay Foley in the Central Digital team.