Panel
A container to separate or highlight content
The panel element is a simple padded container with a border and shadow. Use panels to separate, highlight, or group content.
Turnover USD (month)
$421.64
~$568.94 AUD ($1.34934 EXR)
<div class="panel">
<h6>Turnover USD (month)</h6>
<h3>$421.64</h3>
<hr>
<small>~$568.94 AUD ($1.34934 EXR)</small>
</div>
Panels are full width containers and work best when used alongside OrbitCSS' grids.
Destry Alexandrine Yates
@iloveseed
27m ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
<div class="panel">
<div class="media">
<div class="media__left">
<div class="image is-small-square">
<img src="https://orbitcss.com/img/destry.jpg">
</div>
</div>
<div class="media__content">
<p>
<strong>Destry Alexandrine Yates</strong>
<small>@iloveseed</small>
<small>27m ago</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
</div>
</div>
</div>
</> Show code Colors
You can use the color palette has-bg-*
and has-text-*
modifiers to easily style a panel.
New users
200
+15% From Previous MonthTotal Orders
14,000
-12% From Previous MonthWebsite visits
75,000
+25% From Previous Month<div class="panel has-bg-primary has-text-white">
...
</div>
<div class="panel has-bg-danger has-text-white">
...
</div>
<div class="panel has-bg-success has-text-white">
...
</div>
Variables
The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.
| Variable | Type | Default Value |
|---|---|---|
| $panel-radius | units | 4px |
| $panel-shadow | box-shadow | 0 0 10px 0 rgba(10, 10, 10, 0.21) |
| $panel-padding | units | 1rem |