Story block variation 2
Used in series siderail. Implementation the c-story-block--stacked modifier (no columns at any viewport.) We document these here in the off-chance that the flatblock content is wiped-out. The contents of the block might get out of sync, but the layout classes should remain similar to what's documented here.
Live example
No specific class used here. See code view for details.
<ul style="max-width: 310px;">
<li class="has-xl-btm-marg">
<section class="c-story-block c-story-block--stack">
<div class="c-story-block__text">
<h2 class="is-sr-only">Boomtown, Flood Town</h2>
<p class="t-serif t-links t-size-s"> Climate change will bring more frequent and fierce rainstorms to cities like Houston. But unchecked development remains a priority in the famously un-zoned city, creating short-term economic gains for some while increasing flood risks for everyone. <a class="t-uppercase t-size-xxs t-lsp-m t-sans l-display-ib" href="https://houston.texastribune.org/boomtown-floodtown/">Full Story<span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#long-arrow-right"></use></svg></span></a></p>
</div>
<figure class="c-story-block__image-wrap">
<h2 class="c-story-block__headline t-serif t-lh-s t-lsp-s t-links-underlined-hover has-tiny-btm-marg" aria-hidden="true"><a
href="https://houston.texastribune.org/boomtown-floodtown/" class="has-text-black-off">Boomtown, Flood Town</a></h2>
<a href="https://houston.texastribune.org/boomtown-floodtown/" tabindex="-1">
<img class="l-display-block l-width-full" src="/queso-ui/img/story-block/c-story-block-flood-map.jpg" alt="Map of Houston area waterways">
</a>
</figure>
</section>
</li>
<li class="has-xl-btm-marg">
<section class="c-story-block c-story-block--stack">
<div class="c-story-block__text">
<h2 class="is-sr-only">Hell and High Water</h2>
<p class="t-serif t-links t-size-s"> Houston is the fourth-largest city in the country. It's home to the nation's largest refining and petrochemical complex, where billions of gallons of oil and dangerous chemicals are stored. And it's a sitting duck for the next big hurricane. Learn why Texas isn't ready. <a class="t-uppercase t-size-xxs t-lsp-m t-sans l-display-ib" href="https://houston.texastribune.org/hell-and-high-water/">Full Story<span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#long-arrow-right"></use></svg></span></a></p>
</div>
<figure class="c-story-block__image-wrap">
<h2 class="c-story-block__headline t-serif t-lh-s t-lsp-s t-links-underlined-hover has-tiny-btm-marg" aria-hidden="true"><a
href="https://houston.texastribune.org/hell-and-high-water/" class="has-text-black-off">Hell and High Water</a></h2>
<a href="https://houston.texastribune.org/hell-and-high-water/" tabindex="-1">
<img class="l-display-block l-width-full" src="/queso-ui/img/story-block/c-story-block-flood-map-2.jpg" alt="Map showing potential water levels of flooding in Houston suburbs, Seabrook, League City, and Clear Lake home to Johnson Space Center">
</a>
</figure>
</section>
</li>
</ul>
This class isn't referenced anywhere