Merged in feat/SW-1383-content-card-start-page (pull request #1252)

feat(SW-1383): Implement ContentCard for the Start Page

* feat(SW-1383): Implement ContentCard

- Add ContentCard component
- Use within CarouselCards component

* fix(SW-1383): adjust carousel and content card styling

* refactor(SW-1383): optimize ContentCard component styling and props

* feat(SW-1383): move ContentCard image check out of component

* feat(SW-1383): Add optional link prop to ContentCard component

* refactor(SW-1383): Make ContentCard component linkable


Approved-by: Christian Andolf
Approved-by: Erik Tiekstra
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-02-05 11:29:53 +00:00
parent a389fba8ce
commit f3e6318d49
10 changed files with 238 additions and 126 deletions

View File

@@ -0,0 +1,36 @@
.code {
padding: var(--Spacing-x2);
background: var(--Base-Surface-Secondary-light-Normal);
}
/*
Mock styles for the carousel cards. Will be removed/replaced
when the carousel functionality is implemented (SW-1542).
*/
.cardsContainer {
display: grid;
gap: var(--Spacing-x3);
grid-auto-flow: column;
grid-auto-columns: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
}
.cardsContainer > * {
scroll-snap-align: start;
}
/* Show 2 cards on tablet */
@media (min-width: 768px) {
.cardsContainer {
grid-auto-columns: calc((100% - var(--Spacing-x3)) / 2);
}
}
/* Show 3 cards on desktop */
@media (min-width: 1024px) {
.cardsContainer {
grid-auto-columns: calc((100% - var(--Spacing-x3) * 2) / 3);
}
}