Template:Section columns: Difference between revisions

From Unofficial Homecoming Wiki
Jump to navigation Jump to search
m (max-width to prevent extreme stretching on large displays in some skins)
(expanded to 12 subsections)
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="display: flex; max-width: 200ch; 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-labelledby="{{anchorencode:{{{heading 1}}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;">
<div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 1}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;">
<h3 id="{{anchorencode:{{{heading 1}}}}}">{{{heading 1}}}</h3>
{{{heading 1}}}
{{{section 1}}}
{{{section 1}}}
</div>
</div>


<div role="region" aria-labelledby="{{anchorencode:{{{heading 2}}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;">
<div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 2}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;">
<h3 id="{{anchorencode:{{{heading 2}}}}}">{{{heading 2}}}</h3>
{{{heading 2}}}
{{{section 2}}}
{{{section 2}}}
</div>
</div>
 
{{#if:{{{heading 3|}}}{{{section 3|}}}|
<div role="region" aria-labelledby="{{anchorencode:{{{heading 3}}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;">
<div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 3}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;">
<h3 id="{{anchorencode:{{{heading 3}}}}}">{{{heading 3}}}</h3>
{{{heading 3}}}
{{{section 3}}}
{{{section 3}}}
</div>
</div>
 
}}{{#if:{{{heading 4|}}}{{{section 4|}}}|
<div role="region" aria-labelledby="{{anchorencode:{{{heading 4}}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;">
<div role="region" aria-labelledby="{{anchorencode:{{#replace:{{{heading 4}}}|=}}}}" style="width: 40%; min-width: 50ch; flex: 1 0 auto;">
<h3 id="{{anchorencode:{{{heading 4}}}}}">{{{heading 4}}}</h3>
{{{heading 4}}}
{{{section 4}}}
{{{section 4}}}
</div>
</div>
 
}}{{#if:{{{heading 5|}}}{{{section 5|}}}|
</div><noinclude>__NOTOC__ {{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] [purge] Documentation
This documentation is transcluded from Template:Section columns/doc. (edit | history)

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

See also

Retrieved from "https://homecoming.wiki/w/index.php?title=Template:Section_columns&oldid=318080"