> For the complete documentation index, see [llms.txt](https://docs.lufavo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lufavo.com/roomfolk/sections/how-it-works.md).

# How it works

A numbered set of steps beside a photograph — for explaining your ordering, delivery or returns process.

## Set it up

1. Add the section.
2. Add a **Step** block for each stage.
3. Add an image beside them.

## Step blocks

| Setting     | What it does                                                                                            |
| ----------- | ------------------------------------------------------------------------------------------------------- |
| Icon        | Delivery, Returns, Guarantee, Sustainable, Support or Spark. Used when the step marker is set to Icons. |
| Heading     | The step title.                                                                                         |
| Description | A short line explaining it.                                                                             |

Three or four steps is the usual shape. More than that and it stops reading as a simple process.

## Step marker

| Setting     | What it does                        |
| ----------- | ----------------------------------- |
| Step marker | **Numbers**, **Icons** or **None**. |

**Numbers follow the order of the steps**, so reordering your blocks renumbers them automatically. You never type the numbers yourself.

Choose **Icons** if your steps are not really sequential, and **None** for a plain list.

## Image

| Setting       | What it does                                       |
| ------------- | -------------------------------------------------- |
| Image         | Shown beside the steps.                            |
| Aspect ratio  | Match the steps, Square, Portrait or Landscape.    |
| Image caption | Optional label shown over the bottom of the image. |

**Match the steps** makes the image the same height as the column of steps beside it, so the two sides end level. That is usually what you want. The fixed ratios are there for when your photograph needs a particular shape more than the layout needs to be even.

A photograph of the product in use works better here than a packshot.

## Layout

| Setting        | What it does                                                 |
| -------------- | ------------------------------------------------------------ |
| Image position | Left or Right.                                               |
| Mobile order   | Whether the image or the text comes first on narrow screens. |
| Alignment      | How the step text is aligned.                                |

## Spacing and style

| Setting        | What it does                   |
| -------------- | ------------------------------ |
| Top spacing    | 0px to 120px.                  |
| Bottom spacing | 0px to 120px.                  |
| Color scheme   | Which scheme the section uses. |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.lufavo.com/roomfolk/sections/how-it-works.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.