Panel

A Panel is a simple container with an optional title.

Panel content
<section class="Panel ">

  <div class="Panel-content ">
    Panel content
  </div>
</section>

Panel Title

Panel content
<section class="Panel ">
  <header>
    <h2 class="Panel-title">
        Panel Title
      </h2>
  </header>

  <div class="Panel-content ">
    Panel content
  </div>
</section>

The Panel uses a transparent black for borders and backgrounds so it can be used on different light backgrounds, but it works best on a white background.

Panel Title

Panel content

Panel Title

Panel content

Panel Title

Panel content
<div class="u-pad">

  <section class="Panel ">
    <header>
      <h2 class="Panel-title">
        Panel Title
      </h2>
    </header>

    <div class="Panel-content ">
      Panel content
    </div>
  </section>
</div>
<div class="u-pad u-bgSilver">

  <section class="Panel ">
    <header>
      <h2 class="Panel-title">
        Panel Title
      </h2>
    </header>

    <div class="Panel-content ">
      Panel content
    </div>
  </section>
</div>
<div class="u-pad u-bgYellow">

  <section class="Panel ">
    <header>
      <h2 class="Panel-title">
        Panel Title
      </h2>
    </header>

    <div class="Panel-content ">
      Panel content
    </div>
  </section>
</div>