Template:Callout: Difference between revisions

Latest revision as of 16:47, 5 April 2026

Unified callout box with type-based styling (tip, note, warning, protip). Uses TemplateStyles.

Template parameters[Edit template data]
Parameter		Description	Type	Status
Type	`type`	Callout type: tip, note, warning, protip Default note	String	optional
Title	`title`	Optional title for the callout	String	optional
Text	`text`	Main content of the callout	String	required

Callout usage

Use this template to create a visually distinct callout box. Valid types: tip, note, warning, protip.

{{ Callout

| type = tip / note / warning / protip

| title = Your Title goes here

| text = Your callout text goes here.

}}

The Callout will render as it appears below this line.

   
     📝 Note Your title goes here

Your text goes here

@@ Line 1: / Line 1: @@
-<templatestyles src="Template:Call/styles.css" />
+<noinclude>
+<templatedata>
+{
+  "description": "Unified callout box with type-based styling (tip, note, warning, protip). Uses TemplateStyles.",
+  "params": {
+    "type": {
+      "label": "Type",
+      "description": "Callout type: tip, note, warning, protip",
+      "type": "string",
+      "required": false,
+      "default": "note"
+    },
+    "title": {
+      "label": "Title",
+      "description": "Optional title for the callout",
+      "type": "string",
+      "required": false
+    },
+    "text": {
+      "label": "Text",
+      "description": "Main content of the callout",
+      "type": "string",
+      "required": true
+    }
+  }
+}
+</templatedata>
+<big>Callout usage</big>
+Use this template to create a visually distinct callout box.
+Valid types: <code>tip</code>, <code>note</code>, <code>warning</code>, <code>protip</code>.
+----
+<nowiki>{{</nowiki>
+Callout
+| type = tip / note / warning / protip
+| title = Your Title goes here
+| text = Your callout text goes here.
+<nowiki>}}</nowiki>
+----
+The Callout will render as it appears below this line.
+----
+</noinclude>
+<templatestyles src="Template:Callout/styles.css" />
 <div class="callout callout-{{{type|note}}}">
-   <span class="callout-label">
+   <div class="callout-header">
-    {{#switch: {{{type|note}}}
+    <span class="callout-icon">
-      | tip = Important Tip:
+      {{#switch: {{{type|note}}}
-      | warning = Warning:
+        | tip = 💡Important&nbsp;Tip {{{title|Your title goes here}}}
-      | protip = Pro Tip:
+        | warning = ⚠️ Warning {{{title|Your title goes here}}}
-      | note = Note:
+        | protip = ⭐ Pro&nbsp;Tip {{{title|Your title goes here}}}
-      | #default = Note:
+        | note = 📝 Note {{{title|Your title goes here}}}
-     }}
+        | #default = 📝 Note {{{title|Your title goes here}}}
-   </span>
+      }}
-  {{{text|{{{1}}}}}}
+    </span>
+     </span>
+  <div class="callout-body">
+{{{text|Your text goes here}}}
+   </div>
+</div>
+  </div>
+<!--
+<templatestyles src="Template:Callout/styles.css" />
+<div class="callout callout-{{{type|note}}}">
+  <div class="callout-header">
+    <span class="callout-icon">
+      {{#switch: {{{type|note}}}
+        | tip = 💡Important Tip
+        | warning = ⚠️ Warning
+        | protip = ⭐ Pro Tip
+        | note = 📝 Note
+        | #default = 📝 Note
+      }} <span class="callout-title">{{{title|Your title goes here}}}</span></span><p class="callout-body">
+{{{text|Your callout text goes here}}}</p>
+</span>
+</div>
 </div>
+-->

Template:Callout: Difference between revisions

Latest revision as of 16:47, 5 April 2026

Navigation menu

Search