Difference between revisions of "Manual:Displaying page sections as cards"

(Changed categories.)
 
Line 20: Line 20:
 
.sectionflex.frame > div {border: 1px solid #e7e7e7}
 
.sectionflex.frame > div {border: 1px solid #e7e7e7}
 
.sectionflex.background> div {background: #f1f3f9}
 
.sectionflex.background> div {background: #f1f3f9}
.sectionflex .ve-ce-branchNode-slug, span.mw-editsection {display:none}
+
.sectionflex .ve-ce-branchNode-slug, .sectionflex  span.mw-editsection {display:none}
 
@media (max-width: 767px) {.sectionflex.col2 > div, .sectionflex.col3 > div {flex-basis:100%; margin-top:2em}}
 
@media (max-width: 767px) {.sectionflex.col2 > div, .sectionflex.col3 > div {flex-basis:100%; margin-top:2em}}
  

Latest revision as of 15:09, 15 September 2022

Sections of a wiki page can be displayed as "cards" with just a little bit of effort.

What are cards?[edit | edit source]

Cards are combinations of contiguous page sections that share the same column layout. Each wiki page can contain such cards.

Create card styles[edit | edit source]

Before sections can be formatted as cards, a user with admin rights must add and save the following information to the page MediaWiki:Common.css:

/* Styles for section cards */
.sectionflex {display: flex; flex-wrap: wrap; justify-content:space-between;}
.sectionflex.col1 > div {flex-basis:100%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex.col2 > div {flex-basis:49%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex.col3 > div {flex-basis:32%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex > div h2 {margin:0 0 1em 0; font-size:1.3em}
.sectionflex.frame > div {border: 1px solid #e7e7e7}
.sectionflex.background> div {background: #f1f3f9}
.sectionflex .ve-ce-branchNode-slug, .sectionflex  span.mw-editsection {display:none}
@media (max-width: 767px) {.sectionflex.col2 > div, .sectionflex.col3 > div {flex-basis:100%; margin-top:2em}}

Create cards[edit | edit source]

To format sections as cards:

  1. Create a page that contains different sections. Sections are marked by headings.
  2. Open the page in source editing mode.
  3. Add the start of a card container as <div class="sectionflex col2 background"> above the first section you want to include in the card display (i.e., above the first heading of that section). A heading starts with two equal (=) signs:
    <div class="sectionflex col2 background">
    ==Introduction==
    With more than 165,000 inhabitants, Regensburg is the fourth-largest city in the State of Bavaria after Munich, Nuremberg and Augsburg.
    
  4. Wrap all sections that you want to include in this card layout in a starting <div> and an end </div> tag:
    <div class="sectionflex col2 background">
    <div>
    ==Introduction==
    With more than 165,000 inhabitants, Regensburg is the fourth-largest city in the State of Bavaria after Munich, Nuremberg and Augsburg.(...)
    </div>
    <div>
    ==Topography==
    Regensburg is situated on the northernmost part of the Danube river at the geological crossroads of four distinct landscapes (...)
    </div>
    
  5. Close the sectionflex container itself with an end </div> tag:
    <div class="sectionflex col2 background"> <! --- Start card layout-->
    <div> <! --- Start card -->
    ==Introduction==
    With more than 165,000 inhabitants, Regensburg is the fourth-largest city in the State of Bavaria after Munich, Nuremberg and Augsburg.(...)
    </div> <! --- End card -->
    <div> <! --- Start card -->
    ==Topography==
    Regensburg is situated on the northernmost part of the Danube river at the geological crossroads of four distinct landscapes (...)
    </div> <! --- End card -->
    </div>  <! --- End card layout -->
    

The two sections should now be displayed as cards:

Two sections in the card layout
Two sections in the card layout: <div class="sectionflex col2 background">

Available card formats[edit | edit source]

You can choose between 1-column ("col1"), 2-column ("col2") or 3-column ("col3") cards with grey background ("background") or grey frame ("frame"). For example:

3-column layout with frame
3 columns with frame: <div class="sectionflex col3 frame">

Combination of cards[edit | edit source]

It is possible to combine different card layouts on one wiki page:

<div class="sectionflex col2 frame">
<div>
==Section 1==
Content section 1
</div>
<div>
==Section 2==
Content section 1
</div>
</div>

<div class="sectionflex col3 background">
<div>
==Section 3==
Content section 3
</div>
<div>
==Section 4==
Content section 4
</div>
<div>
==Section 5==
Content section 5
</div>
</div>

Discussions