feat:(SW-219): content card component WIP

This commit is contained in:
Chuma McPhoy
2024-09-11 11:31:42 +02:00
parent 6cfc79f8b5
commit 3e08b3357b
7 changed files with 215 additions and 1 deletions

View File

@@ -0,0 +1,51 @@
.card {
border-radius: var(--Corner-radius-Medium);
display: flex;
flex-direction: column;
max-width: 399px;
overflow: hidden;
}
.default {
background-color: var(--Base-Surface-Subtle-Normal);
}
.featured {
background-color: var(--Main-Grey-White);
}
.imageContainer {
width: 100%;
height: 12.58625rem; /* 201.38px / 16 = 12.58625rem */
overflow: hidden;
}
.backgroundImage {
width: 100%;
height: 100%;
object-fit: cover;
}
.content {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
align-items: flex-start;
padding: var(--Spacing-x4);
}
.description {
color: var(--Base-Text-Medium-contrast);
}
.ctaContainer {
display: flex;
gap: var(--Spacing-x2);
margin-top: var(--Spacing-x2);
}
.sidePeekCTA {
/* TODO: Create ticket to remove padding on "link" buttons,
align w. design on this. */
padding: 0 !important;
}