Template:Callout

Template documentation

view or edit this documentation • about template documentation

---

Uses template styles

This template uses template styles found in:

• Template:Callout/styles.css

Examples

Types

Caption text

Type	Syntax	Result
Info	{{Callout|Info|An informative message.}}	Info An informative message.
Warning	{{Callout|Warning|Something to be warned about.}}	Warning Something to be warned about.
Danger	{{Callout|Danger|The clown is closing in.}}	Danger The clown is closing in.
Tip	{{Callout|Tip|When walking over slippery surfaces, hold {{button|Shift}} to slow down and not slip (in most cases).}}	Tip When walking over slippery surfaces, hold Shift to slow down and not slip (in most cases).
Example	{{Callout|Example|An example for something.}}	Example An example for something.

Header label

{{Callout|Info|header=Notice|Bla-bla-bla, lorem ipsum...}}
or
{{Callout|Info|h=Notice|Bla-bla-bla, lorem ipsum...}}

↓

Notice

Bla-bla-bla, lorem ipsum...

or

Notice

Bla-bla-bla, lorem ipsum...

Alignment

Left

The default.

Center

{{Callout|Info|align=center|Bla-bla-bla, lorem ipsum...}}
or
{{Callout|Info|a=center|Bla-bla-bla, lorem ipsum...}}

↓

Info

Bla-bla-bla, lorem ipsum...

or

Info

Bla-bla-bla, lorem ipsum...

Right

{{Callout|Info|align=right|Bla-bla-bla, lorem ipsum...}}

↓

Info

Bla-bla-bla, lorem ipsum...

Images

{{Callout
| Info
| header = Work in Progress
| align = center
| This page is unfinished.
| image = Wired Frame.png
| image2 = Wrench.png
}}

↓

Work in Progress

This page is unfinished.

Stacked callouts

Sets the callout to a predefined width, making all callouts with the same class appear with the same width.

Callouts will be stacked to the right and will require {{clear}} after to not overflow with the content that goes after.

{{Callout|stacked=1|Info|An informative message. An informative message. An informative message.}}
{{Callout|stacked=1|Info|Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum...}}
{{Clear}}

↓

Info

An informative message. An informative message. An informative message.

Info

Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum...

Wrapper classes

Allows to add custom classes to the wrapper element.

{{Callout|wrapper class=hello|Info|An informative message.}}

↓

Info

An informative message.

A template for producing various notices.

Template parameters[Edit template data]

Parameter		Description	Type	Status
Type	1	Type of the callout. Select from the suggested values. Any casing is supported. Suggested values Info Warning Danger Example Tip	Line	required
Content	2	Content of the callout.	String	required
Header label	header h	Header text of the callout. By default, depends on the type.	Line	suggested
Align	align a	Alignment of the callout. When "Center" is used, the callout will span almost across the full width of a page. Suggested values Left Center Right Default Left	Line	suggested
Image	image image1 i	An image to add inside the callout at the start.	File	suggested
Second image	image2 i2	A second image to add inside the callout to the left, after the first one.	File	suggested
Stacked?	stacked	If set, the callout will have a predefined constant width, which would be the same for all callouts with this option set. Useful for making notice callouts that "stack" on top of each other. Auto value 0	Boolean	optional
Wrapper class	wrapper class	Extra class names to assign to the callout wrapper element. Use space to separate multiple classes.	Line	optional