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>