Block feed
Feed of posts with bordered separators. The variations for this are on the item borders. This would be a great use case for container queries. {{isWide}}
.c-block-feed
<!-- the variations for this one occur on the items -->
<ul class="c-block-feed has-giant-btm-marg">
<li class="c-block-feed__item ">
<article class="c-story-block ">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="c-story-block__headline t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a href="#" class="has-text-black-off">The best and worst moments in Texas politics of 2019</a></h3>
<!-- byline -->
<p class="t-byline t-size-xs t-links t-uppercase t-lsp-m has-text-gray has-b-btm-marg">
<span class="t-byline__item">by <a href="#">George Costanza</a> and <a href="#">Cosmo Kramer</a></span><time class="t-byline__item" datetime="Mon, 16 Sep 2019 05:00:00 -0500">Sept. 16, 2019</time>
</p>
<!-- summary -->
<p class="t-serif t-links t-size-s is-hidden-until-bp-s">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde rem ipsum officia eum, iusto aliquam reprehenderit similique at vero dolores saepe nisi quas corporis voluptate suscipit explicabo, aspernatur consequuntur nihil. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias velit eaque at nemo! Natus voluptas debitis blanditiis velit rem aut aliquid delectus, voluptatem modi laborum excepturi doloremque dignissimos itaque. Id! <a class="t-uppercase t-size-xxs t-lsp-m t-sans l-display-ib" href="#">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">
<a href="#" tabindex="-1">
<img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding">
</a>
<figcaption class="c-caption c-caption--compact has-text-gray-dark l-display-block t-size-xxs">This is an image caption describing the image above. <span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#camera"></use></svg></span> <cite>Photographer Name for Company XYZ</cite>
</figcaption>
</figure>
</article>
</li>
<li class="c-block-feed__item ">
<article class="c-story-block ">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="c-story-block__headline t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a href="#" class="has-text-black-off">The best and worst moments in Texas politics of 2019</a></h3>
<!-- byline -->
<p class="t-byline t-size-xs t-links t-uppercase t-lsp-m has-text-gray has-b-btm-marg">
<span class="t-byline__item">by <a href="#">George Costanza</a> and <a href="#">Cosmo Kramer</a></span><time class="t-byline__item" datetime="Mon, 16 Sep 2019 05:00:00 -0500">Sept. 16, 2019</time>
</p>
<!-- summary -->
<p class="t-serif t-links t-size-s is-hidden-until-bp-s">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde rem ipsum officia eum, iusto aliquam reprehenderit similique at vero dolores saepe nisi quas corporis voluptate suscipit explicabo, aspernatur consequuntur nihil. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias velit eaque at nemo! Natus voluptas debitis blanditiis velit rem aut aliquid delectus, voluptatem modi laborum excepturi doloremque dignissimos itaque. Id! <a class="t-uppercase t-size-xxs t-lsp-m t-sans l-display-ib" href="#">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">
<a href="#" tabindex="-1">
<img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding">
</a>
<figcaption class="c-caption c-caption--compact has-text-gray-dark l-display-block t-size-xxs">This is an image caption describing the image above. <span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#camera"></use></svg></span> <cite>Photographer Name for Company XYZ</cite>
</figcaption>
</figure>
</article>
</li>
<li class="c-block-feed__item ">
<article class="c-story-block ">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="c-story-block__headline t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a href="#" class="has-text-black-off">The best and worst moments in Texas politics of 2019</a></h3>
<!-- byline -->
<p class="t-byline t-size-xs t-links t-uppercase t-lsp-m has-text-gray has-b-btm-marg">
<span class="t-byline__item">by <a href="#">George Costanza</a> and <a href="#">Cosmo Kramer</a></span><time class="t-byline__item" datetime="Mon, 16 Sep 2019 05:00:00 -0500">Sept. 16, 2019</time>
</p>
<!-- summary -->
<p class="t-serif t-links t-size-s is-hidden-until-bp-s">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde rem ipsum officia eum, iusto aliquam reprehenderit similique at vero dolores saepe nisi quas corporis voluptate suscipit explicabo, aspernatur consequuntur nihil. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias velit eaque at nemo! Natus voluptas debitis blanditiis velit rem aut aliquid delectus, voluptatem modi laborum excepturi doloremque dignissimos itaque. Id! <a class="t-uppercase t-size-xxs t-lsp-m t-sans l-display-ib" href="#">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">
<a href="#" tabindex="-1">
<img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding">
</a>
<figcaption class="c-caption c-caption--compact has-text-gray-dark l-display-block t-size-xxs">This is an image caption describing the image above. <span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#camera"></use></svg></span> <cite>Photographer Name for Company XYZ</cite>
</figcaption>
</figure>
</article>
</li>
</ul>
| Repo | Count | Location(s) |
|---|---|---|
| texastribune | 11 |
.c-block-feed__item--no-border-from-bp-m
Removes borders after
bp-m The homepage does this.<!-- the variations for this one occur on the items -->
<ul class="c-block-feed has-giant-btm-marg">
<li class="c-block-feed__item c-block-feed__item--no-border-from-bp-m">
<article class="c-story-block c-block-feed__item--no-border-from-bp-m">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="c-story-block__headline t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a href="#" class="has-text-black-off">The best and worst moments in Texas politics of 2019</a></h3>
<!-- byline -->
<p class="t-byline t-size-xs t-links t-uppercase t-lsp-m has-text-gray has-b-btm-marg">
<span class="t-byline__item">by <a href="#">George Costanza</a> and <a href="#">Cosmo Kramer</a></span><time class="t-byline__item" datetime="Mon, 16 Sep 2019 05:00:00 -0500">Sept. 16, 2019</time>
</p>
<!-- summary -->
<p class="t-serif t-links t-size-s is-hidden-until-bp-s">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde rem ipsum officia eum, iusto aliquam reprehenderit similique at vero dolores saepe nisi quas corporis voluptate suscipit explicabo, aspernatur consequuntur nihil. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias velit eaque at nemo! Natus voluptas debitis blanditiis velit rem aut aliquid delectus, voluptatem modi laborum excepturi doloremque dignissimos itaque. Id! <a class="t-uppercase t-size-xxs t-lsp-m t-sans l-display-ib" href="#">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">
<a href="#" tabindex="-1">
<img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding">
</a>
<figcaption class="c-caption c-caption--compact has-text-gray-dark l-display-block t-size-xxs">This is an image caption describing the image above. <span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#camera"></use></svg></span> <cite>Photographer Name for Company XYZ</cite>
</figcaption>
</figure>
</article>
</li>
<li class="c-block-feed__item c-block-feed__item--no-border-from-bp-m">
<article class="c-story-block c-block-feed__item--no-border-from-bp-m">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="c-story-block__headline t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a href="#" class="has-text-black-off">The best and worst moments in Texas politics of 2019</a></h3>
<!-- byline -->
<p class="t-byline t-size-xs t-links t-uppercase t-lsp-m has-text-gray has-b-btm-marg">
<span class="t-byline__item">by <a href="#">George Costanza</a> and <a href="#">Cosmo Kramer</a></span><time class="t-byline__item" datetime="Mon, 16 Sep 2019 05:00:00 -0500">Sept. 16, 2019</time>
</p>
<!-- summary -->
<p class="t-serif t-links t-size-s is-hidden-until-bp-s">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde rem ipsum officia eum, iusto aliquam reprehenderit similique at vero dolores saepe nisi quas corporis voluptate suscipit explicabo, aspernatur consequuntur nihil. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias velit eaque at nemo! Natus voluptas debitis blanditiis velit rem aut aliquid delectus, voluptatem modi laborum excepturi doloremque dignissimos itaque. Id! <a class="t-uppercase t-size-xxs t-lsp-m t-sans l-display-ib" href="#">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">
<a href="#" tabindex="-1">
<img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding">
</a>
<figcaption class="c-caption c-caption--compact has-text-gray-dark l-display-block t-size-xxs">This is an image caption describing the image above. <span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#camera"></use></svg></span> <cite>Photographer Name for Company XYZ</cite>
</figcaption>
</figure>
</article>
</li>
<li class="c-block-feed__item c-block-feed__item--no-border-from-bp-m">
<article class="c-story-block c-block-feed__item--no-border-from-bp-m">
<div class="c-story-block__text">
<!-- headline (h# tag will depend on context) -->
<h3 class="c-story-block__headline t-serif t-lh-s t-lsp-s t-links-underlined-hover has-xxxs-btm-marg"><a href="#" class="has-text-black-off">The best and worst moments in Texas politics of 2019</a></h3>
<!-- byline -->
<p class="t-byline t-size-xs t-links t-uppercase t-lsp-m has-text-gray has-b-btm-marg">
<span class="t-byline__item">by <a href="#">George Costanza</a> and <a href="#">Cosmo Kramer</a></span><time class="t-byline__item" datetime="Mon, 16 Sep 2019 05:00:00 -0500">Sept. 16, 2019</time>
</p>
<!-- summary -->
<p class="t-serif t-links t-size-s is-hidden-until-bp-s">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde rem ipsum officia eum, iusto aliquam reprehenderit similique at vero dolores saepe nisi quas corporis voluptate suscipit explicabo, aspernatur consequuntur nihil. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias velit eaque at nemo! Natus voluptas debitis blanditiis velit rem aut aliquid delectus, voluptatem modi laborum excepturi doloremque dignissimos itaque. Id! <a class="t-uppercase t-size-xxs t-lsp-m t-sans l-display-ib" href="#">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">
<a href="#" tabindex="-1">
<img class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding">
</a>
<figcaption class="c-caption c-caption--compact has-text-gray-dark l-display-block t-size-xxs">This is an image caption describing the image above. <span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#camera"></use></svg></span> <cite>Photographer Name for Company XYZ</cite>
</figcaption>
</figure>
</article>
</li>
</ul>
| Repo | Count | Location(s) |
|---|---|---|
| texastribune | 9 |