Template:Callout
Template documentation
|
|---|
View or edit this documentation. (About template documentation)
 NotePortions of the template sample may not be visible without values provided. |
Usage
Basic
{{Callout|Type|Content}}
Replace type with one of the supported types demonstrated below.
Replace content with the text you want to be displayed inside the callout.
Supported types
{{Callout|Info|This is an info Callout used to provide info and notes}}
{{Callout|Tip|This is a tip Callout used to provide tips}}
{{Callout|Warning|This is a warning Callout used to warn readers about something.}}
{{Callout|Danger|This is a danger Callout used to *really* warn readers about something.}}
{{Callout|Example|This is an example Callout used to provide examples to readers}}
↓
Changing title
The title of a callout = its type, but it can be changed:
<!--you can either provide a custom title in the 3rd parameter-->
{{Callout|Warning|This is a warning Callout used to warn readers about something.|A new cool title}}
<!--or by using a named parameter, located anywhere-->
<!--for instance, at the end -->
{{Callout|Warning|This is a warning Callout used to warn readers about something.|title=A new cool title}}
<!--or right after the type -->
{{Callout|Warning|title=A new cool title|This is a warning Callout used to warn readers about something.}}
↓
<!--you can either provide a custom title in the 3rd parameter-->
<!--or by using a named parameter, located anywhere-->
<!--for instance, at the end -->
<!--or right after the type -->
Aligning horizontally
A callout can be aligned horizontally. It's aligned to the left by default.
Note: The borders are added for clarity, they are not present in the template.
{{Callout|align=left|Info|This is an info Callout used to provide info and notes}}
{{Callout|align=center|Info|This is an info Callout used to provide info and notes}}
{{Callout|align=right|Info|This is an info Callout used to provide info and notes}}
↓
Text before callout.
Text after callout.
Text before callout.
Text after callout.
Text before callout.
Text after callout.
Floating
Floating allows text and other content around the callout to wrap around it, making for a more compact content arrangement.
{{Callout|float=left|Info|This is an info Callout used to provide info and notes}}
{{Callout|float=right|Info|This is an info Callout used to provide info and notes}}
<!-- stacked together -->
{{Callout|float=right|Info|This is an info Callout used to provide info and notes}}
{{Callout|float=right|Info|This is an info Callout used to provide info and notes}}
↓
Text before callout.
Text after callout.
Text before callout.
Text after callout
<!-- stacked together -->
Text before callout.
Text after callout
A more compact version
A callout has a compact variant that may be preferable in some cases, e.g. to not to overbloat the page.
{{Callout|compact=1|Info|This is an info Callout used to provide info and notes}}
↓
Info
Tip
Warning
Danger
ExampleAdding spacing to the bottom
An additional spacing can be added to the bottom of the callout to separate it from the rest of the content.
This is mainly used on callouts that appear at the start of a page as notices, e.g. {{Stub}} or {{WorkInProgress}}.
{{Callout|bottom margin=2rem|Info|This is an info Callout used to provide info and notes}}
↓
Text on a next line.
Usage within differing formatting
In a list
Warning: using the {{br}} template here to add newlines will break the template — use <br> tag directly instead.
- Apples TipApples are tasty, but try bananas also!
Do not be afraid 👁️👁️ - Bananas
With line breaks
using {{br}} template:
Tip
A template used to insert colourful callouts into articles.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Type | type 1 | Type of callout. Lowercase values are allowed.
| Line | required |
| Callout Content | text 2 | Content that will be shown in the callout.
| Content | required |
| Title Override | title 3 | Override the callout's title, e.g. change 'Info' to a custom value.
| Line | optional |
| Compact | compact | Whether to use the compact version of a callout. Disabled by default. Set to 1 to enable.
| Boolean | suggested |
| Align | align | Horizontal alight of the callout. Lowercase values are allowed.
| Line | optional |
| Float | float | Makes the callout float. Automatically adds clear property to the same side, allowing for stacking multiple floating callouts on the same side.
| String | suggested |
| Additional bottom margin | bottom margin | Allows to add additional spacing below the Callout. Any valid CSS-length is supported (see more: https://developer.mozilla.org/en-US/docs/Web/CSS/length).
| String | optional |