I am attempting to recreate a card design similar to the one shown in the image, but I am struggling to identify the name on the right side. Even though it is supposed to be clear, I always rely on the image as a reference.
https://i.sstatic.net/hDh22.png
Could someone provide me with some guidance, please? Thank you! This is the current code that I have:
.product {
position: relative;
vertical-align: top;
display: inline-block;
line-height: 100px;
font-size: 11px;
margin: 8px !important;
width: 100%;
height: 130px;
background: #fff;
border: 1px solid #e2e2e2;
border-radius: 10px;
border-bottom-width: 3px;
overflow: hidden;
cursor: pointer;
}
.product .product-img {
position: relative;
width: 120px;
height: 100px;
background: white;
text-align: center;
}
.product .product-img img {
max-height: 100px;
max-width: 120px;
vertical-align: middle;
}
.product .product-name {
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
bottom: 0;
top: auto;
line-height: 14px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}<article class="product">
<div class="product-img">
<img *ngIf="producto.imagen" [src]="URL_BASE_API + 'Files/Uploads/Products/' + producto.imagen" />
<img *ngIf="!producto.imagen" src="../../assets/images/atun.png" />
</div>
<div class="product-name">
<span>{{ producto.name }}</span>
</div>
</article>Here is how it currently appears: