Template:Callout: Difference between revisions
(image param improved) |
(moved styles to templatestyles) |
||
| Line 1: | Line 1: | ||
<includeonly><!-- | <includeonly><!-- | ||
--><templatestyles src="Template:Callout/styles.css" /><!-- | |||
-->{{#switch: {{#vardefineecho: callout_type|{{lc: {{{1}}}}}<!--/vardefine-->}} | -->{{#switch: {{#vardefineecho: callout_type|{{lc: {{{1}}}}}<!--/vardefine-->}} | ||
|info = | |info = | ||
| Line 43: | Line 45: | ||
--><div class="callout-wrapper" style=" | --><div class="callout-wrapper" style=" | ||
justify-content: {{#var:callout_align}}; | justify-content: {{#var:callout_align}}; | ||
"> | "> | ||
<div class="callout" style=" | <div class="callout" style=" | ||
/* size of the left border 'strip' */ | |||
--strip-size: 10px; | |||
min-width: {{#var:callout_min_width}}; | min-width: {{#var:callout_min_width}}; | ||
border-color: {{#var: callout_strip_color}}; | |||
clip-path: polygon( | |||
0 0, | |||
100% 0, | |||
100% 100%, | |||
calc(var(--strip-size) / 2) 100%, | |||
0 calc(100% - var(--strip-size) / 2) | |||
); | |||
><!-- | ><!-- | ||
--><div class="callout-images | --><div class="callout-images"><!-- | ||
-->{{#if: {{#vardefineecho: image_1|{{{image1|{{{image|{{{i|}}}<!--/2-->}}}<!--/1-->}}}}} | -->{{#if: {{#vardefineecho: image_1|{{{image1|{{{image|{{{i|}}}<!--/2-->}}}<!--/1-->}}}}} | ||
|[[File:{{#var:image_1}}|80px]] | |[[File:{{#var:image_1}}|80px]] | ||
| Line 85: | Line 75: | ||
--></div><!-- | --></div><!-- | ||
--><div class="callout-header-content-container | --><div class="callout-header-content-container"><!-- | ||
--><div class="callout-header">{{#var:callout_header}}</div><!-- | |||
--><div class="callout-header | |||
--><div class="callout-content-container | --><div class="callout-content-container"><!-- | ||
--><div class="callout-content">{{{2}}}</div><!-- | --><div class="callout-content">{{{2}}}</div><!-- | ||
--></div><!-- | --></div><!-- | ||
| Line 105: | Line 84: | ||
--></div><!-- | --></div><!-- | ||
--></div></includeonly><noinclude> | --></div></includeonly><noinclude> | ||
{{docs}} | {{docs|bb= | ||
{{uses template styles}} | |||
}} | |||
[[Category:Notice templates]] | [[Category:Notice templates]] | ||
Revision as of 10:01, 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 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 |
