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>
Copy

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_profile.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
Copy

Colors

You can use the color palette has-bg-* and has-text-* modifiers to easily style a panel.


New users

200

+15% From Previous Month
Total orders

14,000

-12% From Previous Month
Website 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>
Copy

Variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.


VariableTypeDefault value
$panel-radiusunits4px
$panel-shadowbox-shadow0 0 10px 0 rgba(10, 10, 10, 0.21)
$panel-paddingunits1rem