Cards
Cards with images serve as visual containers for content, providing a structured and engaging way to present information on a portfolio website. They are particularly effective for showcasing projects that benefits from a visual preview.
Responsive Cards
<div class="row">
<div class="col-sm col-m-6">
<a href=""><img src="/img/" class="card-img-top img-fluid" alt="..."></a>
<br>
<p>Project Role</p>
<h3>Project Name</h3>
<p><a href="">View Project <i class="fa-solid fa-arrow-right"></i></a</p>
</div>
<div class="col-sm col-m-6">
<a href=""><img src="/img/" class="card-img-top img-fluid" alt="..."></a>
<br>
<p>Project Role</p>
<h3>Project Name</h3>
<p><a href="">View Project <i class="fa-solid fa-arrow-right"></i></a></p>
</div>
</div>
Accessibility
For each card, it is essential to utilize relevant images, accompanied by appropriate alt text. Additionally, card links must consistently incorporate a right arrow as a non-color link indicator. This ensures both visual coherence and accessibility throughout the user experience.