<lab-panel>

The lab panel custom element was created for The Fresno Bee Education Lab landing page. It leverages molecules already installed on the websites and enhances them using the Shadow DOM. The component changes the font face to McClatchy Sans, provides a full-bleed container that can be styled on the page, and an <img> tag included inside the element will both fill the container and be filtered to allow for text to be rendered over it.

Example

<script async src="https://media.mcclatchy.com/labs/lab-panel.js"></script>
<lab-panel>
  <h3 class="h2">The Team</h3>
  <p>Lorem ipsum ...</p>
</lab-panel>

Example with an image

The Team

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis arcu et enim egestas luctus a a dui. Vestibulum ac gravida turpis, et ultricies lectus. Praesent sed mattis felis. Quisque laoreet odio quis dui faucibus imperdiet. Ut quis convallis risus, vitae porttitor odio. Aenean consequat lacinia ante vitae luctus. Donec mattis semper risus. Pellentesque consectetur viverra eros sit amet luctus. Quisque vulputate feugiat elementum.

<script async src="https://media.mcclatchy.com/labs/lab-panel.js"></script>
<lab-panel class="fill">
  <img src="https://www.fresnobee.com/news/local/education/bdet9o/picture21525414/alternates/FREE_1140/graduation">
  <h3 class="h2">The Team</h3>
  <p>Lorem ipsum ...</p>
</lab-panel>

The difference between the two is very subtle and manual, but that is a good thing. Adding the .fill class to the component itself creates the filtered cover effect. This approach lets us stack images in the panel if desired by simply omitting the class.