big-news
The big news card is a series of independent areas designed to give newsrooms control of the volume depending on what they have. Each zone is managed separately and nothing is required. Because the card needs to be so flexible, yet stable, it’s set up with the CSS Grid instead of Flexbox. By also including the number of children for each grid item in a data-children=X attribute, we can use the Grid to iterate the design more easily as we see how newsrooms use it.
EXAMPLE
HURRICANE FLORENCE
LATEST NEWS
Hurrican Irma makes landfall in the Carribean: where's she headed next
Hurricane Irma's menacing eye strenghens
HTML
<section class="big-news paper">
<a href="#" class="label"><h5 class="impact">HURRICANE FLORENCE</h5></a>
<h5 class="latest">LATEST NEWS</h5>
<div class="grid" data-children="3">
<article class="package">
<h3><a href="#">Looking for water or gas? Here are some places that have them </a></h3>
<time>February 23, 2018 2PM</time>
</article>
<article class="package">
<h3><a href="#">Hurrican Irma makes landfall in the Carribean: where's she headed next</a></h3>
<time>February 23, 2018 2PM</time>
</article>
<article class="package">
<h3><a href="#">Hurricane Irma's menacing eye strenghens</a></h3>
<time>February 23, 2018 2PM</time>
</article>
</div>
<div class="package">
<h1 class="h1"><a href="#">Hurricane Florence now a Category 4 — state of emergency declared</a></h1>
</div>
<figure>
<a href="#"><img src="https://www.mcclatchydc.com/latest-news/2dp7ij/picture218293685/alternates/LANDSCAPE_1140/Flood_td_103_LEDE.JPG"></a>
<figcaption>Officers carry June Loch to dry land after she was rescued from her home in the Pine Glen subdivision of Columbia, S.C. on Oct. 5, 2015. Record rainfall that October triggered floods that killed at least 19 people in South Carolina and caused extensive damage to neighborhoods that had never flooded before. Despite that disaster, only 9 percent of South Carolina households had purchased flood insurance by May of last year. <span class="byline"><a href="#">Tim Dominick</a></span></figcaption>
</figure>
<div class="grid featured" data-children="3">
<article class="card">
<figure>
<a href="#"><img src="https://www.mcclatchydc.com/news/nation-world/national/7g1ahc/picture174166396/alternates/LANDSCAPE_640/Hurricane%20Irma%202"></a>
</figure>
<div class="package">
<h3><a href="#">Looking for water or gas? Here are some places that have them </a></h3>
<time>February 23, 2018 2PM</time>
</div>
</article>
<article class="card">
<figure>
<a href="#"><img src="https://www.miamiherald.com/news/weather/hurricane/c3x8sb/picture172257337/alternates/LANDSCAPE_640/Coconut%20Grove%20Irma%2004%20EKM%20(1)"></a>
</figure>
<div class="package">
<h3><a href="#">Hurrican Irma makes landfall in the Carribean: where's she headed next</a></h3>
<time>February 23, 2018 2PM</time>
</div>
</article>
<article class="card">
<figure>
<a href="#"><img src="https://www.mcclatchydc.com/news/nation-world/national/w763tv/picture172700996/alternates/LANDSCAPE_640/AP_17254522905028"></a>
</figure>
<div class="package">
<h3><a href="#">Hurrican Irma makes landfall in the Carribean: where's she headed next</a></h3>
<time>February 23, 2018 2PM</time>
</div>
</article>
</div>
</section>