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:
36
components/Blocks/carouselCards.module.css
Normal file
36
components/Blocks/carouselCards.module.css
Normal 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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user