Template:Callout/doc: Difference between revisions

From Space Station 14 Wiki
(stacked docs, custom wrapper class docs)
(→‎Stacked callouts: fixed example)
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
== Syntax ==
{{tj|Callout
|1: <nowiki>[REQUIRED] Type of the callout. Select from the suggested values. Any casing is supported.
        TYPE: line</nowiki>
|2: <nowiki>[REQUIRED] Content of the callout.
        TYPE: string</nowiki>
|header: <nowiki>Header text of the callout. By default, depends on the type.
        TYPE: line</nowiki>
|align: <nowiki>Alignment of the callout. When "Center" is used, the callout will span almost across the full width of a page.
        TYPE: line</nowiki>
|image: <nowiki>An image to add inside the callout at the start.
        TYPE: wiki-file-name</nowiki>
|image2: <nowiki>A second image to add inside the callout to the left, after the first one.
        TYPE: wiki-file-name</nowiki>
}}
== 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|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.