Template:GuideStep

?Step Title

GuideStep

Displays a numbered step block for Quick Start guides and tutorials. Each step has a numbered circle header, body text, optional note/warning callouts, and an optional inline screenshot. The screenshot slot is hidden entirely when no image is provided.

Styles are loaded from Template:GuideStep/styles.css. Tab switching is handled by MediaWiki:Gadget-guide.js.

Usage

{{GuideStep
| step     = 1
| title    = Go to the project hub
| text     = Navigate to the hub page for your category, e.g. [[Projects/Audio]].
| note     = Not sure which category fits? You can select multiple.
| image    = Quickstart-hub-page.png
| layout   = below
}}

Parameters

step: Step number shown in the coloured circle. Can be any value — numbers or letters.
title: Short step title shown in the header bar. Defaults to "Step Title".
text: Main body text. Supports wikitext formatting.
note: Optional 💡 callout box for tips.
warning: Optional ⚠️ callout box for warnings.
badge: Optional small badge label in the header (e.g. "Optional").
image: Screenshot filename without File: prefix. If omitted, no image renders.
imagesize: Image width. Defaults to 600px.
imagealt: Alt text for the screenshot.
layout: Image position relative to text. Options: below (default), above, left, right.

Tab navigation

To use GuideStep inside tabbed sections, wrap groups of steps in:

<div class="guide-tabs">
<div class="guide-tabs-nav">
  <span class="guide-tab-nav-item is-active" data-tab="t1">Tab 1</span>
  <span class="guide-tab-nav-item" data-tab="t2">Tab 2</span>
</div>
<div class="guide-tab-panel is-active" data-panel="t1">
{{GuideStep|step=1|title=...|text=...}}
</div>
<div class="guide-tab-panel" data-panel="t2">
{{GuideStep|step=1|title=...|text=...}}
</div>
</div>

Displays a numbered step block for guides and tutorials. Supports body text, tip/warning callouts, and an optional screenshot.

Template parameters[Edit template data]
This template prefers block formatting of parameters.
Parameter		Description	Type	Status
Step number	`step`	Step number or label shown in the coloured circle (e.g. 1, 2, A).	String	required
Step title	`title`	Short title shown in the step header bar. Default Step Title	String	optional
Body text	`text`	Main content of the step. Supports wikitext including links, bold, and lists.	Content	optional
Note	`note`	Optional tip callout shown with a 💡 icon.	Content	optional
Warning	`warning`	Optional warning callout shown with a ⚠️ icon.	Content	optional
Badge	`badge`	Optional small badge label shown in the step header (e.g. Optional).	String	optional
Screenshot	`image`	Screenshot image filename without File: prefix. If omitted, no image slot is shown.	File	optional
Image size	`imagesize`	Width of the screenshot. Default 600px	String	optional
Image alt text	`imagealt`	Alt text for the screenshot for accessibility.	String	optional
Image layout	`layout`	Position of the screenshot relative to the text. Suggested values `below` `above` `left` `right` Default below	String	optional