Template:Section columns: Difference between revisions
Jump to navigation
Jump to search
m (aria label correction) |
m (max-width to prevent extreme stretching on large displays in some skins) |
||
| Line 1: | Line 1: | ||
<div style="display: flex; flex-wrap: wrap; gap: 1em; clear: both;"> | <div style="display: flex; max-width: 200ch; flex-wrap: wrap; gap: 1em; clear: both;"> | ||
<div role="region" aria-labelledby="{{anchorencode:{{{heading 1}}}}}" style="width: 40%; min-width: | <div role="region" aria-labelledby="{{anchorencode:{{{heading 1}}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | ||
<h3 id="{{anchorencode:{{{heading 1}}}}}">{{{heading 1}}}</h3> | <h3 id="{{anchorencode:{{{heading 1}}}}}">{{{heading 1}}}</h3> | ||
{{{section 1}}} | {{{section 1}}} | ||
</div> | </div> | ||
<div role="region" aria-labelledby="{{anchorencode:{{{heading 2}}}}}" style="width: 40%; min-width: | <div role="region" aria-labelledby="{{anchorencode:{{{heading 2}}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | ||
<h3 id="{{anchorencode:{{{heading 2}}}}}">{{{heading 2}}}</h3> | <h3 id="{{anchorencode:{{{heading 2}}}}}">{{{heading 2}}}</h3> | ||
{{{section 2}}} | {{{section 2}}} | ||
</div> | </div> | ||
<div role="region" aria-labelledby="{{anchorencode:{{{heading 3}}}}}" style="width: 40%; min-width: | <div role="region" aria-labelledby="{{anchorencode:{{{heading 3}}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | ||
<h3 id="{{anchorencode:{{{heading 3}}}}}">{{{heading 3}}}</h3> | <h3 id="{{anchorencode:{{{heading 3}}}}}">{{{heading 3}}}</h3> | ||
{{{section 3}}} | {{{section 3}}} | ||
</div> | </div> | ||
<div role="region" aria-labelledby="{{anchorencode:{{{heading 4}}}}}" style="width: 40%; min-width: | <div role="region" aria-labelledby="{{anchorencode:{{{heading 4}}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;"> | ||
<h3 id="{{anchorencode:{{{heading 4}}}}}">{{{heading 4}}}</h3> | <h3 id="{{anchorencode:{{{heading 4}}}}}">{{{heading 4}}}</h3> | ||
{{{section 4}}} | {{{section 4}}} | ||
Revision as of 02:32, 19 September 2023
{{{heading 1}}}
{{{section 1}}}
{{{heading 2}}}
{{{section 2}}}
{{{heading 3}}}
{{{section 3}}}
{{{heading 4}}}
{{{section 4}}}
[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