Template:Callout: Difference between revisions

VisualWikitext

@@ Line 1: / Line 1: @@
+<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}}}">
+  <div class="callout-header">
+    <span class="callout-icon">
+      {{#switch: {{{type|note}}}
+        | tip = 💡Important&nbsp;Tip {{{title|Your title goes here}}}
+        | warning = ⚠️ Warning {{{title|Your title goes here}}}
+        | protip = ⭐ Pro&nbsp;Tip {{{title|Your title goes here}}}
+        | note = 📝 Note {{{title|Your title goes here}}}
+        | #default = 📝 Note {{{title|Your title goes here}}}
+      }}
+    </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}}}">
-   <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 Tip
-      | protip = Pro Tip:
+        | warning = ⚠️ Warning
-      | note = Note:
+        | protip = ⭐ Pro Tip
-      | #default = Note:
+        | note = 📝 Note
-    }}
+        | #default = 📝 Note
-  </span>
+      }} <span class="callout-title">{{{title|Your title goes here}}}</span></span><p class="callout-body">
-  {{{text|
+{{{text|Your callout text goes here}}}</p>
+</span>
+</div>
+</div>
+-->