Struggling with creating a card list design. I want to use MDB5 (utilizing Angular and the MDB5 package - ) but here's the concept:
Imagine a white page where within a grey background, there is a list of item cards. Each card consists of an image on the left side, a column for item name and text in the middle, and a line followed by additional text on the right.
Here is my initial attempt at CSS styling:
.block {
overflow: hidden;
background: #ffff;
padding: 1rem;
margin: 0 0 1rem 0;
}
.block img {
width: 75px;
height: 75px;
float: left;
margin: 0 1rem 0 0;
}
.block h2 {
margin: 0 0 0.5rem 0;
}
And the corresponding HTML structure:
<div class="row">
<div class="block">
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder7.webp" alt="">
<h2>{{jobFieldDescription.naziv}}</h2>
<p>{{jobFieldDescription.kratekOpisPoklica}}</p>
</div>
</div>