Template:Callout/doc: Difference between revisions
(stacked docs, custom wrapper class docs) |
(→Stacked callouts: fixed example) |
||
(One intermediate revision by the same user not shown) | |||
Line 1: | Line 1: | ||
== Examples == | == Examples == | ||
=== Types === | === Types === | ||
Line 95: | Line 74: | ||
Sets the callout to a predefined width, making all callouts with the same class appear with the same width. | Sets the callout to a predefined width, making all callouts with the same class appear with the same width. | ||
{{tji|Callout|stacked:1|Info|An informative message. An informative message. An informative message.}} | Callouts will be stacked to the right and will require {{t|clear}} after to not overflow with the content that goes after. | ||
{{tji|Callout|stacked:1|Info | |||
{{tji|Callout|stacked:1|Info|An informative message. An informative message. An informative message.}} <br> | |||
{{tji|Callout|stacked:1|Info|Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum...}} <br> | |||
{{tji|Clear}} | |||
{{gda}} | {{gda}} | ||
{{Callout|stacked=1|Info|An informative message. An informative message. An informative message.}} | {{Callout|stacked=1|Info|An informative message. An informative message. An informative message.}} | ||
{{Callout|stacked=1|Info | {{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}} | |||
=== Wrapper classes === | === Wrapper classes === |
Latest revision as of 10:08, 17 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
↓