# Widget Boxes header small text goes here...

Panel Content Here

<panel title="Panel (Default)"> <p>Panel Content Here</p> </panel>

#### Panel Header with Dropdown

Panel Content Here

<panel noButton="true"> <ng-container header> <h4 class="panel-title">Panel Header with Dropdown</h4> <div class="btn-group ml-auto" ngbDropdown> <button type="button" class="btn btn-success btn-xs">Action</button> <button type="button" class="btn btn-success btn-xs dropdown-toggle" ngbDropdownToggle></button> <ul class="dropdown-menu" ngbDropdownMenu> <li><a href="javascript:;">Action</a></li> ... </ul> </div> </ng-container> <p>Panel Content Here</p> </panel>

#### Panel Header with Radio Button

Option 1 Option 2

Panel Content Here

<panel noButton="true"> <ng-container header> <h4 class="panel-title">Panel Header with Radio Button</h4> <div class="btn-group btn-group-toggle ml-auto" ngbRadioGroup [(ngModel)]="model"> <label ngbButtonLabel class="btn btn-success btn-xs active"> <input type="radio" ngbButton name="options" [value]="1" checked /> Option 1 </label> <label ngbButtonLabel class="btn btn-success btn-xs"> <input type="radio" ngbButton name="options" [value]="2" /> Option 2 </label> </div> </ng-container> <p>Panel Content Here</p> </panel>

#### Panel Header with Progress Bar

40%

Panel Content Here

<panel noButton="true"> <ng-container header> <h4 class="panel-title">Panel Header with Progress Bar</h4> <div class="progress progress-sm ml-auto"> <div class="progress-bar progress-bar-striped bg-success progress-bar-animated" style="width: 40%">40%</div> </div> </ng-container> <p>Panel Content Here</p> </panel>
NEW

#### Panel Header with Label

Panel Content Here

<panel> <ng-container header> <span class="label label-success m-r-10">NEW</span> <h4 class="panel-title">Panel Header with Label</h4> </ng-container> <p>Panel Content Here</p> </panel>

Panel Content Here

<panel title="Hover View Icon" panelClass="panel-hover-icon"> <p>Panel Content Here</p> </panel>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed enim arcu. Ut posuere in ligula quis ultricies. In in justo turpis. Donec ut dui at massa gravida interdum nec vitae justo. Quisque ullamcorper vehicula dictum. Nullam hendrerit interdum eleifend. Aenean luctus sed arcu laoreet scelerisque. Vivamus non ullamcorper mauris, id sagittis lorem. Proin tincidunt mauris et dolor mattis imperdiet. Sed facilisis mattis diam elementum adipiscing.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ante velit, pretium non nisi a, egestas placerat diam. Nullam aliquet iaculis ultricies. Aliquam volutpat, sapien quis volutpat elementum, ligula purus auctor diam, at vestibulum nulla augue vel purus. Praesent ac nisl a magna tincidunt interdum sed in turpis. Maecenas nec condimentum risus. In congue pretium est, eget euismod tortor ornare quis.

Praesent eu ultrices justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras mattis ipsum quis sapien consectetur fringilla. Etiam sagittis sem tempus purus elementum, vitae pretium sapien porta. Curabitur iaculis ante ut aliquam luctus. Vivamus ullamcorper blandit imperdiet. Ut egestas, orci id rhoncus cursus, orci risus scelerisque enim, eget mattis eros lacus quis ligula. Vivamus ullamcorper urna eget hendrerit laoreet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi accumsan velit dolor. Donec convallis eleifend magna, at euismod tellus convallis a. Curabitur in nisi dolor. Cras viverra scelerisque orci, sed interdum ligula volutpat non. Nunc eu enim ac neque tempor feugiat. Duis posuere lacus non magna eleifend, non dictum sem feugiat. Duis eleifend condimentum pulvinar.

<panel title="Panel with Scrollbar"> <perfect-scrollbar style="height: 200px"> ... </perfect-scrollbar> </panel>
This is a form textarea. Cancel Action
<panel title="Panel with Toolbar & Footer" noBody="true"> <ng-container beforeBody> <div class="panel-toolbar"> <div class="btn-group m-r-5"> <a class="btn btn-white" href="javascript:;"><i class="fa fa-bold"></i></a> <a class="btn btn-white active" href="javascript:;"><i class="fa fa-italic"></i></a> <a class="btn btn-white" href="javascript:;"><i class="fa fa-underline"></i></a> </div> <div class="btn-group"> <a class="btn btn-white" href="javascript:;"><i class="fa fa-align-left"></i></a> <a class="btn btn-white active" href="javascript:;"><i class="fa fa-align-center"></i></a> <a class="btn btn-white" href="javascript:;"><i class="fa fa-align-right"></i></a> <a class="btn btn-white" href="javascript:;"><i class="fa fa-align-justify"></i></a> </div> </div> </ng-container> <ng-container noBody> <textarea class="form-control no-rounded-corner" rows="5">This is a form textarea.</textarea> </ng-container> <ng-container footer> <a href="javascript:;" class="btn btn-white btn-sm">Cancel</a> <a href="javascript:;" class="btn btn-primary btn-sm m-l-5">Action</a> </ng-container> </panel>
×

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac posuere lacus, quis suscipit sem. Nulla sagittis aliquam erat non convallis.

Panel Content Here

<panel title="Panel with Alert Box"> <ng-container beforeBody> <div class="alert alert-success fade show"> <span class="close" data-dismiss="alert">×</span> <i class="fa fa-check fa-2x pull-left m-r-10"></i> <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac posuere lacus, quis suscipit sem. Nulla sagittis aliquam erat non convallis.</p> </div> </ng-container> <p>Panel Content Here</p> </panel>

### Panel Theme

Panel Content Here

<panel variants="default" title="Panel (Default)">...</panel>

Panel Content Here

<panel variants="success" title="Panel Success">...</panel>

Panel Content Here

<panel variants="warning" title="Panel Warning">...</panel>

Panel Content Here

<panel variants="danger" title="Panel Danger">...</panel>

Panel Content Here

<panel title="Panel Inverse">...</panel>

Panel Content Here

<panel variants="primary" title="Panel Primary">...</panel>

Panel Content Here

<panel variants="info" title="Panel Info">...</panel>

### Full Color Panel Theme

You can customize the panel body / header `background` & `text color` by adding predefined CSS class. E.g `.bg-black`. Full list of available predefined background class can be found here.

Panel Content Here

<panel title="Full Color Panel" bodyClass="bg-dark text-white"> <p>Panel Content Here</p> </panel>

Panel Content Here

<panel variant="primary" title="Full Color Panel" bodyClass="bg-blue text-white"> <p>Panel Content Here</p> </panel>

Panel Content Here

<panel variant="success" title="Full Color Panel" bodyClass="bg-teal text-white"> <p>Panel Content Here</p> </panel>

Panel Content Here

<panel variant="warning" title="Full Color Panel" bodyClass="bg-orange text-white"> <p>Panel Content Here</p> </panel>

Panel Content Here

<panel variant="danger" title="Full Color Panel" bodyClass="bg-red text-white"> <p>Panel Content Here</p> </panel>

Panel Content Here

<panel variant="info" title="Full Color Panel" bodyClass="bg-aqua text-white"> <p>Panel Content Here</p> </panel>