Panel
Overview
Use the .bsk-panel class to display information that is distinct from main content, but which is shown within it.
You must pick a variant for each
panel, otherwise it will look strange. It is not enough to use .bsk-panel on its own.
See the Sidebar component to display information that is distinct from main content, but which is shown next to it.
See the Thumbnail component to display media items that are distinct from main content, but which is shown within it.
Heads up! Panel elements are not yet fully styled, but will be in the next version of the Style Kit.
Variants
Default panel
Add the .bsk-panel-default class for standard panels. For added context you can use
contextual colours.
<div class="bsk-panel bsk-panel-default">
<main class="bsk-panel-body">
Default panel example
</main>
</div>A more typical example includes a header.
Default panel example title
<div class="bsk-panel bsk-panel-default">
<header class="bsk-panel-heading">
<h3 class="bsk-panel-title">Default panel example title</h3>
</header>
<main class="bsk-panel-body">
Default panel example body
</main>
</div>Primary panel
Add the .bsk-panel-primary class for the most important panel, where there is more than one.
Primary panel example title
<div class="bsk-panel bsk-panel-primary">
<header class="bsk-panel-heading">
<h3 class="bsk-panel-title">Primary panel example title</h3>
</header>
<main class="bsk-panel-body">
Primary panel example body
</main>
</div>Contextual colours
The standard contextual colours can be used for context by adding these classes:
| Standard Context | Panel Contextual Class |
|---|---|
| Success | .bsk-panel-success |
| Warning | .bsk-panel-warning |
| Danger | .bsk-panel-danger |
| Info | .bsk-panel-info |
Success panel example title
Warning panel example title
Danger panel example title
Info panel example title
<div class="bsk-panel bsk-panel-success">
<header class="bsk-panel-heading">
<h3 class="bsk-panel-title">Success panel example title</h3>
</header>
<main class="bsk-panel-body">
Success panel example body
</main>
</div>
<div class="bsk-panel bsk-panel-warning">
<header class="bsk-panel-heading">
<h3 class="bsk-panel-title">Warning panel example title</h3>
</header>
<main class="bsk-panel-body">
Warning panel example body
</main>
</div>
<div class="bsk-panel bsk-panel-danger">
<header class="bsk-panel-heading">
<h3 class="bsk-panel-title">Danger panel example title</h3>
</header>
<main class="bsk-panel-body">
Danger panel example body
</main>
</div>
<div class="bsk-panel bsk-panel-info">
<header class="bsk-panel-heading">
<h3 class="bsk-panel-title">Info panel example title</h3>
</header>
<main class="bsk-panel-body">
Info panel example body
</main>
</div>Components
Body
Use .bsk-panel-body class on a <main> element within a panel for its contents.
<div class="bsk-panel bsk-panel-default">
<main class="bsk-panel-body">
Example panel body
</main>
</div>Header
Use the .bsk-panel-heading class on a <header> element within a panel to add a header.
Use the .bsk-panel-title class on a heading element to correctly
style links within panel headings.
Example panel title
Example panel title
<div class="bsk-panel bsk-panel-default">
<header class="bsk-panel-heading">
<h3 class="bsk-panel-title">Example panel title</h3>
</header>
</div>
<div class="bsk-panel bsk-panel-default">
<header class="bsk-panel-heading">
<h3 class="bsk-panel-title">Example panel title</h3>
</header>
<main class="bsk-panel-body">
Default panel example body
</main>
</div>Footer
Use .bsk-panel-footer class on a <footer> element within a panel to add a footer.
Panel footers don’t inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
<div class="bsk-panel bsk-panel-default">
<footer class="bsk-panel-footer">
Example panel footer
</footer>
</div>
<div class="bsk-panel bsk-panel-default">
<main class="bsk-panel-body">
Default panel example body
</main>
<footer class="bsk-panel-footer">
Example panel footer
</footer>
</div>Table
Tables can be added to panels directly. Providing table borders aren’t used they will look seamless, a dividing border will be added automatically if a panel body is used.
Don’t put tables within panel bodies, as they may look strange.
| Name | Location |
|---|---|
| Ny-Ålesund | Svalbard, High Arctic |
| Rothera | Adelaide Island, Antarctica |
| Halley VI | Brunt Ice Shelf, Antarctica |
| Name | Location |
|---|---|
| Ny-Ålesund | Svalbard, High Arctic |
| Rothera | Adelaide Island, Antarctica |
| Halley VI | Brunt Ice Shelf, Antarctica |
<div class="bsk-panel bsk-panel-default">
<table class="bsk-table">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ny-Ålesund</td>
<td>Svalbard, High Arctic</td>
</tr>
<tr>
<td>Rothera</td>
<td>Adelaide Island, Antarctica</td>
</tr>
<tr>
<td>Halley VI</td>
<td>Brunt Ice Shelf, Antarctica</td>
</tr>
</tbody>
</table>
</div>
<div class="bsk-panel bsk-panel-default">
<main class="bsk-panel-body">
Example panel body
</main>
<table class="bsk-table">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ny-Ålesund</td>
<td>Svalbard, High Arctic</td>
</tr>
<tr>
<td>Rothera</td>
<td>Adelaide Island, Antarctica</td>
</tr>
<tr>
<td>Halley VI</td>
<td>Brunt Ice Shelf, Antarctica</td>
</tr>
</tbody>
</table>
</div>List group
List groups can be added to panels directly. A dividing border will be added automatically if a panel body is used.
Don’t put list groups within panel bodies, as they may look strange.
- List group item
- Another list group item
- List group item
- Another list group item
<div class="bsk-panel bsk-panel-default">
<ul class="bsk-list-group">
<li class="bsk-list-group-item">List group item</li>
<li class="bsk-list-group-item">Another list group item</li>
</ul>
</div>
<div class="bsk-panel bsk-panel-default">
<main class="bsk-panel-body">
Example panel body
</main>
<ul class="bsk-list-group">
<li class="bsk-list-group-item">List group item</li>
<li class="bsk-list-group-item">Another list group item</li>
</ul>
</div>