Cards
The original vertical blog card and a horizontal variant share the same image, post title, author, date, and excerpt.
Vertical card
The card keeps its original max-width: 344px and shrinks with the available space. Both the card and its image use border-r-16.
Second Web Design Post
YOLO pop-up synth fixie slow-carb fingerstache before they sold out twee readymade church-key DIY meh umami crucifix offal. PBR&B craft beer photo booth lyft gastropub 90's. This is a Read more...
<div class="clr-primary-bg p-24 border-r-16" style="max-width: 344px">
<a href="/blog/web-design/second-web-design-post/" class="flex mb-8"><img class="border-r-16" src="/assets/blog/featured-image/design2seo-11ty-theme.webp" alt="Epic CSS with 11ty UI Library banner" width="484" height="242"></a>
<h3 class="clr-primary mt-0 mb-24">
<a href="/blog/web-design/second-web-design-post/">Second Web Design Post</a>
</h3>
<div class="mb-24">
by <span>admin</span> on <span>Mar 11, 2020</span>
</div>
<p class="mb-0">
YOLO pop-up synth fixie slow-carb fingerstache before they sold out twee readymade church-key DIY meh umami crucifix offal. PBR&B craft beer photo booth lyft gastropub 90's.
This is a<a href="/blog/web-design/second-web-design-post/" class="clr-underline"> Read more...</a></p>
</div>Horizontal card
The same image and content use a column on small screens and a row from 820 pixels up, with flex-col, md-flex-row, and gap-24.
Second Web Design Post
YOLO pop-up synth fixie slow-carb fingerstache before they sold out twee readymade church-key DIY meh umami crucifix offal. PBR&B craft beer photo booth lyft gastropub 90's. This is a Read more...
<div class="clr-primary-bg p-24 border-r-16 flex flex-col md-flex-row gap-24 items-start">
<a href="/blog/web-design/second-web-design-post/" class="flex items-start md-w-50"><img class="border-r-16" src="/assets/blog/featured-image/design2seo-11ty-theme.webp" alt="Epic CSS with 11ty UI Library banner" width="484" height="242"></a>
<div class="md-w-50">
<h3 class="clr-primary mt-0 mb-24">
<a href="/blog/web-design/second-web-design-post/">Second Web Design Post</a>
</h3>
<div class="mb-24">
by <span>admin</span> on <span>Mar 11, 2020</span>
</div>
<p class="mb-0">
YOLO pop-up synth fixie slow-carb fingerstache before they sold out twee readymade church-key DIY meh umami crucifix offal. PBR&B craft beer photo booth lyft gastropub 90's.
This is a<a href="/blog/web-design/second-web-design-post/" class="clr-underline"> Read more...</a></p>
</div>
</div>This example preserves the original sample post links. The sample blog page is not included in this site, so replace those links when using the card in your project.