series-nav
The series nav is a visual tool to link stories together than may or may not be part of the same section or publication. The code is just an expander molecule with a little additional styling for the text.
Example
MORE FROM THIS SERIES
Series headline goes here
Nullam ultricies hendrerit est a bibendum. Suspendisse scelerisque vitae nisi et consequat. Vivamus cursus vitae ante eu tristique. Sed nec velit maximus diam laoreet venenatis.
EXPAND ALL
_Bumper_REV2.00_01_04_16.Still007.jpg)
HTML
<div class="series-nav package story-module">
<h5>MORE FROM THIS SERIES</h5>
<hr>
<h3>Series headline goes here</h3>
<p class="summary">Nullam ultricies hendrerit est a bibendum. Suspendisse scelerisque vitae nisi et consequat. Vivamus cursus vitae ante eu tristique. Sed nec velit maximus diam laoreet venenatis.</p>
<div class="package">
<h5 class="expander" onclick="this.classList.toggle('open')">EXPAND ALL</h5>
<div class="package">
<a class="article" href="#">
<figure>
<img src="https://www.miamiherald.com/latest-news/722q03/picture222631695/alternates/LANDSCAPE_160/Keyframe1_MH.jpg" loading="lazy">
</figure>
<h4>Women are fleeing Venezuela for a better life. They’re turning up dead.</h4>
</a>
<a class="article" href="#">
<figure>
<img src="https://www.miamiherald.com/latest-news/gj3f9s/picture222628815/alternates/LANDSCAPE_160/Keyframe2.png" loading="lazy">
</figure>
<h4>They left Venezuela with dreams. They were met with forced prostitution — and their deaths</h4>
</a>
<a class="article" href="#">
<figure>
<img src="https://www.miamiherald.com/latest-news/6s0zku/picture222627840/alternates/LANDSCAPE_160/Miami%20(Cruise)_Bumper_REV2.00_01_04_16.Still007.jpg" loading="lazy">
</figure>
<h4>They want justice after their daughters were killed abroad. But it’s like the murders never happened</h4>
</a>
</div>
</div>
<hr>
</div>