feat(css): enhance card design with flex layout

Introduced a flexbox layout to cards for a more adaptive and cohesive structure. This update includes styling for `.card-body` and `.card-footer`, ensuring they occupy space efficiently and maintain visual consistency across different viewport sizes. The `.card-footer` now has a distinct background and top border to clearly delineate it from the body content, enhancing readability and aesthetic appeal.

This enhancement addresses the need for more flexible layout options within cards, improving the overall user experience by ensuring content is well-organized and visually appealing across devices.
This commit is contained in:
Kumi 2024-05-22 18:17:37 +02:00
parent b0adb37ce7
commit 9eee296c81
Signed by: kumi
GPG key ID: ECBCC9082395383F

View file

@ -73,6 +73,20 @@ blockquote {
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
}
.card-body {
flex: 1;
padding: 1rem;
}
.card-footer {
padding: 1rem;
background-color: #f8f9fa;
border-top: 1px solid #ddd;
margin-top: auto;
} }
.card-img-top { .card-img-top {