Template:Callout: Difference between revisions

From Space Station 14 Wiki
(added a top margin)
(added same-color borders)
Line 54: Line 54:
         background-color: var(--bg-color-light-x2);
         background-color: var(--bg-color-light-x2);
          
          
         border: 1px solid var(--bg-color-light-x4);
         border: 1px solid {{#var: callout_strip_color}};
border-left: 10px solid {{#var: callout_strip_color}};
border-left: 10px solid {{#var: callout_strip_color}};
><!--
><!--

Revision as of 08:17, 15 August 2024

Template documentation
view or edit this documentation about template documentation

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.

A template for producing various notices.

Template parameters[Edit template data]

ParameterDescriptionTypeStatus
Type1

Type of the callout. Select from the suggested values. Any casing is supported.

Suggested values
Info Warning Danger Example Tip
Linerequired
Content2

Content of the callout.

Stringrequired
Header labelheader h

Header text of the callout. By default, depends on the type.

Linesuggested
Alignalign a

Alignment of the callout. When "Center" is used, the callout will span almost across the full width of a page.

Suggested values
Left Center Right
Default
Left
Linesuggested