Template:Callout/doc: Difference between revisions

From Space Station 14 Wiki
(removed syntax)
(→‎Stacked callouts: fixed example)
 
Line 74: 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|header=Notice|Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum...}}
 
{{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|header=Notice|Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum...}}
{{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

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.