Panels
Basic example
Basic panel example
<panel type="default">Basic panel example</panel>
Panel with heading
Panel title
Panel content
<panel type="default" title="Panel title"> Panel content </panel>
Panel with subtitle
Panel title
Panel subtitlePanel content
<panel type="default" title="Panel title" subtitle="Panel subtitle"> Panel content </panel>
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 type="primary" title="Panel title">Panel content</panel> <panel type="success" title="Panel title">Panel content</panel> <panel type="info" title="Panel title">Panel content</panel> <panel type="warning" title="Panel title">Panel content</panel> <panel type="danger" title="Panel title">Panel content</panel>
With tables
Add any non-bordered table within a panel for a seamless design. If there is a no-body attribute, we add an extra border to the top of the table for separation.
Panel title
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 |
<panel type="default" title="Panel title" no-body="true"> <panel-body>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.</panel-body> ^ # ^ First Name ^ Last Name ^ Username ^ ^ 1 | Mark | Otto | @mdo | ^ 2 | Jacob | Thornton | @fat | ^ 3 | Larry | the Bird | @twitter | </panel>
If there is no panel body, the component moves from panel header to table without interruption.
Panel title
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<panel type="default" title="Panel title" no-body="true"> ^ # ^ First Name ^ Last Name ^ Username ^ ^ 1 | Mark | Otto | @mdo | ^ 2 | Jacob | Thornton | @fat | ^ 3 | Larry | the Bird | @twitter | </panel>
With list groups
Easily include full-width list groups within any panel.
Panel title
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.
<panel type="default" title="Panel title" no-body="true"> <panel-body>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.</panel-body> <list-group> * Cras justo odio * Dapibus ac facilisis in * Morbi leo risus * Porta ac consectetur ac * Vestibulum at eros </list-group></panel>
With icons
Panel title
Panel subtitlePanel content
<panel type="default" title="Panel title" subtitle="Panel subtitle" icon="glyphicon glyphicon-home"> Panel content </panel>
Attributes
| Attribute | Default Value | Allowed Values | Description |
|---|---|---|---|
type | default | default, primary, success, info, warning, danger | Type of panel |
title | optional | Title of panel | |
subtitle | optional | Subtitle of panel | |
icon | optional | Font icon class (eg. Glyphicon or Font-Awesome) | |
no-body | optional | Don't add a panel body. Useful to add other particular tags (or tables) inside a panels |
Giuseppe Di Terlizzi