Khwezi Mngoma
26 lines
1.4 KiB
Plaintext
26 lines
1.4 KiB
Plaintext
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
|
<div class="card border-0 h-100 p-4 position-relative" style="background-color: #F1F1F1; border-radius: var(--mb-radius);">
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<span class="badge rounded-pill px-3 py-2" style="background-color: var(--mb-accent-red); font-weight: 500;">New</span>
|
|
<button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0" style="width: 32px; height: 32px;">
|
|
<i data-lucide="arrow-up-right" style="width: 16px; height: 16px; color: var(--mb-text-dark);"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-center align-items-center flex-grow-1 my-3" style="min-height: 260px;">
|
|
<img src="@BookImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@Title" />
|
|
</div>
|
|
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center mt-3 px-2">
|
|
<span class="fw-medium text-dark" style="font-size: 0.9rem;">@Title</span>
|
|
<span class="text-muted fw-semibold" style="font-size: 0.9rem;">$@Price</span>
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
[Parameter] public string Title { get; set; } = "";
|
|
[Parameter] public decimal Price { get; set; }
|
|
[Parameter] public string BookImageUrl { get; set; } = "";
|
|
} |