Template:Note: Difference between revisions

Browse history interactively

(View all pending changes)

[unchecked revision]

[pending revision]

← Older edit Newer edit →

Content deleted Content added

VisualWikitext

Inline

Revision as of 13:07, 7 April 2026

Template documentation[view] [edit] [history] [purge]

This template is used on many pages and changes may be widely noticed. Test changes in the template's /sandbox or /testcases subpages, or in your own user subpage. Consider discussing changes on the talk page before implementing them.

This template uses TemplateStyles:

Template:Note/styles.css

Usage

{{Note|This is with a blue green background the default}}

Note:

This is with a blue green background the default

{{Note|This is with a better yellower background|reminder-yellow}}

Note:

This is with a better yellower background

{{Note|This is a brown info box the same as used on mediawiki|info}}

This is a brown info box the same as used on mediawiki

{{Note|This is a clean less intrusive info box|info-blue}}

This is a clean less intrusive info box

{{Note|Careful with this action, this is a caution by default in orange|caution}}

Caution:

Careful with this action, this is a caution by default in orange

{{Note|Careful with this action, this is a caution in red if you prefer|caution-red}}

Caution:

Careful with this action, this is a caution in red if you prefer

{{Note|A warning message!|warning}}

Warning:

A warning message!

{{Note||dragons}}

Here be Dragons!

{{Note|Stop, proceed with great caution|dragons|Dragons:}}

Dragons:

Stop, proceed with great caution

{{Note|This is a strong start to my story|elephant}}

This is a strong start to my story

{{Note|You know what is definitely not going to happen|crystalball}}

You know what is definitely not going to happen

{{Note|If I can get you laughing we will all be smarter|clown}}

If I can get you laughing we will all be smarter

{{Note|Let me load you up with expectations|backpack}}

Let me load you up with expectations

{{Note|There is one thing I can never tell you|tension}}

There is one thing I can never tell you

{{Note|Just wait for a long time while I tell you lots and lots and lots of unnecessary details|hourglass}}

Just wait for a long time while I tell you lots and lots and lots of unnecessary details

{{Note|Let me drop some clues for you to follow . . . |breadcrumbs}}

Let me drop some clues for you to follow . . .

Show a Note

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Note Text	`1`	no description Example Some of Einstein's Brain is un-accounted for..	String	required
Icon or Background Color	`2`	Optional Change the Icon or Background Color Example caution, warning, tip, info, info-blue, reminder-yellow, caution-red	String	optional
Option to change leading text	`3`	no description Example Note: Caution: or Warning:	String	optional
Option to change CSS Class	`4`	no description Example back-clear-blue or back-clear-black	String	optional

The above documentation is transcluded from Template:Note/doc.
Editors can experiment in this template's sandbox and testcases pages.
Add categories to the /doc subpage. Subpages of this template.

@@ Line 1: / Line 1: @@
+                       <includeonly><templatestyles src="Note/styles.css" />
-<onlyinclude>{{#switch:
+{{#switch: {{{2}}}
-| =
+ | reminder-green =
-{{#if: {{#if:{{{1|}}}|{{{1}}}|{{#if:<noinclude>demo</noinclude>|demo|{{{demo|}}}}} }} | <templatestyles src="Note/styles.css" /><div role="note" class="note note-{{#switch:{{{2|}}}
+<div style="clear: both;"></div><div class="note {{{4|back-palegreen}}}">
-    |gotcha=error
+<div style="float: left">[[File:OOjs UI icon lightbulb-yellow.svg|30px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Note: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-    |=info
+ | reminder-yellow =
-    |#default={{{2|}}}
+<div style="clear: both;"></div><div class="note {{{4|back-yellow}}}">
-    }} {{#if:{{{inline|}}}|note-inline}}">{{{1}}}</div>
-  | [[File:OOjs UI icon lightbulb-20 fc3.svg|18px|Note|link=]]&nbsp;'''Note:''' }}
+<div style="float: left">[[File:OOjs UI icon lightbulb-yellow.svg|30px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Note: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-| #default=
+ | caution =
+<div style="clear: both;"></div><div class="note {{{4|back-orange}}}>
-  {{Template:Note|noshift=1}}
+<div style="float: left">[[File:OOjs UI icon alert-warning.svg|30px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Caution: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-}}</onlyinclude>
+ | caution-red =
+<div style="clear: both;"></div><div class="note {{{4|back-red}}}>
-== Usage ==
+<div style="float: left">[[File:OOjs UI icon alert-destructive.svg|30px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Caution: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-<pre>
+ | caution-orange =
-{{Note|Foo}}
+<div style="clear: both;"></div><div class="note {{{4|back-orange}}}>
-{{Note|Foo|reminder}}
+<div style="float: left">[[File:OOjs UI icon alert-warning.svg|30px]]</div> <div>&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Caution: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-{{Note|Foo|error}}
+ | tip =
-{{Note|Foo|gotcha}}
+<div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}>
-{{Note}} Loose test
+<div style="float: left">[[File:Customer Service Icon.png||30px]]</div> <div>&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Tip: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | moved =
-* Text {{Note|Foo|inline=1}}
+<div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}>
-</pre>
+<div style="float: left">[[File:301redirect.png|100px]]</div> <div>&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Moved: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-{{Note|Foo}}
+ | warning =
-{{Note|Foo|reminder}}
+<div style="clear: both;"></div><div class="note {{{4|back-red}}}>
-{{Note|Foo|error}}
+<div style="float: left">[[File:OOjs_UI_icon_notice-destructive.svg|30px]]</div> <div>&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Warning: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-{{Note|Foo|gotcha}}
+ | dragons =
-{{Note}} Loose test
+<div style="clear: both;"></div><div class="note {{{4|back-red}}}>
+<div style="float: left">[[File:Dragon.webp|100px]]</div><div style="height: 100px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Here be Dragons!}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-* Text {{Note|Foo|inline=1}}
+ | info =
+<div style="clear: both;"></div><div class="note {{{4|back-brown}}}>
-<templatedata>
+<div style="float: left">[[File:OOjs_UI_icon_reference_20_ac6600.svg|30px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-{
+ | info-blue =
-	"params": {
+<div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}>
-		"1": {
+<div style="float: left">[[File:OOjs UI icon reference-progressive.svg|30px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;{{{1}}}</div></div></div>
-			"type": "content",
+ | legend =
-			"label": "Text",
+<div style="clear: both;"></div><div class="note {{{4|back-lightgrey}}}>
-			"required": true
+<div style="float: left">[[File:OOjs UI icon info.svg.png|35px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Legend: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-		},
+ | legend-clear =
-		"2": {
+<div style="clear: both;"></div><div class="note {{{4|back-clear-black}}}>
-			"label": "Type",
+<div style="float: left">[[File:OOjs UI icon info.svg.png|35px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Legend: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-			"description": "'reminder', 'error', 'gotcha' or nothing. Will affect formatting.",
+ | legend-blue =
-			"type": "line"
+<div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}>
-		},
+<div style="float: left">[[File:OOjs UI icon info-progressive.svg.png|35px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Legend: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-		"inline": {
+ | elephant =
-			"label": "Inline formatting",
+<div style="clear: both;"></div><div class="note {{{4|back-pink}}}>
-			"description": "Show the template without line breaks before and after it",
+<div style="float: left">[[File:pink-elephant.png|35px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;{{{1}}}</div></div></div>
-			"type": "line"
+ | clown =
-		}
+<div style="clear: both;"></div><div class="note {{{4|back-cyan-sky-boarder}}}>
-	},
+<div style="float: left">[[File:clown-icon.png|35px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-	"format": "inline",
+ | backpack =
-	"description": "Show a note in a box (e.g. a top-of-the-page warning)."
+<div style="clear: both;"></div><div class="note {{{4|back-yellow-teal-boarder}}}>
-}
+<div style="float: left">[[File:backpack-icon.jpg|60px]]</div><div style="height: 60px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|&nbsp;}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-</templatedata>
+ | tension =
+<div style="clear: both;"></div><div class="note {{{4|back-red}}}>
+<div style="float: left">[[File:tension-icon.png|35px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | crystalball =
+<div style="clear: both;"></div><div class="note {{{4|back-lavender-purple-boarder}}}>
+<div style="float: left">[[File:crystal-ball-icon.png|35px]]</div><div>&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | hourglass =
+<div style="clear: both;"></div><div class="note {{{4|back-green-darkgreen-boarder}}}>
+<div style="float: left">[[File:Hourglass-icon.svg|35px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | breadcrumbs =
+<div style="clear: both;"></div><div class="note {{{4|back-clear-black}}}>
+<div style="float: left">[[File:breadcrumb-trail.png|100px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | #default =
+<div style="clear: both;"></div><div class="note {{{4|back-palegreen}}}">
+<div style="float: left">[[File:OOjs UI icon lightbulb-yellow.svg|30px]]</div><div style="height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Note: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+}}</includeonly><noinclude>
+{{documentation}}</noinclude>