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

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