Template:Container: Difference between revisions
Template page
More actions
Copied improvements from Arti, moved the image definition out of the template entirely (this way we can use any type of insert, like inline svg!) |
No edit summary |
||
| (15 intermediate revisions by 4 users not shown) | |||
| Line 9: | 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: 12px 16px; | padding: 12px 16px; | ||
| Line 16: | Line 16: | ||
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> | |||
">{{#if: {{{3|}}}|{{{3|}}}|}} | |||
{{#if: {{{1|}}}|{{{1}}}|Example Text}}</div> | |||
</onlyinclude> | |||
== Examples == | == Examples == | ||
{{ | {{Container | ||
|This is a note. | |This is a note. | ||
| | |--color-information-bg /* Hero Cyan */ | ||
|[[File:PotatoBadge.png|40px|Note|link=]]}} | |[[File:PotatoBadge.png|40px|Note|link=]]}} | ||
{{ | {{Container | ||
|This is a note with a large amount of text to test how it overflows. {{Lorem ipsum}} | |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=]]}} | |[[File:PotatoBadge.png|40px|Note|link=]]}} | ||
{{ | {{Container | ||
|This note is potatoless. | |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}} | |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 | |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=]]}} | |||