1====== Panels ======
2
3===== Basic example =====
4
5<panel type="default">Basic panel example</panel>
6\\
7<code html5><panel type="default">Basic panel example</panel></code>
8
9===== Panel with heading =====
10
11<panel type="default" title="Panel title">
12Panel content
13</panel>
14\\
15<code html5><panel type="default" title="Panel title">
16Panel content
17</panel></code>
18
19===== Panel with subtitle =====
20
21<panel type="default" title="Panel title" subtitle="Panel subtitle">
22Panel content
23</panel>
24\\
25<code html5><panel type="default" title="Panel title" subtitle="Panel subtitle">
26Panel content
27</panel></code>
28
29===== Contextual alternatives =====
30
31Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
32
33<panel type="primary" title="Panel title">Panel content</panel>
34<panel type="success" title="Panel title">Panel content</panel>
35<panel type="info" title="Panel title">Panel content</panel>
36<panel type="warning" title="Panel title">Panel content</panel>
37<panel type="danger" title="Panel title">Panel content</panel>
38\\
39<code html5>
40<panel type="primary" title="Panel title">Panel content</panel>
41<panel type="success" title="Panel title">Panel content</panel>
42<panel type="info" title="Panel title">Panel content</panel>
43<panel type="warning" title="Panel title">Panel content</panel>
44<panel type="danger" title="Panel title">Panel content</panel>
45</code>
46
47===== With tables =====
48
49Add 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.
50
51<panel type="default" title="Panel title" no-body="true">
52<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>
53^ # ^ First Name ^ Last Name ^ Username ^
54^ 1 | Mark       | Otto	     | @mdo     |
55^ 2 | Jacob      | Thornton  | @fat     |
56^ 3 | Larry      | the Bird  | @twitter |
57</panel>
58
59\\
60
61<code html5><panel type="default" title="Panel title" no-body="true">
62<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>
63^ # ^ First Name ^ Last Name ^ Username ^
64^ 1 | Mark       | Otto	     | @mdo     |
65^ 2 | Jacob      | Thornton  | @fat     |
66^ 3 | Larry      | the Bird  | @twitter |
67</panel></code>
68
69If there is no panel body, the component moves from panel header to table without interruption.
70
71<panel type="default" title="Panel title" no-body="true">
72^ # ^ First Name ^ Last Name ^ Username ^
73^ 1 | Mark       | Otto	     | @mdo     |
74^ 2 | Jacob      | Thornton  | @fat     |
75^ 3 | Larry      | the Bird  | @twitter |
76</panel>
77
78\\
79
80<code html5><panel type="default" title="Panel title" no-body="true">
81^ # ^ First Name ^ Last Name ^ Username ^
82^ 1 | Mark       | Otto	     | @mdo     |
83^ 2 | Jacob      | Thornton  | @fat     |
84^ 3 | Larry      | the Bird  | @twitter |
85</panel></code>
86
87===== With list groups =====
88
89Easily include full-width [[list-group|list groups]] within any panel.
90
91<panel type="default" title="Panel title" no-body="true">
92<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>
93<list-group>
94  * Cras justo odio
95  * Dapibus ac facilisis in
96  * Morbi leo risus
97  * Porta ac consectetur ac
98  * Vestibulum at eros
99</list-group></panel>
100
101\\
102
103<code html5><panel type="default" title="Panel title" no-body="true">
104<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>
105<list-group>
106  * Cras justo odio
107  * Dapibus ac facilisis in
108  * Morbi leo risus
109  * Porta ac consectetur ac
110  * Vestibulum at eros
111</list-group></panel></code>
112
113
114===== With icons =====
115
116<panel type="default" title="Panel title" subtitle="Panel subtitle" icon="glyphicon glyphicon-home">
117Panel content
118</panel>
119\\
120<code html5><panel type="default" title="Panel title" subtitle="Panel subtitle" icon="glyphicon glyphicon-home">
121Panel content
122</panel></code>
123
124
125==== Attributes ====
126
127^ Attribute    ^ Default Value ^ Allowed Values ^ Description ^
128| ''type''     | ''default'' | ''default'', ''primary'', ''success'', ''info'', ''warning'', ''danger'' | Type of panel |
129| ''title''    | optional | | Title of panel |
130| ''subtitle'' | optional | | Subtitle of panel |
131| ''icon''     | optional | | Font icon class (eg. Glyphicon or Font-Awesome) |
132| ''no-body''  | optional | | Don't add a panel body. Useful to add other particular tags (or tables) inside a panels |
133