Story block variation 3
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="c-story-block__headline t-serif t-lh-s t-lsp-s t-links-underlined-hover has-tiny-btm-marg"><a
href="https://www.texastribune.org/series/under-the-dome/" class="has-text-black-off">Mini-documentary series</a></h2>
<p class="t-serif t-links t-size-s"><span class="l-display-block">
Go beyond the business of passing bills to see the personalities and predicaments lawmakers face throughout the session.</span><a class="t-uppercase t-size-xxs t-lsp-m t-sans l-display-ib" href="https://www.texastribune.org/series/under-the-dome/">Subscribe to our YouTube channel</a>
</p>
</div>
<figure class="c-story-block__image-wrap">
<a href="https://www.texastribune.org/series/under-the-dome/" tabindex="-1">
<img class="l-display-block l-width-full" src="/queso-ui/img/story-block/c-story-block-dome.jpg" alt="Texas Capitol dome in the sky.">
</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="c-story-block__headline t-serif t-lh-s t-lsp-s t-links-underlined-hover has-tiny-btm-marg"><a
href="https://www.texastribune.org/directory/" class="has-text-black-off">Elected Officials Directory</a></h2>
<p class="t-serif t-links t-size-s"><span class="l-display-block">
Here's a list of the occupants of the state’s highest offices.</span><a class="t-uppercase t-size-xxs t-lsp-m t-sans l-display-ib" href="https://www.texastribune.org/directory/">See who represents you </a>
</p>
</div>
<figure class="c-story-block__image-wrap">
<a href="https://www.texastribune.org/directory/" tabindex="-1">
<img class="l-display-block l-width-full" src="/queso-ui/img/story-block/c-story-block-gavel.jpg" alt="Gavel resting on table with menu symbol overlaid.">
</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="c-story-block__headline t-serif t-lh-s t-lsp-s t-links-underlined-hover has-tiny-btm-marg"><a
href="https://apps.texastribune.org/features/2019/texas-house-senate-livestreams-86th-legislature/" class="has-text-black-off">Livestream</a></h2>
<p class="t-serif t-links t-size-s"><span class="l-display-block">
Follow the action with our annotated coverage.</span><a class="t-uppercase t-size-xxs t-lsp-m t-sans l-display-ib" href="https://apps.texastribune.org/features/2019/texas-house-senate-livestreams-86th-legislature/">Watch now</a>
</p>
</div>
<figure class="c-story-block__image-wrap">
<a href="https://apps.texastribune.org/features/2019/texas-house-senate-livestreams-86th-legislature/" tabindex="-1">
<img class="l-display-block l-width-full" src="/queso-ui/img/story-block/c-story-block-congressmen.jpg" alt="Male politicians sitting at table in front of microphones with play symbol overlaid.">
</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="c-story-block__headline t-serif t-lh-s t-lsp-s t-links-underlined-hover has-tiny-btm-marg"><a
href="https://www.texastribune.org/about/subscribe/#texas-legislature-weekly" class="has-text-black-off">Newsletter</a></h2>
<p class="t-serif t-links t-size-s"><span class="l-display-block">
Get the latest legislative news in your inbox, delivered weekly on Fridays.</span><a class="t-uppercase t-size-xxs t-lsp-m t-sans l-display-ib" href="https://www.texastribune.org/about/subscribe/#texas-legislature-weekly">Subscribe here</a>
</p>
</div>
<figure class="c-story-block__image-wrap">
<a href="https://www.texastribune.org/about/subscribe/#texas-legislature-weekly" tabindex="-1">
<img class="l-display-block l-width-full" src="/queso-ui/img/story-block/c-story-block-speaker-seat.jpg" alt="Empty chair belonging to the Speaker of the Texas House of Representatives with email symbol overlaid.">
</a>
</figure>
</section>
</li>
</ul>
This class isn't referenced anywhere