JUI UIPlay: Panel

Code
HTML

<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>

Result API

Result
API