Manual:Displaying page sections as cards

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

What are cards?

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

• 
  Wiki page without cards
• 
  Wiki page with cards

Create card styles

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, .sectionflex .mw-headline-number {display:none}
@media (max-width: 767px) {.sectionflex.col2 > div, .sectionflex.col3 > div {flex-basis:100%; margin-top:2em}}

Create cards

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: <div class="sectionflex col2 background">

Available card formats

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 columns with frame: <div class="sectionflex col3 frame">

Combination of cards

It is possible to combine different card layouts on one wiki page. Starting with BlueSpice 4.3, it is no longer necessary to define the styles in Common.css, since the class sectionflexcontainer is applied to any page that loads the Startpage styles and has a wrapper with id="starpage":

<templatestyles src="Startpage/styles.css" />
<div id="startpage">
<div class="sectionflexcontainer col2 frame">
<div>
==Section 1==
Content section 1
</div>
<div>
==Section 2==
Content section 1
</div>
</div>

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

__NOTOC__

---

To submit feedback about this documentation, visit our community forum.