Template:Note: Difference between revisions

Browse history interactively

(View all pending changes)

[checked revision]

[pending revision]

← Older edit

Content deleted Content added

VisualWikitext

Inline

Latest revision as of 13:53, 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" />
+<includeonly><templatestyles src="Note/styles.css" />{{#switch: {{{2}}}
-{{#switch: {{{2}}}
  | reminder-green =
 <div style="clear: both;"></div><div class="note {{{4|back-palegreen}}}">
-[[File:OOjs UI icon lightbulb-yellow.svg]] &nbsp;'''{{{3|Note: }}}''' {{{1}}}</div>
+<div style="float: left">[[File:OOjs UI icon lightbulb-yellow.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Note: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
  | reminder-yellow =
 <div style="clear: both;"></div><div class="note {{{4|back-yellow}}}">
-[[File:OOjs UI icon lightbulb-yellow.svg]] &nbsp;'''{{{3|Note: }}}''' {{{1}}}</div>
+<div style="float: left">[[File:OOjs UI icon lightbulb-yellow.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Note: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
  | caution =
 <div style="clear: both;"></div><div class="note {{{4|back-orange}}}>
-[[File:OOjs UI icon alert-warning.svg]] &nbsp;'''{{{3|Caution: }}}''' {{{1}}}</div>
+<div style="float: left">[[File:OOjs UI icon alert-warning.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Caution: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
  | caution-red =
 <div style="clear: both;"></div><div class="note {{{4|back-red}}}>
-[[File:OOjs UI icon alert-destructive.svg]] &nbsp;'''{{{3|Caution: }}}''' {{{1}}}</div>
+<div style="float: left">[[File:OOjs UI icon alert-destructive.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Caution: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
  | caution-orange =
 <div style="clear: both;"></div><div class="note {{{4|back-orange}}}>
-[[File:OOjs UI icon alert-warning.svg]] &nbsp;'''{{{3|Caution: }}}''' {{{1}}}</div>
+<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>
  | tip =
 <div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}>
-[[File:Customer Service Icon.png|32px]] &nbsp;'''{{{3|Tip: }}}''' {{{1}}}</div>
+<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 =
 <div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}>
-[[File:301redirect.png|100px]] &nbsp;'''{{{3|Moved: }}}''' {{{1}}}</div>
+<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>
  | warning =
 <div style="clear: both;"></div><div class="note {{{4|back-red}}}>
-[[File:OOjs_UI_icon_notice-destructive.svg]] &nbsp;'''{{{3|Warning: }}}''' {{{1}}}</div>
+<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>
  | dragons =
 <div style="clear: both;"></div><div class="note {{{4|back-red}}}>
-<div style="float: left">[[File:Dragon.webp|100px]]</div><div style="float: right; align-items: center;">&nbsp;'''{{{3|Here be Dragons! }}}''' {{{1}}}</div></div>
+<div style="float: left">[[File:Dragon.webp|100px]]</div><div style="min-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>
  | info =
 <div style="clear: both;"></div><div class="note {{{4|back-brown}}}>
-[[File:OOjs_UI_icon_reference_20_ac6600.svg]] &nbsp;<strong>{{{3|}}}</strong>&nbsp;{{{1}}}</div>
+<div style="float: left">[[File:OOjs_UI_icon_reference_20_ac6600.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
  | info-blue =
 <div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}>
-[[File:OOjs UI icon reference-progressive.svg]] &nbsp;<strong>{{{3|}}}</strong>&nbsp;{{{1}}}</div>
+<div style="float: left">[[File:OOjs UI icon reference-progressive.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;{{{1}}}</div></div></div>
  | legend =
 <div style="clear: both;"></div><div class="note {{{4|back-lightgrey}}}>
-[[File:OOjs UI icon info.svg.png|35px]] &nbsp;'''{{{3|Legend: }}}''' {{{1}}}</div>
+<div style="float: left">[[File:OOjs UI icon info.svg.png|35px]]</div><div style="min-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 =
 <div style="clear: both;"></div><div class="note {{{4|back-clear-black}}}>
-[[File:OOjs UI icon info.svg.png|35px]] &nbsp;'''{{{3|Legend: }}}''' {{{1}}}</div>
+<div style="float: left">[[File:OOjs UI icon info.svg.png|35px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Legend: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
  | legend-blue =
 <div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}>
-[[File:OOjs UI icon info-progressive.svg.png|35px]] &nbsp;'''{{{3|Legend: }}}''' {{{1}}}</div>
+<div style="float: left">[[File:OOjs UI icon info-progressive.svg.png|35px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Legend: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | elephant =
+<div style="clear: both;"></div><div class="note {{{4|back-pink}}}>
+<div style="float: left">[[File:pink-elephant.png|35px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;{{{1}}}</div></div></div>
+ | 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="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | backpack =
+<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="min-height: 60px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|&nbsp;}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | tension =
+<div style="clear: both;"></div><div class="note {{{4|back-red}}}>
+<div style="float: left">[[File:tension-icon.png|35px]]</div><div style="min-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 style="min-height: 35px;">&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="min-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="min-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}}}">
-[[File:OOjs UI icon lightbulb-yellow.svg]] &nbsp;'''{{{3|Note: }}}''' {{{1}}}</div>
+<div style="float: left">[[File:OOjs UI icon lightbulb-yellow.svg|30px]]</div><div style="min-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>