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