Template:Message box: Difference between revisions
No edit summary |
No edit summary Tag: Manual revert |
||
| (7 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<onlyinclude> |
<onlyinclude> |
||
<span style="text-align: center;"> |
<span style="text-align: center;"> |
||
<div style="display: inline-flex !important; border: {{{border-size|1px}}} {{{border-style|solid}}} {{{border-color|#A2A9B1}}}; border-radius: {{{border-radius|0px}}}; background: {{{bg-color|#F8F9FA}}}; text-align: {{{align|center}}}; color: {{{color|unset}}} !important; min-width: 60%; max-width: 80%; width: auto !important; justify-content: space-around"> |
<div style="display: inline-flex !important; border: {{{border-size|1px}}} {{{border-style|solid}}} {{{border-color|#A2A9B1}}}; border-radius: {{{border-radius|0px}}}; background: {{{bg-color|#F8F9FA}}}; text-align: {{{align|center}}}; color: {{{color|unset}}} !important; min-width: 60%; max-width: 80%; width: auto !important; padding: 0 3.5%; justify-content: space-around"> |
||
{{#if: {{{image|}}}|<div style="display: flex; align-items: center;">[[File:{{{image}}}|50px|class=autoheight]]</div><div style="width: 10%"></div>}} |
{{#if: {{{image|}}}|<div style="display: flex; align-items: center;">[[File:{{{image}}}|50px|class=autoheight]]</div><div style="width: 10%"></div>}} |
||
<div> |
<div> |
||
| Line 8: | Line 8: | ||
{{{text|}}} |
{{{text|}}} |
||
</div> |
</div> |
||
{{#if: {{{image|}}}| {{#ifeq: {{{align|center}}}|center|<div style="width: 50px;"></div>|}} }} |
{{#if: {{{image|}}}| {{#ifeq: {{{align|center}}}|center|<div style="width: 50px; padding: 0 5% "></div>|}} }} |
||
</div> |
</div> |
||
</span> |
</span> |
||
Latest revision as of 18:54, 13 January 2024
Documentation[edit source]
Example[edit source]
This is an example Message box
What do you know about rolling down in the deep
Basic usage[edit source]
{{Message box
|title=Title
|text=Long-ish text
}}
renders
Title
Long-ish text
All options[edit source]
{{Message box
|border-style=solid <!-- Border style (solid [default], dotted, dashed...) -->
|border-size=2px <!-- Border thickness, preferred in pixels. Defaults to 2px -->
|border-color=#59C7C2 <!-- Border color. Defaults to black -->
|bg-color=#061017 <!-- Background color. Default to a grayish color (#eaecf0) -->
|color=#B2C9C2 <!-- Text color. Defaults to unset -->
<!--|align=centre Text alignment. Defaults to center -->
|title=This is an example Message box<!-- Title, rendered in bold. -->
|text=What do you know about rolling down in the deep<!-- Medium-to-long–ish text, as a description. -->
|image= <!-- Icon rendered to the left of the text -->
}}
renders
This is an example Message box
What do you know about rolling down in the deep
{{Message box
|border-style=dotted <!-- Border style (solid [default], dotted, dashed...) -->
|border-size=5px <!-- Border thickness, preferred in pixels. Defaults to 2px -->
|border-color=#567321 <!-- Border color. Defaults to black -->
|border-radius=5px <!-- Border rounded corner radius. Defaults to 0px (none) -->
|bg-color=#000 <!-- Background color. Default to a grayish color (#eaecf0) -->
|color=#fff <!-- Text color. Defaults to unset -->
|align=right <!-- Text alignment. Defaults to center -->
|title=A lot <!-- Title, rendered in bold. -->
|text=Lorem... <!-- Medium-to-long–ish text, as a description. -->
|image=stub.png <!-- Icon rendered to the left of the text -->
}}
renders
A lot
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit accusantium, unde tempore error dignissimos dolorem aspernatur quod, repudiandae consectetur officia sunt tempora rem magni itaque, nulla necessitatibus. Sapiente, blanditiis hic?
Amet ipsum ad reiciendis eaque soluta sunt repellendus recusandae neque sit maiores vel, nobis id necessitatibus quam aspernatur ab facilis officiis eligendi obcaecati nulla aperiam mollitia veniam, commodi dolorum. Numquam!
Numquam ipsam sapiente vero maxime vitae voluptatem. Vero, facilis voluptas! Hic eaque inventore error soluta sed nemo cupiditate unde, provident delectus! Ratione tenetur incidunt, beatae asperiores ipsa dolorum id veritatis.
Eaque molestiae rem velit adipisci repellat odit veritatis similique quia nisi deserunt sunt minima blanditiis, ipsum a possimus unde eligendi quae officia aspernatur. Numquam, voluptatibus debitis a molestiae quod iste?