Widget:OpenEI Panel

From Open Energy Information

This widget builds an OpenEI branded panel and styles child elements.

Dependencies

There are a few dependencies that are required to use this widget.

  1. it requires the use of a div element with a oei-panel class.
  2. it requires use of data attributes with a div.oei-panel to set a background image (optional) and/or any additional element styles:

OPTIONAL

  1. data-image
    • use to set the background image
    • e.g. data-image="/w/skins/OpenEI/images/unsplash/backgrounds/turbine-sunflowers.jpeg"
  2. data-style
    • use to apply styles to an element property:value
    • e.g. data-style="background-size:85%;"
    • use semicolons ( ; ) to separate multiple styles
    • e.g. data-style="height:200px;width:200px;background-size:85%;"

Markup

In order to use this widget, call the widget using wiki syntax:

{{#Widget:OpenEI Panel}}

The widget should only be called once per page.

Then use HTML markup on the page to build each element:

<div class="oei-panel">
<div class="oei-panel_image" data-img="/w/images/6/6b/Caspian_Sea_by_NASA.jpeg"></div>
<h2>Renewable Electricity</h2>
<div class="oei-panel_content">
Explore renewable energy resources and technologies used for electricity generation.  Geothermal, solar, water and wind energy resources are among the most abundant of renewable resource types.  These links are your gateway to learning more about these resources and their related technologies.
<div class="oei-panel_nav">
*[[Geothermal]]
*[[Solar]]
*[[Water]]
*[[Wind]]
</div>
</div>
</div>

Examples

Basic

Placing this on your wiki page:

{{#Widget:OpenEI Panel}}
<div class="oei-panel">
<h2>Renewable Electricity</h2>
<div class="oei-panel_content">
Explore renewable energy resources and technologies used for electricity generation.  Geothermal, solar, water and wind energy resources are among the most abundant of renewable resource types.  These links are your gateway to learning more about these resources and their related technologies.
</div><!--close content-->
</div><!--close panel-->

Results in this:

Renewable Electricity

Explore renewable energy resources and technologies used for electricity generation. Geothermal, solar, water and wind energy resources are among the most abundant of renewable resource types. These links are your gateway to learning more about these resources and their related technologies.

Add Background Image

Placing this on your wiki page:

{{#Widget:OpenEI Panel}}
<div class="oei-panel">
<div class="oei-panel_image" data-image="/w/images/6/6b/Caspian_Sea_by_NASA.jpeg"></div>
<h2>Renewable Electricity</h2>
<div class="oei-panel_content">
Explore renewable energy resources and technologies used for electricity generation.  Geothermal, solar, water and wind energy resources are among the most abundant of renewable resource types.  These links are your gateway to learning more about these resources and their related technologies.
</div><!--close content-->
</div><!--close panel-->

Results in this:

Renewable Electricity

Explore renewable energy resources and technologies used for electricity generation. Geothermal, solar, water and wind energy resources are among the most abundant of renewable resource types. These links are your gateway to learning more about these resources and their related technologies.

Add Navigation Links

Placing this on your wiki page:

{{#Widget:OpenEI Panel}}
<div class="oei-panel">
<div class="oei-panel_image" data-image="/w/images/6/6b/Caspian_Sea_by_NASA.jpeg"></div>
<h2>Renewable Electricity</h2>
<div class="oei-panel_content">
Explore renewable energy resources and technologies used for electricity generation.  Geothermal, solar, water and wind energy resources are among the most abundant of renewable resource types.  These links are your gateway to learning more about these resources and their related technologies.
<div class="oei-panel_nav">
*[[Geothermal]]
*[[Solar]]
*[[Water]]
*[[Wind]]
</div><!--close nav links-->
</div><!--close content-->
</div><!--close panel-->

Results in this:

Renewable Electricity

Explore renewable energy resources and technologies used for electricity generation. Geothermal, solar, water and wind energy resources are among the most abundant of renewable resource types. These links are your gateway to learning more about these resources and their related technologies.