Template:Callout: Difference between revisions
(added a little bevel) |
(added support for images) |
||
| Line 49: | Line 49: | ||
<div class="callout" style=" | <div class="callout" style=" | ||
--strip-size: 10px; | --strip-size: 10px; | ||
display: grid; | |||
grid-template-columns: min-content auto; | |||
width: fit-content; | width: fit-content; | ||
| Line 70: | Line 73: | ||
); | ); | ||
><!-- | ><!-- | ||
--><div class="callout-images" style="grid-column: 1; grid-row: 1;"><!-- | |||
-->{{#if: {{#vardefineecho: image_1|{{{image 1|{{{image|}}}<!--/1-->}}}}} | |||
|[[File:{{#var:image_1}}]] | |||
}}<!-- | |||
-->{{#if: {{#vardefineecho: image_2|{{{image 2|}}}}} | |||
|[[File:{{#var:image_2}}]] | |||
}}<!-- | |||
--></div><!-- | |||
--><span class="callout-header" style=" | --><span class="callout-header" style=" | ||
font-weight: bold; | grid-column: 2; | ||
grid-row: 1; | |||
font-weight: bold; | |||
font-size: large; | |||
">{{#var:callout_header}}</span><!-- | ">{{#var:callout_header}}</span><!-- | ||
--><div class="callout-content">{{{2}}}</div><!-- | |||
--><div class="callout-content" style=" | |||
grid-column: 2; | |||
grid-row: 2; | |||
">{{{2}}}</div><!-- | |||
--></div><!-- | --></div><!-- | ||
--></div></includeonly><noinclude> | --></div></includeonly><noinclude> | ||
| Line 125: | Line 145: | ||
"a" | "a" | ||
] | ] | ||
}, | |||
"image": { | |||
"aliases": [ | |||
"image 1" | |||
], | |||
"label": "Image", | |||
"description": "An image to add inside the callout at the start.", | |||
"type": "wiki-file-name", | |||
"suggested": true | |||
}, | |||
"image 2": { | |||
"label": "Second image", | |||
"description": "A second image to add inside the callout to the left, after the first one.", | |||
"type": "wiki-file-name", | |||
"suggested": true | |||
} | } | ||
}, | }, | ||
| Line 132: | Line 167: | ||
"2", | "2", | ||
"header", | "header", | ||
"align" | "align", | ||
"image", | |||
"image 2" | |||
] | ] | ||
} | } | ||
</templatedata> | </templatedata> | ||
</noinclude> | </noinclude> | ||
Revision as of 09:08, 15 August 2024
Examples
Types
| Type | Syntax | Result |
|---|---|---|
| Info | {{Callout |
Info An informative message. |
| Warning | {{Callout |
Warning Something to be warned about. |
| Danger | {{Callout |
Danger The clown is closing in. |
| Tip | {{Callout |
Tip When walking over slippery surfaces, hold Shift to slow down and not slip (in most cases). |
| Example | {{Callout |
Example An example for something. |
Header label
{{Callout
or
{{Callout
↓
or
Alignment
Left
The default.
Center
{{Callout
or
{{Callout
↓
or
Right
{{Callout
↓
Images
| Info
| header = Work in Progress
| align = center
| This page is unfinished.
| image = Wired Frame.png
| image2 = Wrench.png
}}
↓
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
{{Callout
{{Clear}}
↓
Wrapper classes
Allows to add custom classes to the wrapper element.
{{Callout
↓
A template for producing various notices.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Type | 1 | Type of the callout. Select from the suggested values. Any casing is supported.
| 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.
| Line | suggested |
| Image | image image 1 | An image to add inside the callout at the start. | File | suggested |
| Second image | image 2 | A second image to add inside the callout to the left, after the first one. | File | suggested |
