Template:SideBySide: Difference between revisions
From HorizonXI Wiki
(Created page with "<includeonly><onlyinclude>__NOTOC__<div class="flex-container"><div class="flex-container-item-{{{columns|2}}}">{{{1}}}</div><div class="flex-container-item-{{{columns|2}}}">{{{2}}}</div><!-- -->{{#if:{{{3|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{3}}}</div><!-- -->{{#if:{{{4|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{4}}}</div><!-- -->{{#if:{{{5|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{5}}}</div><!-- -->{{#if:{{{6|}}}|<div class...") |
m (added code for examples) |
||
| Line 31: | Line 31: | ||
4 columns side by side with 4 elements. | 4 columns side by side with 4 elements. | ||
<pre> | |||
{{SideBySide|columns=4| | |||
==Test1== | |||
| | |||
==Test2== | |||
| | |||
==Test3== | |||
| | |||
==Test4== | |||
}} | |||
</pre> | |||
{{SideBySide|columns=4| | {{SideBySide|columns=4| | ||
| Line 45: | Line 57: | ||
3 columns side by side with 9 elements. | 3 columns side by side with 9 elements. | ||
<pre> | |||
{{SideBySide|columns=3| | |||
==Test1== | |||
| | |||
==Test2== | |||
| | |||
==Test3== | |||
| | |||
==Test4== | |||
| | |||
==Test5== | |||
| | |||
==Test6== | |||
| | |||
==Test7== | |||
| | |||
==Test8== | |||
| | |||
==Test9== | |||
}} | |||
</pre> | |||
{{SideBySide|columns=3| | {{SideBySide|columns=3| | ||
| Line 70: | Line 104: | ||
2 columns side by side with 4 elements. | 2 columns side by side with 4 elements. | ||
{{SideBySide|columns= | <pre> | ||
{{SideBySide|columns=2| | |||
==Test1== | |||
| | |||
==Test2== | |||
| | |||
==Test3== | |||
| | |||
==Test4== | |||
}} | |||
</pre> | |||
{{SideBySide|columns=2| | |||
==Test1== | ==Test1== | ||
| | | | ||
| Line 83: | Line 129: | ||
4 columns side by side with 5 elements. | 4 columns side by side with 5 elements. | ||
<pre> | |||
{{SideBySide|columns=4| | |||
==Test1== | |||
| | |||
==Test2== | |||
| | |||
==Test3== | |||
| | |||
==Test4== | |||
| | |||
==Test5== | |||
}} | |||
</pre> | |||
{{SideBySide|columns=4| | {{SideBySide|columns=4| | ||
Revision as of 12:07, 16 September 2023
Usage
This template can be used to display content side by side which automatically switches to display on top of each other on smaller screens. It supports up to 12 content arguments and the argument "columns" which can be set to 2, 3 or 4, depending on how many columns are supposed to be displayed at maximum.
Examples
Example 1
4 columns side by side with 4 elements.
{{SideBySide|columns=4|
==Test1==
|
==Test2==
|
==Test3==
|
==Test4==
}}
Test1
Test2
Test3
Test4
Example 2
3 columns side by side with 9 elements.
{{SideBySide|columns=3|
==Test1==
|
==Test2==
|
==Test3==
|
==Test4==
|
==Test5==
|
==Test6==
|
==Test7==
|
==Test8==
|
==Test9==
}}
Test1
Test2
Test3
Test4
Test5
Test6
Test7
Test8
Test9
Example 3
2 columns side by side with 4 elements.
{{SideBySide|columns=2|
==Test1==
|
==Test2==
|
==Test3==
|
==Test4==
}}
Test1
Test2
Test3
Test4
Example 4
4 columns side by side with 5 elements.
{{SideBySide|columns=4|
==Test1==
|
==Test2==
|
==Test3==
|
==Test4==
|
==Test5==
}}
