Template:Paired list grid: Difference between revisions
Jump to navigation
Jump to search
m match border color default to wikitable |
expanded to 26 pairs |
||
| Line 103: | Line 103: | ||
<dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};"><span>{{{key 21}}}</span> | <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};"><span>{{{key 21}}}</span> | ||
<dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 21|}}}</span> | <dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 21|}}}</span> | ||
</div> | |||
}}{{#if:{{{key 22|}}}| | |||
<div style="display: inline-block; display: grid; grid-column: span {{{span 22|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> | |||
<dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};"><span>{{{key 22}}}</span> | |||
<dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 22|}}}</span> | |||
</div> | |||
}}{{#if:{{{key 23|}}}| | |||
<div style="display: inline-block; display: grid; grid-column: span {{{span 23|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> | |||
<dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};"><span>{{{key 23}}}</span> | |||
<dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 23|}}}</span> | |||
</div> | |||
}}{{#if:{{{key 24|}}}| | |||
<div style="display: inline-block; display: grid; grid-column: span {{{span 24|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> | |||
<dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};"><span>{{{key 24}}}</span> | |||
<dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 24|}}}</span> | |||
</div> | |||
}}{{#if:{{{key 25|}}}| | |||
<div style="display: inline-block; display: grid; grid-column: span {{{span 25|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> | |||
<dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};"><span>{{{key 25}}}</span> | |||
<dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 25|}}}</span> | |||
</div> | |||
}}{{#if:{{{key 26|}}}| | |||
<div style="display: inline-block; display: grid; grid-column: span {{{span 26|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> | |||
<dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};"><span>{{{key 26}}}</span> | |||
<dd style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;"><span>{{{value 26|}}}</span> | |||
</div> | </div> | ||
}} | }} | ||
Revision as of 07:32, 21 April 2025
Displays a grid containing key-value pairs.
The grid's width is split into 1/12ths, so 12 "span" values fill the width. Default span value is 3 — 3/12ths or 1/4th of the width.
Mimics a table layout, but avoids certain SEO and accessibility issues, especially mixed-up reading order, with using a table for this layout.
Example
{{paired list grid
| key background color = lightblue
| border color = darkblue
| span 1 = 4
| key 1 = Level
| value 1 = 10
| span 2 = 4
| key 2 = HP
| value 2 = 100
| span 3 = 4
| key 3 = MP
| value 3 = 10
| key 4 = Attack
| value 4 = 100
| key 5 = Defence
| value 5 = 100
| key 6 = Agility
| value 6 = 100
| key 7 = Luck
| value 7 = 100
}}
Appearance in narrow viewports: