Series

The series layout features several overlapping elements.

• The Hero image serves as a background for the top section of the page. Pass in the image URL with the custom property --image.
• The Nav sits above the Hero an aligns to the top/right of the page.
• The Logo sits above the Nav and is positioned to the left.
• The Promo section includes content related to the Hero image and sits above the Hero and aligns to the bottom/left.
• The Main section appears after the Hero and includes the rest of the page content.

Example
A visualization of the Series layout. (Areas are not to scale.)

<div class="lwj-layout-series">
  <div data-grid-area="logo">...</div>
  <nav data-grid-area="nav">...</nav>
  <div data-grid-area="hero" style="--image: url('jason-hero.jpg')">...</div>
  <div data-grid-area="promo">...</div>
  <main data-grid-area="main">...</main>
</div>