Error
While not always necessary, sometimes you need to put your content into a box. For those situations, try the panel component.
The easiest way to make a panel in Rock is to use the Panel lava shortcode.
{[ panel title:'Important Stuff' icon:'fa fa-star' ]} This is a super simple panel. {[ endpanel ]}
.panel-block
.panel-body
.panel-heading
For advanced usage of the panel, creating the HTML by hand is required.
Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.
.table
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.
<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading"> <h1 class="panel-title"><i class="fa fa-star"></i> Panel heading</h1> </div> <div class="panel-body"> <p>...</p> </div> <!-- Table --> <table class="table"> ... </table> </div>
If there is no panel body, the component moves from panel header to table without interruption.
<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading"><h1 class="panel-title"><i class="fa fa-star"></i> Panel heading</h1></div> <!-- Table --> <table class="table"> ... </table> </div>