Tabs and the timeline are two containers: each tab and each step carries its own stack of elements, with the same basic shapes as everywhere else.
Tabs
Several panels, only one of which is visible at a time. The behaviour is Joomla's own: keyboard arrows, ARIA roles, and folding into an accordion on a narrow screen.
| Setting | What it does |
|---|---|
| Tab title | Short: it fits in a button. A tab without a title is not output. |
| The tab's content | The panel's stack of elements. |
| Panel layout | Stacked, everything follows on; Image on the right or Image on the left, images go to one side and the rest to the other. Without an image, the split does not apply. |
| Open on load | Only one tab can be. If none is chosen, the first one opens. |
| Direction | Horizontal at full width, Vertical in a side column. |
| Fold into an accordion | Below the chosen width, the tabs turn back into an accordion. It is the answer to narrow columns, where a row of tabs becomes unreadable. Never disables folding. |
The Tabs and image layout places three tabs with a title, a subheading, a text and an image: the shortest path to get started.
Timeline
Milestones, in the order they happened. The list is ordered: a screen reader announces the number of steps and their position.
| Setting | What it does |
|---|---|
| The marker | The date or the milestone, as free text: 2019, Spring 2021, Today. Not a date picker, which would impose a day and a month nobody knows. |
| Marker colour | The dot and the marker take this tone, useful to flag the current step. The marker stays written: colour never carries the information alone. |
| The step's content | The step's stack of elements: a heading, a text, an image... |
| Timeline direction | Vertical, it runs down the page and accepts long texts: it is the form that reads. Horizontal, it shows a journey at a glance and calls for short texts. |
| Step placement | All on one side, reading is direct. Alternating is more decorative, but the eye goes back and forth. On a narrow screen, alternating goes back to one side. |
Up to date for Opus 1.5.