<h2>Card list with featured</h2>
<ul class="card-list">
<li class="card">
<figure class="card-image"><a href="" title=""><img src="https://via.placeholder.com/800x400/ff66d6/ff66d6" alt=""></a></figure>
<h3 class="card-title"><a href="" title="">Title of this card is much longer than the other one</a></h3>
<div class="card-avatar"><img src="https://via.placeholder.com/64x64/ff66d6/ff66d6" alt=""></div>
<small class="card-author">Author Name</small>
<p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="card-button"><button>♥</button></div>
</li>
<li class="card">
<figure class="card-image"><a href="" title=""><img src="https://via.placeholder.com/800x400/ff66d6/ff66d6" alt=""></a></figure>
<h3 class="card-title"><a href="" title="">Title of this card</a></h3>
<div class="card-avatar"><img src="https://via.placeholder.com/64x64/ff66d6/ff66d6" alt=""></div>
<small class="card-author">Author Name</small>
<p class="card-description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis <span class="fade-text">odit aut fugit.</span></p>
<div class="card-button"><button>♥</button></div>
</li>
<li class="card">
<figure class="card-image"><a href="" title=""><img src="https://via.placeholder.com/800x400/ff66d6/ff66d6" alt=""></a></figure>
<h3 class="card-title"><a href="" title="">Title of this card is much longer than the other one</a></h3>
<div class="card-avatar"><img src="https://via.placeholder.com/64x64/ff66d6/ff66d6" alt=""></div>
<small class="card-author">Author Name</small>
<p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="card-button"><button>♥</button></div>
</li>
<li class="card">
<figure class="card-image"><a href="" title=""><img src="https://via.placeholder.com/800x400/ff66d6/ff66d6" alt=""></a></figure>
<h3 class="card-title"><a href="" title="">Title of this card</a></h3>
<div class="card-avatar"><img src="https://via.placeholder.com/64x64/ff66d6/ff66d6" alt=""></div>
<small class="card-author">Author Name</small>
<p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <span class="fade-text">dolore magna.</span></p>
<div class="card-button"><button>♥</button></div>
</li>
<li class="card">
<figure class="card-image"><a href="" title=""><img src="https://via.placeholder.com/800x400/ff66d6/ff66d6" alt=""></a></figure>
<h3 class="card-title"><a href="" title="">Title of this card is much longer than the other one, in fact it's super long</a></h3>
<div class="card-avatar"><img src="https://via.placeholder.com/64x64/ff66d6/ff66d6" alt=""></div>
<small class="card-author">Author Name</small>
<p class="card-description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, <span class="fade-text">odit aut fugit.</span></p>
<div class="card-button"><button>♥</button></div>
</li>
<li class="card">
<figure class="card-image"><a href="" title=""><img src="https://via.placeholder.com/800x400/ff66d6/ff66d6" alt=""></a></figure>
<h3 class="card-title"><a href="" title="">Title of this card</a></h3>
<div class="card-avatar"><img src="https://via.placeholder.com/64x64/ff66d6/ff66d6" alt=""></div>
<small class="card-author">Author Name</small>
<p class="card-description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis <span class="fade-text">odit aut fugit.</span></p>
<div class="card-button"><button>♥</button></div>
</li>
</ul>
Post a Comment