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.

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

<div class="panel">
  <div class="media">
    <div class="media__left">
      <div class="image is-small-square">
        <svg width="100%" height="100%" viewBox="0 0 100 100" class="has-bg-light"></svg>
      </div>
    </div>
    <div class="media__content">
      <p>
        <strong>CSS Orbit</strong>
        <small>@orbitcss</small>
        <small class="is-float-right">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 class="media__right">
      <button class="button--close"></button>
    </div>
  </div>
</div>
</> Show code
Copy

Colors

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

<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

CSS variables

Override the default panel styling with CSS variables.

.panel {
  --border-radius: 4px;
  --box-shadow: 0 0 10px 0 hsl(0deg, 0%, 4%, 0.21);
  --padding: 1rem;
}
Copy

Sass variables

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