MediaWiki/Foundation/Callout Panels

Foundation CSS Framework for MediaWiki: Callout Panels

Note: To use components from the Zurb Foundation CSS Framework in MediaWiki, first install a custom skin such as the Foreground Skin or the Pivot Skin, which are built upon the Foundation CSS Framework.

Example 1: Full-width Callout Panel

The Callout Panel is brighter than the standard panel. The colour is predefined.

This Callout Panel uses 12 columns on the Grid.

Here is the code:-

<div class="row">
       <div class="small-12 columns">
            <div class="panel callout">
              <p>The Callout Panel is brighter than the standard panel. The colour is predefined.</p>
              <p>This Callout Panel uses 12 columns on the Grid.</p>
            </div>
        </div>
</div>

Example 2: Two Callout Panels

Callout Panel 1

Callout Panel 2

Here is the code:-

<div class="row">
       <div class="small-6 columns">
            <div class="panel callout">
              <p>Callout Panel 1</p>
            </div>
        </div>
        <div class="small-6 columns">
            <div class="panel callout">
              <p>Callout Panel 2</p>
            </div>
         </div>
</div>

Example 3: Three Callout Panels

These panels have also been styled using the radius class.

Callout Panel 1

Callout Panel 2

Callout Panel 3

Here is the code:-

<div class="row">
       <div class="small-4 columns">
            <div class="panel callout radius">
              <p>Callout Panel 1</p>
            </div>
        </div>
        <div class="small-4 columns">
            <div class="panel callout radius">
              <p>Callout Panel 2</p>
            </div>
         </div>
        <div class="small-4 columns">
            <div class="panel callout radius">
              <p>Callout Panel 3</p>
            </div>
         </div>
</div>

Example 4: Callout Panel within a standard Panel

This Panel uses the full width of the screen

The two callout panels below are styled using the same code as previous - with a width of 6 columns each, but they have been automatically resized to suit the available space within the main panel.

Callout Panel 1

Callout Panel 2

The normal Panel acts as a container for the Callout Panels. Rows and columns can be nested.

Here is the code:-

<div class="row">
     <div class="small-12 columns">
      	 <div class="panel">
	        <h5>This Panel uses the full width of the screen</h5>
	        <p>The two callout panels below are styled using the same code as previous - with a width of 6 columns each, but they have been automatically resized to suit the available space within the main panel.</p><br />
                <div class="row">
                       <div class="small-6 columns">
                             <div class="panel callout">
                                  <p>Callout Panel 1</p>
                             </div>
                       </div>
                      <div class="small-6 columns">
                            <div class="panel callout">
                                 <p>Callout Panel 2</p>
                           </div>
                      </div>
             </div>
       </div>
</div>

---

Open source wiki