Template:Paired list stack: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
added label and label id parameters |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly><dl style="margin: 5px; border-top: 1px solid | <includeonly>{{#if:{{{label|}}}|<div id="{{{label id|{{anchorencode:{{{label}}}}}}}}" style="text-align: center; font-weight: bold;">{{{label}}}</div>}}<dl {{#if:{{{label|}}}|aria-labelledby="{{{label id|{{anchorencode:{{{label}}}}}}}}"}} style="margin: 5px; border-top: 1px solid {{{border color|#c8ccd1}}}; border-left: 1px solid {{{border color|#c8ccd1}}}; border-right: 1px solid {{{border color|#c8ccd1}}}; border-radius: 3px; padding-bottom: 1px; overflow: hidden; text-align: center;"> | ||
<div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid | <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};"> | ||
<dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};">{{{key 1|}}} | <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 1|}}} | ||
<dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 1|}}} | <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 1|}}} | ||
</div> | </div> | ||
{{#if:{{{key 2|}}}| | {{#if:{{{key 2|}}}| | ||
<div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid | <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};"> | ||
<dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};">{{{key 2}}} | <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 2}}} | ||
<dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 2|}}} | <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 2|}}} | ||
</div> | </div> | ||
}}{{#if:{{{key 3|}}}| | }}{{#if:{{{key 3|}}}| | ||
<div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid | <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};"> | ||
<dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};">{{{key 3}}} | <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 3}}} | ||
<dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 3|}}} | <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 3|}}} | ||
</div> | </div> | ||
}}{{#if:{{{key 4|}}}| | }}{{#if:{{{key 4|}}}| | ||
<div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid | <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};"> | ||
<dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};">{{{key 4}}} | <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 4}}} | ||
<dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 4|}}} | <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 4|}}} | ||
</div> | </div> | ||
}}{{#if:{{{key 5|}}}| | }}{{#if:{{{key 5|}}}| | ||
<div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid | <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};"> | ||
<dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};">{{{key 5}}} | <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 5}}} | ||
<dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 5|}}} | <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 5|}}} | ||
</div> | </div> | ||
}}{{#if:{{{key 6|}}}| | }}{{#if:{{{key 6|}}}| | ||
<div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid | <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};"> | ||
<dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};">{{{key 6}}} | <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 6}}} | ||
<dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 6|}}} | <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 6|}}} | ||
</div> | </div> | ||
}}{{#if:{{{key 7|}}}| | }}{{#if:{{{key 7|}}}| | ||
<div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid | <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};"> | ||
<dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};">{{{key 7}}} | <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 7}}} | ||
<dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 7|}}} | <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 7|}}} | ||
</div> | </div> | ||
| Line 43: | Line 43: | ||
{{paired list stack | {{paired list stack | ||
| key background color = lightblue | | key background color = lightblue | ||
| border color = darkblue | |||
| key 1 = 1986 | | key 1 = 1986 | ||
| value 1 = Dragon Quest Suite | | value 1 = Dragon Quest Suite | ||
| Line 54: | Line 55: | ||
{{paired list stack | {{paired list stack | ||
| key background color = lightblue | | key background color = lightblue | ||
| border color = darkblue | |||
| key 1 = 1986 | | key 1 = 1986 | ||
| value 1 = Dragon Quest Suite | | value 1 = Dragon Quest Suite | ||
| Line 66: | Line 68: | ||
{{paired list stack | {{paired list stack | ||
| key background color = lightblue | | key background color = lightblue | ||
| border color = darkblue | |||
| key 1 = 1986 | | key 1 = 1986 | ||
| value 1 = Dragon Quest Suite | | value 1 = Dragon Quest Suite | ||
Latest revision as of 13:12, 29 April 2025
Displays a stack containing key-value pairs.
Mimics a table layout, but rearranges itself to better fit on small viewports (mobile).
Example[edit source]
{{paired list stack
| key background color = lightblue
| border color = darkblue
| key 1 = 1986
| value 1 = Dragon Quest Suite
| key 2 = 1987
| value 2 = Dragon Quest II Suite<br>Dragon Quest in Concert (Family Classic Concert)
| key 3 = 1988
| value 3 = Dragon Quest III Symphonic Suite (NHK Symphony Orchestra)<br>Dragon Quest III Naoshi Kougami Vocal<br>Dragon Quest in Brass<br>March Dragon Quest III<br>Dragon Quest on Electone<br>Dragon Quest in Concert (Family Classic Concert 2)
}}
Appearance in narrow viewports: