CSS Components for Articles
Article list - type 1
<section>
<h2 class="font-size:32px margin-top:0 text-align:center">Latest Blog Posts</h2>
<div class="display:flex flex-direction:column gap:32px">
<a href="#" class="
display:grid align-items:center grid-template-columns:repeat(auto-fit,minmax(276px,1fr)) color:#000 text-decoration:none transition:.3s border-radius:12px
hover:background:#eee
">
<img src="/images/snippets/components/picture1.jpg" width="2" height="1" loading="lazy" fetchpriority="low" class="width:100% height:100% border-radius:12px object-fit:cover">
<div class="display:flex flex-direction:column gap:8px padding:16px">
<h3 class="font-size:24px margin:0">Lorem ipsum dolor sit amet</h3>
<div class="display:flex align-items:center gap:8px">
<img src="/images/snippets/components/person1.jpg" width="24" height="24" loading="lazy" fetchpriority="low" class="border-radius:50px">
<span class="font-size:12px">Article Author</span>
</div>
<div class="font-size:16px line-height:24px display:-webkit-box webkit-line-clamp:3 webkit-box-orient:vertical overflow:hidden max-height:72px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam at arcu a est sollicitudin euismod. Mauris dictum facilisis augue. Vivamus porttitor turpis ac leo.
</div>
</div>
</a>
<a href="#" class="
display:grid align-items:center grid-template-columns:repeat(auto-fit,minmax(276px,1fr)) color:#000 text-decoration:none transition:.3s border-radius:12px
hover:background:#eee
">
<img src="/images/snippets/components/picture2.jpg" width="2" height="1" loading="lazy" fetchpriority="low" class="width:100% height:100% border-radius:12px object-fit:cover">
<div class="display:flex flex-direction:column gap:8px padding:12px">
<h3 class="font-size:24px margin:0">Lorem ipsum dolor sit amet</h3>
<div class="display:flex align-items:center gap:8px">
<img src="/images/snippets/components/person1.jpg" width="24" height="24" loading="lazy" fetchpriority="low" class="border-radius:50px">
<span class="font-size:12px">Article Author</span>
</div>
<div class="font-size:16px line-height:24px display:-webkit-box webkit-line-clamp:3 webkit-box-orient:vertical overflow:hidden max-height:72px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam at arcu a est sollicitudin euismod. Mauris dictum facilisis augue. Vivamus porttitor turpis ac leo.
</div>
</div>
</a>
</div>
</section><!--
stylify-components
'article-list': 'display:flex flex-direction:column gap:32px',
'article-list__item': `
display:grid align-items:center grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) row-gap:8px column-gap:24px color:#000 text-decoration:none transition:.3s border-radius:12px
hover:background:#eee
`,
'article-list__item-image': 'width:100% height:100% border-radius:12px object-fit:cover',
'article-list__item-content': 'display:flex flex-direction:column gap:8px',
'article-list__item-title': 'font-size:24px margin:0',
'article-list__item-author': `
display:flex align-items:center gap:8px
img { border-radius:50px }
span { font-size:12px }
`,
'article-list__item-description': 'font-size:16px line-height:24px display:-webkit-box webkit-line-clamp:3 webkit-box-orient:vertical overflow:hidden max-height:72px'
/stylify-components
-->
<section>
<h2 class="font-size:32px margin-top:0 text-align:center">Latest Blog Posts</h2>
<div class="article-list">
<a href="#" class="article-list__item">
<img src="/images/snippets/components/picture1.jpg" width="2" height="1" loading="lazy" fetchpriority="low" class="article-list__item-image">
<div class="article-list__item-content">
<h3 class="article-list__item-title">Lorem ipsum dolor sit amet</h3>
<div class="article-list__item-author">
<img src="/images/snippets/components/person1.jpg" width="24" height="24" loading="lazy" fetchpriority="low">
<span>Article Author</span>
</div>
<div class="article-list__item-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam at arcu a est sollicitudin euismod. Mauris dictum facilisis augue. Vivamus porttitor turpis ac leo.
</div>
</div>
</a>
<a href="#" class="article-list__item">
<img src="/images/snippets/components/picture2.jpg" width="2" height="1" loading="lazy" fetchpriority="low" class="article-list__item-image">
<div class="article-list__item-content">
<h3 class="article-list__item-title">Lorem ipsum dolor sit amet</h3>
<div class="article-list__item-author">
<img src="/images/snippets/components/person1.jpg" width="24" height="24" loading="lazy" fetchpriority="low">
<span>Article Author</span>
</div>
<div class="article-list__item-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam at arcu a est sollicitudin euismod. Mauris dictum facilisis augue. Vivamus porttitor turpis ac leo.
</div>
</div>
</a>
</div>
</section>Article list - type 2
<section>
<h2 class="font-size:32px margin-top:0 text-align:center">Latest Blog Posts</h2>
<div class="display:grid row-gap:32px column-gap:24px grid-template-columns:repeat(auto-fit,minmax(276px,1fr))">
<a href="#" class="
display:flex flex-direction:column color:#000 text-decoration:none transition:.3s border-radius:12px
hover:background:#eee
">
<img src="/images/snippets/components/picture1.jpg" width="2" height="1" loading="lazy" fetchpriority="low" class="width:100% height:100% border-radius:12px object-fit:cover">
<div class="display:flex flex-direction:column gap:8px padding:0_24px_24px_24px">
<div class="display:flex align-items:flex-end gap:8px margin-top:-40px margin-bottom:8px">
<img src="/images/snippets/components/person1.jpg" width="70" height="70" loading="lazy" fetchpriority="low" class="border-radius:50px">
<span class="font-size:16px">Article Author</span>
</div>
<h3 class="font-size:24px margin:0">Lorem ipsum dolor sit amet</h3>
<div class="font-size:16px line-height:24px display:-webkit-box webkit-line-clamp:3 webkit-box-orient:vertical overflow:hidden max-height:72px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam at arcu a est sollicitudin euismod. Mauris dictum facilisis augue. Vivamus porttitor turpis ac leo.
</div>
</div>
</a>
<a href="#" class="
display:flex flex-direction:column color:#000 text-decoration:none transition:.3s border-radius:12px
hover:background:#eee
">
<img src="/images/snippets/components/picture2.jpg" width="2" height="1" loading="lazy" fetchpriority="low" class="width:100% height:100% border-radius:12px object-fit:cover">
<div class="display:flex flex-direction:column gap:8px padding:0_24px_24px_24px">
<div class="display:flex align-items:flex-end gap:8px margin-top:-40px margin-bottom:8px">
<img src="/images/snippets/components/person1.jpg" width="70" height="70" loading="lazy" fetchpriority="low" class="border-radius:50px">
<span class="font-size:16px">Article Author</span>
</div>
<h3 class="font-size:24px margin:0">Lorem ipsum dolor sit amet</h3>
<div class="font-size:16px line-height:24px display:-webkit-box webkit-line-clamp:3 webkit-box-orient:vertical overflow:hidden max-height:72px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam at arcu a est sollicitudin euismod. Mauris dictum facilisis augue. Vivamus porttitor turpis ac leo.
</div>
</div>
</a>
</div>
</section><!--
stylify-components
'article-list': 'display:grid row-gap:32px column-gap:24px grid-template-columns:repeat(auto-fit,minmax(276px,1fr))',
'article-list__item': `
display:flex flex-direction:column color:#000 text-decoration:none transition:.3s border-radius:12px
hover:background:#eee
`,
'article-list__item-image': 'width:100% height:100% border-radius:12px object-fit:cover',
'article-list__item-content': 'display:flex flex-direction:column gap:8px padding:0_24px_24px_24px',
'article-list__item-title': 'font-size:24px margin:0',
'article-list__item-author': `
display:flex align-items:flex-end gap:8px margin-top:-40px margin-bottom:8px
img { border-radius:50px }
span { font-size:16px }
`,
'article-list__item-description': 'font-size:16px line-height:24px display:-webkit-box webkit-line-clamp:3 webkit-box-orient:vertical overflow:hidden max-height:72px'
/stylify-components
-->
<section>
<h2 class="font-size:32px margin-top:0 text-align:center">Latest Blog Posts</h2>
<div class="article-list">
<a href="#" class="article-list__item">
<img src="/images/snippets/components/picture1.jpg" width="2" height="1" loading="lazy" fetchpriority="low" class="article-list__item-image">
<div class="article-list__item-content">
<div class="article-list__item-author">
<img src="/images/snippets/components/person1.jpg" width="70" height="70" loading="lazy" fetchpriority="low">
<span>Article Author</span>
</div>
<h3 class="article-list__item-title">Lorem ipsum dolor sit amet</h3>
<div class="article-list__item-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam at arcu a est sollicitudin euismod. Mauris dictum facilisis augue. Vivamus porttitor turpis ac leo.
</div>
</div>
</a>
<a href="#" class="article-list__item">
<img src="/images/snippets/components/picture2.jpg" width="2" height="1" loading="lazy" fetchpriority="low" class="article-list__item-image">
<div class="article-list__item-content">
<div class="article-list__item-author">
<img src="/images/snippets/components/person1.jpg" width="70" height="70" loading="lazy" fetchpriority="low">
<span>Article Author</span>
</div>
<h3 class="article-list__item-title">Lorem ipsum dolor sit amet</h3>
<div class="article-list__item-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam at arcu a est sollicitudin euismod. Mauris dictum facilisis augue. Vivamus porttitor turpis ac leo.
</div>
</div>
</a>
</div>
</section>Article list - type 3
<section>
<h2 class="font-size:32px margin-top:0 text-align:center">Latest Blog Posts</h2>
<div class="display:grid row-gap:32px column-gap:24px grid-template-columns:repeat(auto-fit,minmax(276px,1fr))">
<a href="#" class="
display:flex position:relative overflow:hidden flex-direction:column color:#fff text-decoration:none transition:.3s border-radius:12px
[&:hover_h3]{text-decoration:underline}
">
<img src="/images/snippets/components/picture1.jpg" width="2" height="1" loading="lazy" fetchpriority="low" class="width:100% height:100% border-radius:12px object-fit:cover">
<div class="display:flex flex-direction:column justify-content:flex-end gap:8px position:absolute bottom:0 left:0 width:100% min-height:60% background:linear-gradient(0,rgba(0,0,0,.5)_50%,rgba(255,255,255,0)_100%) padding:8px md:padding:12px">
<h3 class="font-size:24px margin:0">Lorem ipsum dolor sit amet</h3>
<div class="display:flex align-items:center gap:8px">
<img src="/images/snippets/components/person1.jpg" width="24" height="24" loading="lazy" fetchpriority="low" class="border-radius:50px">
<span class="font-size:16px">Article Author</span>
</div>
</div>
</a>
<a href="#" class="
display:flex position:relative overflow:hidden flex-direction:column color:#fff text-decoration:none transition:.3s border-radius:12px
[&:hover_h3]{text-decoration:underline}
">
<img src="/images/snippets/components/picture2.jpg" width="2" height="1" loading="lazy" fetchpriority="low" class="width:100% height:100% border-radius:12px object-fit:cover">
<div class="display:flex flex-direction:column justify-content:flex-end gap:8px position:absolute bottom:0 left:0 width:100% min-height:60% background:linear-gradient(0,rgba(0,0,0,.5)_50%,rgba(255,255,255,0)_100%) padding:8px md:padding:12px">
<h3 class="font-size:24px margin:0">Lorem ipsum dolor sit amet</h3>
<div class="display:flex align-items:center gap:8px">
<img src="/images/snippets/components/person1.jpg" width="24" height="24" loading="lazy" fetchpriority="low" class="border-radius:50px">
<span class="font-size:16px">Article Author</span>
</div>
</div>
</a>
</div>
</section><!--
stylify-components
'article-list': 'display:grid row-gap:32px column-gap:24px grid-template-columns:repeat(auto-fit,minmax(276px,1fr))',
'article-list__item': `
display:flex position:relative overflow:hidden flex-direction:column color:#fff text-decoration:none transition:.3s border-radius:12px
&:hover h3 { text-decoration:underline }
`,
'article-list__item-image': 'width:100% height:100% border-radius:12px object-fit:cover',
'article-list__item-content': 'display:flex flex-direction:column justify-content:flex-end gap:8px position:absolute bottom:0 left:0 width:100% min-height:60% background:linear-gradient(0,rgba(0,0,0,.5)_50%,rgba(255,255,255,0)_100%) padding:8px md:padding:12px',
'article-list__item-title': 'font-size:24px margin:0',
'article-list__item-author': `
display:flex align-items:center gap:8px
img { border-radius:50px }
span { font-size:16px }
`,
'article-list__item-description': 'font-size:16px line-height:24px display:-webkit-box webkit-line-clamp:3 webkit-box-orient:vertical overflow:hidden max-height:72px'
/stylify-components
-->
<section>
<h2 class="font-size:32px margin-top:0 text-align:center">Latest Blog Posts</h2>
<div class="article-list">
<a href="#" class="article-list__item">
<img src="/images/snippets/components/picture1.jpg" width="2" height="1" loading="lazy" fetchpriority="low" class="article-list__item-image">
<div class="article-list__item-content">
<h3 class="article-list__item-title">Lorem ipsum dolor sit amet</h3>
<div class="article-list__item-author">
<img src="/images/snippets/components/person1.jpg" width="24" height="24" loading="lazy" fetchpriority="low">
<span>Article Author</span>
</div>
</div>
</a>
<a href="#" class="article-list__item">
<img src="/images/snippets/components/picture2.jpg" width="2" height="1" loading="lazy" fetchpriority="low" class="article-list__item-image">
<div class="article-list__item-content">
<h3 class="article-list__item-title">Lorem ipsum dolor sit amet</h3>
<div class="article-list__item-author">
<img src="/images/snippets/components/person1.jpg" width="24" height="24" loading="lazy" fetchpriority="low">
<span>Article Author</span>
</div>
</div>
</a>
</div>
</section><!--
stylify-variables
color: '#ff1b6b'
/stylify-variables
-->
<article class="
display:flex flex-direction:column gap:16px
">
<!-- You might want to use <picture> element here for different hero image sizes -->
<img src="/images/snippets/components/picture3.jpg" loading="eager" fetchpriority="high" width="2" height="1" class="width:100% height:auto">
<h1 class="font-size:32px line-height:40px margin:0">Lorem ipsum dolor sit amet</h1>
<div>
<div class="display:flex align-items:center gap:8px font-size:14px">
<img src="/images/snippets/components/person1.jpg" width="24" height="24" loading="lazy" fetchpriority="low" class="border-radius:50px">
<span>Article Author</span>
<span>|</span>
<span>February 24, 2023</span>
</div>
</div>
<p class="font-weight:bold margin:0 font-size:18px;line-height:27px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi scelerisque luctus velit. Integer malesuada. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Mauris elementum mauris vitae tortor. Proin mattis lacinia justo. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. In rutrum. In dapibus augue non sapien. Quisque tincidunt scelerisque libero. Integer in sapien.
</p>
<div class="
[p]{font-size:18px;line-height:27px;margin-bottom:24px}
[h2,h3,h4]{margin-top:40px}
[h2]{font-size:24px;line-height:30px}
[h3,h4,h5,h6]{font-size:18px;line-height:24px}
[h4,h5,h6]{font-weight:normal}
[a]{color:$color;hover:text-decoration:none}
[img]{max-width:100%;object-fit:cover;border-radius:8px}
">
<h2>Heading 2</h2>
<p>Lorem <a href="#">ipsum dolor sit amet</a>, consectetuer adipiscing elit. Morbi scelerisque luctus velit. Integer malesuada. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Mauris elementum mauris vitae tortor. Proin mattis lacinia justo. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. In rutrum. In dapibus augue non sapien. Quisque tincidunt scelerisque libero. Integer in sapien. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi scelerisque luctus velit. Integer malesuada. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Mauris elementum mauris vitae tortor. Proin mattis lacinia justo. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. In rutrum. In dapibus augue non sapien. Quisque tincidunt scelerisque libero. Integer in sapien. </p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi scelerisque luctus velit. Integer malesuada. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Mauris elementum mauris vitae tortor. Proin mattis lacinia justo. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. In rutrum. In dapibus augue non sapien. Quisque tincidunt scelerisque libero. Integer in sapien. </p>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>
<img src="/images/snippets/components/picture4.jpg" loading="lazy" fetchpriority="low">
</p>
<p class="display:grid gap:12px grid-template-columns:repeat(auto-fit,minmax(250px,1fr))">
<img src="/images/snippets/components/picture4.jpg" loading="lazy" fetchpriority="low">
<img src="/images/snippets/components/picture4.jpg" loading="lazy" fetchpriority="low">
<img src="/images/snippets/components/picture4.jpg" loading="lazy" fetchpriority="low">
<img src="/images/snippets/components/picture4.jpg" loading="lazy" fetchpriority="low">
</p>
</div>
<div class="
border-top:1px_solid_#eee padding:24px_0 display:grid grid-template-columns:repeat(auto-fit,minmax(250px,1fr))
[a]{color:#000;text-decoration:none;font-weight:bold;display:inline-flex;align-items:center;gap:8px;hover:color:$color}
">
<div class="text-align:left">
<a href="#">
<svg height="18" width="18" version="1.1" viewBox="0 0 185.343 185.343" class="transform:rotate(180deg)">
<g><path fill="currentColor" d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175 l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934 c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"/></g>
</svg>
<span>Previous article</span>
</a>
</div>
<div class="text-align:right">
<a href="#">
<span>Next article</span>
<svg height="18" width="18" version="1.1" viewBox="0 0 185.343 185.343">
<g><path fill="currentColor" d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175 l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934 c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"/></g>
</svg>
</a>
</div>
</div>
</article>
