Template:GuideStep

?Step Title

GuideStep

Displays a numbered step block used in Quick Start guides and tutorials. Each step has a numbered circle header, body text, optional note/warning callout boxes, and an optional inline screenshot. The screenshot slot is hidden entirely when no image is provided — no placeholder is shown.

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 orange circle. Can be any value — use numbers or letters.

title

Short step title shown in the header bar.

text

Main body text of the step. Supports wikitext formatting.

note

Optional orange "💡" callout box for tips or helpful context.

warning

Optional red "⚠️" callout box for warnings or important caveats.

badge

Optional small badge label shown in the header (e.g. "Optional").

image

Filename of a screenshot image (e.g. MyScreenshot.png). Upload via Special:Upload first. If omitted, no image section renders.

imagesize

Width of the image. Defaults to 600px. Use 300px for side layouts.

imagealt

Alt text for the screenshot image for accessibility.

layout

Image position relative to text. Options: below (default), above, left, right. On mobile, left and right automatically collapse to below.

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>

Prev/next buttons inside panels should use: Next →