Step by Step

Component Name: Pavo Real - StepByStep - Full Width

A numbered row of cards, each one opening a large panel that holds the full detail of that step. A long process stays on a single screen until the reader asks for more.

What it is

Two cards per row, each showing nothing but a number and a short title on a pale blue panel that turns navy as the pointer crosses it. Clicking anywhere on a card opens a wide centred modal on a navy background: the step number in a circle beside the step title, an opening paragraph, up to two white detail panels side by side, and a closing paragraph. The modal scrolls when the content is long and closes with the X in its corner or the Escape key.

How many steps

The steps are a repeating group — add or remove one with the group controls. Cards lay out two per row at every screen size, so an even number fills the grid cleanly; four and six are the comfortable counts. An odd number leaves the last card stretched across the full width of its row. The numbering is automatic and follows position, so reordering the steps renumbers them. Never type the number into the title.

The section heading

One field sits above the group and prints the heading over the cards, underlined in tan. It reads Step by step in the example above; replace it with something that names the process, such as Your audition in four steps.

The fields on each step

1. Step title — the one field that matters most, because it is used twice: it is the label on the card face and the headline inside the modal. A handful of words, so that it works in both places.
2. Opening paragraph — the first block of text in the modal, above the detail panels. This is where the step is actually explained.
3. Detail panel 1 — four fields together: a heading, a paragraph, a button label and a button link. They render as a white panel inside the modal.
4. Detail panel 2 — the same four fields again. Filled in, it sits beside the first panel on a desktop screen and underneath it on a phone.
5. Closing paragraph — a last block of text below the detail panels.

Everything except the step title is optional, and empty fields are removed at publish rather than left as blank space. Fill only the first detail panel and the modal shows one panel, as step 2 above does; leave both empty and the modal is simply the opening paragraph, as steps 3 and 4 are. A button needs both its label and its link before it appears.

Good for

Ordered processes where each stage needs more explanation than the page has room for: applying, auditioning, enrolling, a financial aid checklist, a transfer path. It is the right choice when the reader needs the whole sequence at a glance and then wants to dig into one stage of it.

Notable

• Everything inside a modal is hidden until the card is clicked. The text is in the published page, so search engines find it, but a visitor scanning the page sees only the step titles. Never let a deadline, a contact or a required form live only inside a modal.
• The whole card is the click target, and as published today the card is a plain div rather than a link or a button, so it is opened by clicking and not by tabbing to it. Worth knowing before this becomes the only route to something important.
• The small icon in the top corner of each card is decoration inherited from the shared card style. It does not mean the card leads off the site.
• The step number on the card and in the modal heading comes from the step position, not from any field you fill.
• On the Sidebar Layout the cards sit in the narrower content column and still lay out two per row, so titles wrap sooner and short ones matter more. The modal is unaffected — it is sized to the screen rather than to the column, so it opens just as wide on either layout.