The default panel is simply some content.

<div class="c-panel ">
  <div class="c-panel__content">
    <p>Atmospheric chemist Professor Alastair Lewis argues that clean air should be the engine of economic growth in <a href="https://en.wikipedia.org/wiki/China">China</a>, rather than the brake.</p>
  </div>
</div>

A panel can have a highlight colour:

<div class="c-panel c-panel--highlight">
  <div class="c-panel__content">
    <p>Atmospheric chemist Professor Alastair Lewis argues that clean air should be the engine of economic growth in <a href="https://en.wikipedia.org/wiki/China">China</a>, rather than the brake.</p>
  </div>
</div>

A compact panel can be used in places where space is at a premium:

<div class="c-panel c-panel--compact">
  <div class="c-panel__content">
    <p>Atmospheric chemist Professor Alastair Lewis argues that clean air should be the engine of economic growth in China, rather than the brake.</p>
  </div>
</div>

You can have a header:

<div class="c-panel ">
  <div class="c-panel__header">
    <h5>Air pollution clouds economic growth in China</h5>
  </div>
  <div class="c-panel__content">
    <p>Atmospheric chemist Professor Alastair Lewis argues that clean air should be the engine of economic growth in China, rather than the brake.</p>
  </div>
</div>

And an image:

<div class="c-panel ">
  <div class="c-panel__header">
    <h5>Air pollution clouds economic growth in China</h5>
  </div>
  <div class="c-panel__image">
    <img src="https://picsum.photos/800/400?image=962" alt="">
  </div>
  <div class="c-panel__content">
    <p>Atmospheric chemist Professor Alastair Lewis argues that clean air should be the engine of economic growth in China, rather than the brake.</p>
  </div>
</div>

Or a subheader, under the image:

<div class="c-panel ">
  <div class="c-panel__image">
    <img src="https://picsum.photos/800/400?image=962" alt="">
  </div>
  <div class="c-panel__subheader">
    <h6>How the Chinese could improve the quality of the air they breathe</h6>
  </div>
  <div class="c-panel__content">
    <p>Atmospheric chemist Professor Alastair Lewis argues that clean air should be the engine of economic growth in China, rather than the brake.</p>
  </div>
</div>

And a footer:

<div class="c-panel ">
  <div class="c-panel__header">
    <h5>Air pollution clouds economic growth in China</h5>
  </div>
  <div class="c-panel__image">
    <img src="https://picsum.photos/800/400?image=962" alt="">
  </div>
  <div class="c-panel__content">
    <p>Atmospheric chemist Professor Alastair Lewis argues that clean air should be the engine of economic growth in China, rather than the brake.</p>
  </div>
  <div class="c-panel__footer">
    This article was first published on The Conversation website
  </div>
</div>

And here's the whole lot together:

N.B. Having a header and a subheader is pretty bad. Please avoid.

<div class="c-panel c-panel--default">
  <div class="c-panel__header">
    <h5>Air pollution clouds economic growth in China</h5>
  </div>
  <div class="c-panel__image">
    <img src="https://picsum.photos/800/400?image=962" alt="">
  </div>
  <div class="c-panel__subheader">
    <h6>How the Chinese could improve the quality of the air they breathe</h6>
  </div>
  <div class="c-panel__content">
    <p>Atmospheric chemist Professor Alastair Lewis argues that clean air should be the engine of economic growth in China, rather than the brake.</p>
  </div>
  <div class="c-panel__footer">
    This article was first published on The Conversation website
  </div>
</div>

Link panels

A whole panel can act as a link:

Atmospheric chemist Professor Alastair Lewis argues that clean air should be the engine of economic growth in China, rather than the brake.

Read more

Atmospheric chemist Professor Alastair Lewis argues that clean air should be the engine of economic growth in China, rather than the brake.

Read more

<a href="http://www.york.ac.uk" class="c-panel c-panel--link ">
  <div class="c-panel__content">
    <p>Atmospheric chemist Professor Alastair Lewis argues that clean air should be the engine of economic growth in China, rather than the brake.</p>
    <p class="c-panel__more">Read more</p>
  </div>
</a>
<a href="http://www.york.ac.uk" class="c-panel c-panel--link c-panel--highlight">
  <div class="c-panel__content">
    <p>Atmospheric chemist Professor Alastair Lewis argues that clean air should be the engine of economic growth in China, rather than the brake.</p>
    <p class="c-panel__more">Read more</p>
  </div>
</a>

KIS widget

Lastly, there's a special panel type for displaying the KIS widget. It uses the normal panel markup but with a .c-panel--kis-widget modifier.

Options

Molecules

• panel
  • content: text or HTML to go in the panel itself (required)
  • type: currently not in use
  • header: text or HTML to go in the panel header
  • image: URL of an image to go in the panel
  • subheader: text or HTML to go under the image (probably shouldn't be used in conjunction with header)
  • footer: text or HTML to go under the panel