Template:Callout: Difference between revisions

From Space Station 14 Wiki
No edit summary
No edit summary
Line 8: Line 8:
}}<!--
}}<!--


--><div class="callout-wrapper">
--><div class="callout-wrapper" style="
    display: flex;
    justify-content: {{lc: {{{align|{{{a|left}}}}}}}}
">
<div class="callout" style="
<div class="callout" style="
padding: .5rem;
padding: .5rem;
Line 17: Line 20:
border-right: 1px solid var(--bg-color-light-x4);
border-right: 1px solid var(--bg-color-light-x4);
color: var(--text-color);
color: var(--text-color);
        width: fit-content;
        min-width: 20rem;
><!--
><!--
--><span class="callout-header" style="
--><span class="callout-header" style="
Line 55: Line 60:
"description": "Header text of the callout. By default, depends on the type.",
"description": "Header text of the callout. By default, depends on the type.",
"type": "line",
"type": "line",
"suggested": true
"suggested": true,
"aliases": [
"h"
]
},
},
"align": {
"align": {
Line 64: Line 72:
"Left",
"Left",
"Center",
"Center",
"Right",
"Right"
"None"
],
],
"default": "None",
"default": "Left",
"suggested": true
"suggested": true,
"aliases": [
"a"
]
}
}
},
},

Revision as of 12:44, 14 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.}} unknown type: Warning
Info
Something to be warned about.
Danger {{Callout|Danger|The clown is closing in.}} unknown type: Danger
Info
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).}} unknown type: Tip
Info
When walking over slippery surfaces, hold Shift to slow down and not slip (in most cases).
Example {{Callout|Example|An example for something.}} unknown type: Example
Info
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...}}

Info
Bla-bla-bla, lorem ipsum...

or

Info
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
}}

Info
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.
Info
hello world

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.

Suggested values
Left Center Right
Default
Left
Linesuggested