No edit summary |
No edit summary |
||
(23 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
<onlyinclude><div style=" | |||
display: flex; | |||
align-items: center; | |||
gap: 16px; | |||
color: var(--color-base--emphasized); | |||
font-family: var(--font-family-base); | |||
font-variation-settings: 'GRAD' var(--font-grade); | |||
font-weight: var(--font-weight-medium); | |||
background-color: var({{{2|--color-information-bg}}}); | |||
padding: 12px 16px; | |||
margin: 0.5em 0; | |||
overflow: hidden; | |||
border: 1px solid; | |||
border-color: var({{{2|--color-information-bg}}}); | |||
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=]]}} |