Panel

Default

A Panel is a simple container with an optional title.

Panel content 
<section class="Panel ">

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

With Title

Panel Title

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

  </header>

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

Multiple Content Blocks

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

With Action

Panel Title

Change
Panel content

Panel Title

Panel content 
<section class="Panel ">
  <header class="Panel-header">
    <h2 class="Panel-title">
        Panel Title
      </h2>
    <a href="#" class="Panel-action">
      <svg viewBox="0 0 512 512" class="Icon Icon--block">
  <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/>
</svg> Change
    </a>

  </header>

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

<section class="Panel ">
  <header class="Panel-header">
    <h2 class="Panel-title">
        Panel Title
      </h2>
    <button class="Panel-action">
      <svg viewBox="0 0 28 28" class="Icon Icon--block">
        <polygon points="14 9.84 22.84 1 27 5.17 18.16 14 27 22.84 22.84 27 14 18.16 5.17 27 1 22.84 9.84 14 1 5.17 5.17 1 14 9.84" />
      </svg> Delete
    </button>
    <button class="Panel-action">
      <svg viewBox="0 0 512 512" class="Icon Icon--block">
        <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z" />
      </svg> Change
    </button>

  </header>

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

Usage On Light Backgrounds

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 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 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 class="Panel-header">
      <h2 class="Panel-title">
        Panel Title
      </h2>

    </header>

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

Error

If you need to use a Panel to display an error, the Panel--error modifier class will apply alternate styling to highlight the error.

⚠️ Error

Panel content 
<section class="Panel Panel--error">
  <header class="Panel-header">
    <h2 class="Panel-title">
        ⚠️ Error
      </h2>

  </header>

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