Lava Shortcode - Panel

Description

Wrap content in a clean, Bootstrap-styled panel layout.

Documentation

The panel shortcode allows you to easily add a Bootstrap panel to your markup. This is a pretty simple shortcode, but it does save you some time.

Basic Usage:

{[ panel title:'Important Stuff' icon:'fa fa-star' ]}
This is a super simple panel.
{[ endpanel ]}

As you can see the body of the shortcode is placed in the body of the panel. Optional parameters include:

  • title – The title to show in the heading. If no title is provided then the panel title section will not be displayed.
  • icon – The icon to use with the title.
  • footer – If provided the text will be placed in the panel’s footer.
  • type (default) – Change the type of panel displayed. Options include: default, primary, success, info, warning, danger, block and widget.
  • style – The inline style containing CSS styling declarations for a panel element. Example: style:'height:100%'

Markup

<div class="panel panel-{{ type }}" {% if style != '' %}style="{{ style }}"{% endif %}>
  {% if title != '' %}
      <div class="panel-heading">
        <h3 class="panel-title">
            {% if icon != '' %}
                <i class="{{ icon }}"></i> 
            {% endif %}
            {{ title }}</h3>
      </div>
  {% endif -%}
  <div class="panel-body">
    {{ blockContent  }}
  </div>
  {% if footer != '' %}
    <div class="panel-footer">{{ footer }}</div>
  {% endif %}
</div>