•<section>

    <h2>Default</h2>

    <p>

        Panel is a style that is is implemented by inheriting the vertical group, just like the vertical menu.

        <div class="panel">

            <div class="head">

                <i class="icon-left"></i> <strong>Panel Heading</strong>

            </div>

            <div class="body">

                The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effect.

                It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin.

            </div>

            <div class="foot">

                Panel Footer

            </div>

        </div>

    </p>

​

    <p class="br">

        The following is an example that can be implemented more simply by excluding the <strong>head</strong> and/or the <strong>foot</strong>.

        <div class="row">

            <div class="col col-6">

                <div class="panel">

                    <div class="head">

                        <strong>Panel Heading</strong>

                    </div>

                    <div class="body">

                        Panel Body

                    </div>

                </div>

            </div>

            <div class="col col-6" style="padding-left: 5px;">

                <div class="panel">

                    <div class="body">

                        Panel Body

                    </div>

                    <div class="foot">

                        <strong>Panel Footer</strong>

                    </div>

                </div>

            </div>

        </div>

    </p>

</section>

​

<section>

    <h2>Combine</h2>

    <p>

        Panel provides a function that enables combination with other components. and that can be used instead of <strong>body</strong>.

        <div class="panel">

            <div class="head">

                <strong>Panel Heading</strong>

            </div>

            <table class="table classic hover">

                <thead>

                    <tr>

                        <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td>

                    </tr>

                    <tr>

                        <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td>

                    </tr>

                    <tr>

                        <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td>

                    </tr>

                </tbody>

            </table>

        </div>

    </p>

</section>

​

<section>

    <h2>Close</h2>

    <p>

        Panel provides a closed option. The user needs to add a panel-close class as shown below.

        <div class="panel close">

            <div class="head">

                <i class="icon-left"></i> <strong>Panel Heading</strong>

            </div>

            <div class="body">

                Panel Body

            </div>

            <div class="foot">

                Panel Footer

            </div>

        </div>

    </p>

</section>

​

<section>

    <h2>Fit</h2>

    <p>

        When you want to set the padding value in the body area to 0, add a <strong>fit </strong>class to the body.

        <div class="panel">

            <div class="head">

                <i class="icon-left"></i> <strong>Panel Heading</strong>

            </div>

            <div class="body fit">

                The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects.

                It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.

                It also supports, but does not require, the Easing Plugin.

            </div>

        </div>

    </p>

</section>

​

<section>

    <h2>Include</h2>

    <p>

        Panel can add a component such as a <strong>small</strong> button or a label to the header or the footer.

        <div class="panel">

            <div class="head">

                <i class="icon-left"></i> <strong>Panel Heading</strong>

                <div style="float: right;">

                    <div class="combo">

                        <a class="btn small" style="width: 150px;">Select...</a>

                        <a class="btn small toggle"><i class="icon-arrow2"></i></a>

                    </div>

                </div>

            </div>

            <div class="body">

                Panel Body

            </div>

        </div>

    </p>

</section>

​

<section>

    <h2>Tab Header</h2>

    <p>

        Panel can add a tab component to the header.

​

        <div class="panel">

            <div class="head">

                <ul class="tab top">

                    <li class="active">

                        <a href="#">Home</a>

                    </li>

                    <li><a href="#">CSS</a></li>

                    <li><a href="#">Script</a></li>

                    <li class="checked">

                        <a href="#">Menu <i class="icon-arrow1"></i></a>

                    </li>

                </ul>

            </div>

            <div class="body">

                Panel Body

            </div>

        </div>

    </p>

</section>

​

<section>

    <h2>Panel Group</h2>

    <p>

        Panel Group can combine several panels as a group.

        <div class="pgroup">

            <div class="panel" style="width: 33.3%;">

                <div class="head">

                    <strong>Panel Heading</strong>

                </div>

                <div class="body">

                    Panel Body

                </div>

            </div>

            <div class="panel" style="width: 33.3%;">

                <div class="head">

                    <strong>Panel Heading</strong>

                </div>

                <div class="body">

                    Panel Body

                </div>

            </div>

            <div class="panel" style="width: 33.3%;">

                <div class="head">

                    <strong>Panel Heading</strong>

                </div>

                <div class="body">

                    Panel Body

                </div>

            </div>

        </div>

    </p>

</section>