## Skin Options

### Skin Colour

## Panels Bootstrap + More Context

### Basic Example

Basic panel example

### 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. However, the font sizes of `<h1>`-`<h6>` are overridden by `.panel-heading`.

For proper link coloring, be sure to place links in headings within `.panel-title`.

Panel heading without title
Panel content

### Panel title

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

### Panel title

Panel content

### Contextual Alternatives

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

### Panel title

Panel content

### Panel title

Panel content

### Panel title

Panel content

### Panel title

Panel content

### Panel title

Panel content

### Panel title

Panel content

### Panel title

Panel content

### Panel title

Panel content

### With Tables

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

If there is no panel body, the component moves from panel header to table without interruption

Panel heading

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

### With List Groups

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

## Widget Boxes Varello Exclusive

Widget Boxes are similar to panels, but have different padding and housing which is better suited to widget-style content. It also has a larger shaded-top border.

### Basic Example

Basic Widget Box Example

### Widget With Header

Easily add a header container to your widget with `.widget-header`. Unlike panels, Widget Headers (not headings) are consistent so that the user begins to easily associate the sizing with a widget-style element.

Content

### Widget With Actions

You can include a set of actions within any widget using `.widget-header-actions`. This allows you to add close, configuration or any other times of buttons.

### Contextual Alternatives

Widget boxes have just as many contextual alternatives as panels. Unlike a panel, however, the entire widget box changes colour to suit the context. This is so that all information is presented in the specified context, not just the header.

Content
Content
Content
Content
Content
Content
Content
Content
Content
Content

### With Tables

Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

If there is no widget body, the table still seats nicely in the widget box.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

### With List Groups

Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros