To break out of the panel body's left and right padding, use a hx-panel-section with the is-fill-to-edges modifier class.
The panel footer adds margins to any hx-buttons within in the footer.
These examples do not illustrate the scrollable panel body (hx-panel-body). The panel body will scroll if the contents of the panel body exceeds the parent container (minus the header and footer)
<div class="hx-panel">
<div class="hx-panel-header has-fixed-height">
<div class="hx-panel-header-row">
<div class="hx-panel-header-heading">
<i class="hx-icon icon-file-outline is-heading-icon"></i>
<div class="hx-panel-header-heading-text">
<div class="h2">
Letter Creator
</div>
</div>
</div>
<div class="hx-panel-header-row-actions">
<a class="hx-button is-small is-white px-1">
<i class="hx-icon is-medium icon-close-empty"></i>
</a>
</div>
</div>
<div class="hx-panel-header-row has-search hx-flex-column">
<div class="hx-input-group">
<i class="hx-icon icon-search"></i>
<div class="hx-input-control">
<input class="hx-input" type="text" required="">
<label class="hx-label"></label>
<div class="hx-help"></div>
</div>
</div>
</div>
</div>
<div class="hx-panel-body">
<h3>Drafts</h3>
<table class="hx-table is-hover mb-0">
<thead>
<tr>
<th>Letter</th>
<th>Last Modified</th>
<th>Practitioner</th>
<th>Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Blank letter</td>
<td>Nurse Nunez</td>
<td>Dr Dean Doco</td>
<td>03/01/2019</td>
<td><i class="hx-icon icon-edit"></i></td>
</tr>
<tr>
<td>Specialist referral</td>
<td>Nurse Namma</td>
<td>Dr Sally Surgeon</td>
<td>06/01/2019</td>
<td><i class="hx-icon icon-edit"></i></td>
</tr>
</tbody>
</table>
<h3>Favourites</h3>
<div class="hx-card">
<ul class="hx-list-group">
<li class="">
<a>
<div class="hx-list-content">Cras justo odio</div>
<div class="hx-list-action">
<button class="hx-button is-flat"><span class="hx-icon-control"><i class="hx-icon icon-star"></i></span></button>
</div>
</a>
</li>
<li class="">
<a>
<div class="hx-list-content">Dapibus ac facilisis in</div>
<div class="hx-list-action">
<button class="hx-button is-flat"><span class="hx-icon-control"><i class="hx-icon icon-star"></i></span></button>
</div>
</a>
</li>
<li class="">
<a>
<div class="hx-list-content">Morbi leo risus</div>
<div class="hx-list-action">
<button class="hx-button is-flat"><span class="hx-icon-control"><i class="hx-icon icon-star"></i></span></button>
</div>
</a>
</li>
<li class="">
<a>
<div class="hx-list-content">Phasellus sem tortor, consectetur sit amet ex non, varius rhoncus neque.</div>
<div class="hx-list-action">
<button class="hx-button is-flat"><span class="hx-icon-control"><i class="hx-icon icon-star"></i></span></button>
</div>
</a>
</li>
<li class="">
<a>
<div class="hx-list-content">Vestibulum at eros</div>
<div class="hx-list-action">
<button class="hx-button is-flat"><span class="hx-icon-control"><i class="hx-icon icon-star"></i></span></button>
</div>
</a>
</li>
</ul>
</div>
<h3>
<div class="is-flex hx-flex-align-center hx-flex-justify-between">
<div class="h3">WorkCover Certificates</div>
<i class="hx-icon is-medium icon-angle-right"></i>
</div>
</h3>
</div>
</div>
| Letter | Last Modified | Practitioner | Created | Actions |
|---|---|---|---|---|
| Blank letter | Nurse Nunez | Dr Dean Doco | 03/01/2019 | |
| Specialist referral | Nurse Namma | Dr Sally Surgeon | 06/01/2019 |
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer libero mi, fermentum non eleifend eu, scelerisque ut risus. Nullam accumsan metus a magna pretium, vitae malesuada nisl sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac eros sit amet diam mattis porttitor ut vitae nulla. Nulla non ligula mattis, hendrerit urna eu, aliquet mauris. Sed vulputate tempor mauris at aliquam. Integer porta nibh tincidunt tortor tincidunt, vel dignissim quam dignissim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer libero mi, fermentum non eleifend eu, scelerisque ut risus. Nullam accumsan metus a magna pretium, vitae malesuada nisl sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac eros sit amet diam mattis porttitor ut vitae nulla. Nulla non ligula mattis, hendrerit urna eu, aliquet mauris. Sed vulputate tempor mauris at aliquam. Integer porta nibh tincidunt tortor tincidunt, vel dignissim quam dignissim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer libero mi, fermentum non eleifend eu, scelerisque ut risus. Nullam accumsan metus a magna pretium, vitae malesuada nisl sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac eros sit amet diam mattis porttitor ut vitae nulla. Nulla non ligula mattis, hendrerit urna eu, aliquet mauris. Sed vulputate tempor mauris at aliquam. Integer porta nibh tincidunt tortor tincidunt, vel dignissim quam dignissim.
| Letter | Practitioner |
|---|---|
| Blank letter | Nurse Nunez |
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer libero mi, fermentum non eleifend eu, scelerisque ut risus. Nullam accumsan metus a magna pretium, vitae malesuada nisl sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac eros sit amet diam mattis porttitor ut vitae nulla. Nulla non ligula mattis, hendrerit urna eu, aliquet mauris. Sed vulputate tempor mauris at aliquam. Integer porta nibh tincidunt tortor tincidunt, vel dignissim quam dignissim.