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