Template:GuideStep: Difference between revisions

Latest revision as of 08:27, 23 March 2026

?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

@@ Line 1: / Line 1: @@
 <templatestyles src="GuideStep/styles.css"/><div class="guide-step{{#if:{{{layout|}}}| guide-step--img-{{{layout|}}}|}}"><div class="guide-step-header"><span class="guide-step-number">{{{step|?}}}</span><span class="guide-step-title">{{{title|Step Title}}}</span>{{#if:{{{badge|}}}|<span class="guide-step-badge">{{{badge}}}</span>|}}</div><div class="guide-step-body"><div class="guide-step-content"><div class="guide-step-text">{{{text|}}}</div>{{#if:{{{note|}}}|<div class="guide-step-note">💡 {{{note}}}</div>|}}{{#if:{{{warning|}}}|<div class="guide-step-warning">⚠️ {{{warning}}}</div>|}}</div>{{#if:{{{image|}}}|<div class="guide-step-screenshot">[[File:{{{image}}}|{{{imagesize|600px}}}|alt={{{imagealt|}}}|class=guide-screenshot]]</div>|}}</div></div><noinclude>
 == 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.
+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]].
@@ Line 18: / Line 18: @@
 === Parameters ===
-; <code>step</code> : Step number shown in the orange circle. Can be any value — use numbers or letters.
+; <code>step</code> : Step number shown in the coloured circle. Can be any value — numbers or letters.
-; <code>title</code> : Short step title shown in the header bar.
+; <code>title</code> : Short step title shown in the header bar. Defaults to "Step Title".
-; <code>text</code> : Main body text of the step. Supports wikitext formatting.
+; <code>text</code> : Main body text. Supports wikitext formatting.
-; <code>note</code> : Optional orange "💡" callout box for tips or helpful context.
+; <code>note</code> : Optional 💡 callout box for tips.
-; <code>warning</code> : Optional red "⚠️" callout box for warnings or important caveats.
+; <code>warning</code> : Optional ⚠️ callout box for warnings.
-; <code>badge</code> : Optional small badge label shown in the header (e.g. "Optional").
+; <code>badge</code> : Optional small badge label in the header (e.g. "Optional").
-; <code>image</code> : Filename of a screenshot image (e.g. <code>MyScreenshot.png</code>). Upload via [[Special:Upload]] first. If omitted, no image section renders.
+; <code>image</code> : Screenshot filename without <code>File:</code> prefix. If omitted, no image renders.
-; <code>imagesize</code> : Width of the image. Defaults to <code>600px</code>. Use <code>300px</code> for side layouts.
+; <code>imagesize</code> : Image width. Defaults to <code>600px</code>.
-; <code>imagealt</code> : Alt text for the screenshot image for accessibility.
+; <code>imagealt</code> : Alt text for the screenshot.
-; <code>layout</code> : Image position relative to text. Options: <code>below</code> (default), <code>above</code>, <code>left</code>, <code>right</code>. On mobile, <code>left</code> and <code>right</code> automatically collapse to <code>below</code>.
+; <code>layout</code> : Image position relative to text. Options: <code>below</code> (default), <code>above</code>, <code>left</code>, <code>right</code>.
 === Tab navigation ===
@@ Line 33: / Line 33: @@
 <pre>
 <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-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=...}}
@@ Line 42: / Line 45: @@
 </div>
 </pre>
-Prev/next buttons inside panels should use: <code><span class="guide-tab-nav-item guide-nav-btn guide-nav-btn--next" data-tab="t2">Next →</span></code>
+<templatedata>
+{
+    "description": "Displays a numbered step block for guides and tutorials. Supports body text, tip/warning callouts, and an optional screenshot.",
+    "params": {
+        "step": {
+            "label": "Step number",
+            "description": "Step number or label shown in the coloured circle (e.g. 1, 2, A).",
+            "type": "string",
+            "required": true
+        },
+        "title": {
+            "label": "Step title",
+            "description": "Short title shown in the step header bar.",
+            "type": "string",
+            "default": "Step Title",
+            "required": false
+        },
+        "text": {
+            "label": "Body text",
+            "description": "Main content of the step. Supports wikitext including links, bold, and lists.",
+            "type": "content",
+            "required": false
+        },
+        "note": {
+            "label": "Note",
+            "description": "Optional tip callout shown with a 💡 icon.",
+            "type": "content",
+            "required": false
+        },
+        "warning": {
+            "label": "Warning",
+            "description": "Optional warning callout shown with a ⚠️ icon.",
+            "type": "content",
+            "required": false
+        },
+        "badge": {
+            "label": "Badge",
+            "description": "Optional small badge label shown in the step header (e.g. Optional).",
+            "type": "string",
+            "required": false
+        },
+        "image": {
+            "label": "Screenshot",
+            "description": "Screenshot image filename without File: prefix. If omitted, no image slot is shown.",
+            "type": "wiki-file-name",
+            "required": false
+        },
+        "imagesize": {
+            "label": "Image size",
+            "description": "Width of the screenshot.",
+            "type": "string",
+            "default": "600px",
+            "required": false
+        },
+        "imagealt": {
+            "label": "Image alt text",
+            "description": "Alt text for the screenshot for accessibility.",
+            "type": "string",
+            "required": false
+        },
+        "layout": {
+            "label": "Image layout",
+            "description": "Position of the screenshot relative to the text.",
+            "type": "string",
+            "default": "below",
+            "suggestedvalues": ["below", "above", "left", "right"],
+            "required": false
+        }
+    },
+    "format": "block"
+}
+</templatedata>
 [[Category:Layout Templates]]
 </noinclude>