Template:Section columns: Difference between revisions
Jump to navigation
Jump to search
m (clear) |
(expanded to 12 subsections) |
||
(12 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<div style="display: flex; flex-wrap: wrap; gap: 1em; clear: both;"> | <includeonly><div style="display: flex; max-width: 200ch; flex-wrap: wrap; gap: 1em 2em; clear: both;"> | ||
<div role="region" aria- | <div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 1}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | ||
{{{heading 1}}} | |||
{{{section 1}}} | {{{section 1}}} | ||
</div> | </div> | ||
<div role="region" aria- | <div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 2}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | ||
{{{heading 2}}} | |||
{{{section 2}}} | {{{section 2}}} | ||
</div> | </div> | ||
{{#if:{{{heading 3|}}}{{{section 3|}}}| | |||
<div role="region" aria- | <div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 3}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | ||
{{{heading 3}}} | |||
{{{section 3}}} | {{{section 3}}} | ||
</div> | </div> | ||
}}{{#if:{{{heading 4|}}}{{{section 4|}}}| | |||
<div role="region" aria- | <div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 4}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | ||
{{{heading 4}}} | |||
{{{section 4}}} | {{{section 4}}} | ||
</div> | </div> | ||
}}{{#if:{{{heading 5|}}}{{{section 5|}}}| | |||
</div><noinclude>{{Documentation}}</noinclude> | <div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 5}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | ||
{{{heading 5}}} | |||
{{{section 5}}} | |||
</div> | |||
}}{{#if:{{{heading 6|}}}{{{section 6|}}}| | |||
<div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 6}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | |||
{{{heading 6}}} | |||
{{{section 6}}} | |||
</div> | |||
}}{{#if:{{{heading 7|}}}{{{section 7|}}}| | |||
<div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 7}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | |||
{{{heading 7}}} | |||
{{{section 7}}} | |||
</div> | |||
}}{{#if:{{{heading 8|}}}{{{section 8|}}}| | |||
<div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 8}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | |||
{{{heading 8}}} | |||
{{{section 8}}} | |||
</div> | |||
}}{{#if:{{{heading 9|}}}{{{section 9|}}}| | |||
<div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 9}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | |||
{{{heading 9}}} | |||
{{{section 9}}} | |||
</div> | |||
}}{{#if:{{{heading 10|}}}{{{section 10|}}}| | |||
<div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 10}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | |||
{{{heading 10}}} | |||
{{{section 10}}} | |||
</div> | |||
}}{{#if:{{{heading 11|}}}{{{section 11|}}}| | |||
<div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 11}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | |||
{{{heading 11}}} | |||
{{{section 11}}} | |||
</div> | |||
}}{{#if:{{{heading 12|}}}{{{section 12|}}}| | |||
<div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 12}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | |||
{{{heading 12}}} | |||
{{{section 12}}} | |||
</div> | |||
}} | |||
</div></includeonly><noinclude>__NOTOC__ {{Documentation}}</noinclude> |
Latest revision as of 18:52, 23 February 2024
[edit] [ ] Documentation
Responsive layout for small subsections. Displays subsections side-by-side in two columns in large viewports (e.g. desktop). Displays subsections in a single vertical column in small viewports (e.g. mobile).
Usage
{{section columns | heading 1 = ... | section 1 = ... | heading 2 = ... | section 2 = ... }}
Additional heading 3, section 3, heading 4, section 4, heading 5, section 5, heading 6, and section 6 parameters are optional.
Example
{{section columns | heading 1 = === Paragon City === | section 1 = * Atlas Park * Kings Row * Steel Canyon * Skyway City * Independence Port * Talos Island * Brickstown * Founders Falls * Peregrine Island | heading 2 = === Shadow Shard === | section 2 = * Firebase Zulu * Cascade Archipelago * The Chantry * The Storm Palace | heading 3 = === Praetoria === | section 3 = * Nova Praetoria * Imperial City * Neutropolis | heading 4 = === Rogue Isles === | section 4 = * Mercy Island * Port Oakes * Cap Au Diable * Sharkhead Isle * St. Martial * Grandville }}
Paragon City
- Atlas Park
- Kings Row
- Steel Canyon
- Skyway City
- Independence Port
- Talos Island
- Brickstown
- Founders Falls
- Peregrine Island
Shadow Shard
- Firebase Zulu
- Cascade Archipelago
- The Chantry
- The Storm Palace
Praetoria
- Nova Praetoria
- Imperial City
- Neutropolis
Rogue Isles
- Mercy Island
- Port Oakes
- Cap Au Diable
- Sharkhead Isle
- St. Martial
- Grandville