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 →