Template:Paired list grid: Difference between revisions
Jump to navigation
Jump to search
added key color parameter |
add label and label id parameters |
||
| Line 1: | Line 1: | ||
<includeonly><dl style="display: -ms-grid; display: grid; margin: 5px; border-top: 1px solid {{{border color|#c8ccd1}}}; border-right: 1px solid {{{border color|#c8ccd1}}}; border-bottom: 1px solid {{{border color|#c8ccd1}}}; border-radius: 3px; padding-left: 1px; overflow: hidden; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(12, 1fr); text-align: center;"> | <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="display: -ms-grid; display: grid; margin: 5px; border-top: 1px solid {{{border color|#c8ccd1}}}; border-right: 1px solid {{{border color|#c8ccd1}}}; border-bottom: 1px solid {{{border color|#c8ccd1}}}; border-radius: 3px; padding-left: 1px; overflow: hidden; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(12, 1fr); text-align: center;"> | ||
<div style="display: inline-block; display: grid; grid-column: span {{{span 1|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid {{{border color|#c8ccd1}}};"> | <div style="display: inline-block; display: grid; grid-column: span {{{span 1|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}}}; color: {{{key color|black}}};"><span>{{{key 1|}}}</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}}}; color: {{{key color|black}}};"><span>{{{key 1|}}}</span> | ||
| Line 139: | Line 139: | ||
<pre> | <pre> | ||
{{paired list grid | {{paired list grid | ||
| label = Stats | |||
| label id = stats | |||
| key background color = lightblue | | key background color = lightblue | ||
| border color = darkblue | | border color = darkblue | ||
| Line 162: | Line 164: | ||
{{paired list grid | {{paired list grid | ||
| label = Stats | |||
| label id = stats | |||
| key background color = lightblue | | key background color = lightblue | ||
| border color = darkblue | | border color = darkblue | ||
| Line 186: | Line 190: | ||
<div style="max-width: 360px;"> | <div style="max-width: 360px;"> | ||
{{paired list grid | {{paired list grid | ||
| label = Stats | |||
| label id = stats | |||
| key background color = lightblue | | key background color = lightblue | ||
| border color = darkblue | | border color = darkblue | ||
Latest revision as of 13:11, 29 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[edit source]
{{paired list grid
| label = Stats
| label id = stats
| 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
}}
Stats
Appearance in narrow viewports:
Stats