Template:Section columns: Difference between revisions

From Homecoming Wiki
Jump to navigation Jump to search
(responsive layout for archetype page power sections)
 
(expanded to 12 subsections)
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="display: flex; flex-wrap: wrap; gap: 1em;">
<includeonly><div style="display: flex; max-width: 200ch; flex-wrap: wrap; gap: 1em 2em; clear: both;">


<div role="region" aria-label="{{anchorencode:{{{heading 1}}}}}" style="width: 40%; min-width: 25em; 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-label="{{anchorencode:{{{heading 2}}}}}" style="width: 40%; min-width: 25em; 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-label="{{anchorencode:{{{heading 3}}}}}" style="width: 40%; min-width: 25em; 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-label="{{anchorencode:{{{heading 4}}}}}" style="width: 40%; min-width: 25em; 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>{{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 "http://wiki.homecomingservers.com/w/index.php?title=Template:Section_columns&oldid=318080"