Panels | Porto Admin - Responsive HTML5 Template 1.4.1

- 3
- 4
- 3

John Doe Junior administrator

## Panels

### Basic

By default, all the `.panel` does is apply some basic border and padding to contain some content.

Content.

### Panel with Heading

Easily add a heading container to your panel with `.panel-heading`. You may also include any `h1` - `h6` with a `.panel-title` class to add a pre-styled heading.

## Title

Content.

## Title

Subtitle

Content.

### Panel with Footer

Wrap buttons or secondary text in `.panel-footer`. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Content.

### Panel Collapsed by Default

Add `.panel-collapsed` class to the panel.

## Title

Content.

## Title

Content.

### Panel Featured

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

## Title

`.panel-featured`

## Title

Subtitle

`.panel-featured`

## Title

`.panel-featured.panel-featured-primary`

## Title

Subtitle

`.panel-featured.panel-featured-primary`

## Title

`.panel-featured.panel-featured-success`

## Title

Subtitle

`.panel-featured.panel-featured-success`

## Title

`.panel-featured.panel-featured-warning`

## Title

Subtitle

`.panel-featured.panel-featured-warning`

## Title

`.panel-featured.panel-featured-danger`

## Title

Subtitle

`.panel-featured.panel-featured-danger`

## Title

`.panel-featured.panel-featured-info`

## Title

Subtitle

`.panel-featured.panel-featured-info`

## Title

`.panel-featured.panel-featured-dark`

## Title

Subtitle

`.panel-featured.panel-featured-dark`

## Contextual Alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

## Title

`.panel-primary`

## Title

Subtitle

`.panel-primary`

## Title

`.panel-success`

## Title

Subtitle

`.panel-success`

## Title

`.panel-warning`

## Title

Subtitle

`.panel-warning`

## Title

`.panel-danger`

## Title

Subtitle

`.panel-danger`

## Title

`.panel-info`

## Title

Subtitle

`.panel-info`

## Title

`.panel-dark`

## Title

Subtitle

`.panel-dark`

### Panel Transparent

Set the panel to transparent background.

## Title

Content.

## Title

Subtitle

Content.