m JackTheFoxOtter moved page User:JackTheFoxOtter/Test Template to User:JackTheFoxOtter/Template:Container |
No edit summary |
||
(18 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
<div style=" | <onlyinclude><div style=" | ||
display: flex; | |||
align-items: center; | |||
gap: 16px; | |||
color: var(--color-base--emphasized); | color: var(--color-base--emphasized); | ||
Line 8: | Line 9: | ||
font-weight: var(--font-weight-medium); | font-weight: var(--font-weight-medium); | ||
background-color: {{{2| | background-color: var({{{2|--color-information-bg}}}); | ||
padding: | padding: 12px 16px; | ||
margin: 0.5em 0; | margin: 0.5em 0; | ||
overflow: hidden; | overflow: hidden; | ||
border: 1px solid; | border: 1px solid; | ||
border-color: {{{2| | border-color: var({{{2|--color-information-bg}}}); | ||
border-radius: 12px; | border-radius: 12px; | ||
">{{#if:{{{3|}}}|{{{3|}}}|}}{{#if:{{{1|}}}|<div>{{{1}}}</div>|Example Text}}</div></onlyinclude> | |||
== Examples == | |||
{{Container | |||
|This is a note. | |||
|--color-information-bg /* Hero Cyan */ | |||
|[[File:PotatoBadge.png|40px|Note|link=]]}} | |||
{{Container | |||
|This is a note with a large amount of text to test how it overflows. {{Lorem ipsum}} | |||
|--color-information-bg /* Hero Cyan */ | |||
|[[File:PotatoBadge.png|40px|Note|link=]]}} | |||
{{Container | |||
|This note is potatoless. | |||
|--color-information-bg /* Hero Cyan */}} | |||
{{Container | |||
|This is a note with a large amount of text that's potatoless. {{Lorem ipsum}} | |||
|--color-information-bg /* Hero Cyan */}} | |||
{{Container | |||
|This is a note using a svg instead of png. | |||
|--color-information-bg /* Hero Cyan */ | |||
|[[File:InformationIcon.svg|40px|link=]]}} | |||
{{Container | |||
|This is a note using an svg instead of png. With more text! {{Lorem ipsum}} | |||
|--color-information-bg /* Hero Cyan */ | |||
|[[File:InformationIcon.svg|40px|link=]]}} |